ci(changesets): version packages (#6059)

Co-authored-by: Junior Garcia <jrgarciadev@gmail.com>

.changeset/config.json

@@ -2,16 +2,19 @@
   "$schema": "https://unpkg.com/@changesets/config@2.3.0/schema.json",
   "changelog": [
     "@changesets/changelog-github",
-    { "repo": "nextui-org/nextui" }
+    { "repo": "heroui-inc/heroui" }
   ],
   "commit": false,
   "fixed": [],
   "linked": [],
   "access": "public",
-  "baseBranch": "main",
+  "baseBranch": "canary",
   "updateInternalDependencies": "patch",
+  "___experimentalUnsafeOptions_WILL_CHANGE_IN_PATCH": {
+    "onlyUpdatePeerDependentsWhenOutOfRange": true
+  },
   "ignore": [
-    "@nextui-org/docs",
-    "@nextui-org/storybook"
+    "@heroui/docs",
+    "@heroui/storybook"
   ]
 }

.coderabbit.yaml

@@ -0,0 +1,22 @@
+language: "en"
+early_access: false
+reviews:
+  high_level_summary: true
+  poem: false
+  review_status: true
+  collapse_walkthrough: false
+  auto_review:
+      enabled: true
+      ignore_title_keywords:
+        - "WIP"
+        - "DO NOT MERGE"
+        - 'ci(changesets)'
+      drafts: false
+      base_branches:
+        - "main"
+        - "canary"
+        - "fix/.*"
+        - "chore/.*"
+        - "feat/.*"
+chat:
+  auto_reply: true        

.commitlintrc.cjs

@@ -3,7 +3,7 @@ const conventional = require("@commitlint/config-conventional");
 module.exports = {
   extends: ["@commitlint/config-conventional"],
   plugins: ["commitlint-plugin-function-rules"],
-  helpUrl: "https://github.com/nextui-org/nextui/blob/main/CONTRIBUTING.MD#commit-convention",
+  helpUrl: "https://github.com/heroui-inc/heroui/blob/main/CONTRIBUTING.md#commit-convention",
   rules: {
     ...conventional.rules,
     "type-enum": [

.eslintignore

@@ -1,24 +0,0 @@
-.now/*
-.next/*
-*.css
-dist
-esm/*
-public/*
-tests/*
-scripts/*
-*.config.js
-.DS_Store
-node_modules
-coverage
-.next
-build
-!.storybook
-/**/.storybook/**
-!.commitlintrc.cjs
-!.lintstagedrc.cjs
-!jest.config.js
-!plopfile.js
-!react-shim.js
-!tsup.config.ts
-apps/docs/preinstall.js
-apps/docs/next-redirect.js

.eslintrc.json

@@ -1,92 +0,0 @@
-{
-  "$schema": "https://json.schemastore.org/eslintrc.json",
-  "env": {
-    "browser": false,
-    "es2021": true,
-    "node": true
-  },
-  "extends": [
-    "plugin:react/recommended",
-    "plugin:prettier/recommended",
-    "plugin:react-hooks/recommended",
-    "plugin:jsx-a11y/recommended"
-  ],
-  "plugins": ["react", "unused-imports", "import", "@typescript-eslint", "jsx-a11y", "prettier"],
-  "parser": "@typescript-eslint/parser",
-  "parserOptions": {
-    "ecmaFeatures": {
-      "jsx": true
-    },
-    "ecmaVersion": 12,
-    "sourceType": "module"
-  },
-  "settings": {
-    "react": {
-      "version": "detect"
-    }
-  },
-  "rules": {
-    "no-console": "warn",
-    "react/prop-types": "off",
-    "react/jsx-uses-react": "off",
-    "react/react-in-jsx-scope": "off",
-    "react-hooks/exhaustive-deps": "off",
-    "jsx-a11y/click-events-have-key-events": "warn",
-    "jsx-a11y/interactive-supports-focus": "warn",
-    "prettier/prettier": "warn",
-    "no-unused-vars": "off",
-    "unused-imports/no-unused-vars": "off",
-    "unused-imports/no-unused-imports": "warn",
-    "@typescript-eslint/no-unused-vars": [
-      "warn",
-      {
-        "args": "after-used",
-        "ignoreRestSiblings": false,
-        "argsIgnorePattern": "^_.*?$"
-      }
-    ],
-    "import/order": [
-      "warn",
-      {
-        "groups": [
-          "type",
-          "builtin",
-          "object",
-          "external",
-          "internal",
-          "parent",
-          "sibling",
-          "index"
-        ],
-        "pathGroups": [
-          {
-            "pattern": "~/**",
-            "group": "external",
-            "position": "after"
-          }
-        ],
-        "newlines-between": "always"
-      }
-    ],
-    "react/self-closing-comp": "warn",
-    "react/jsx-sort-props": [
-      "warn",
-      {
-        "callbacksLast": true,
-        "shorthandFirst": true,
-        "noSortAlphabetically": false,
-        "reservedFirst": true
-      }
-    ],
-    "padding-line-between-statements": [
-      "warn",
-      {"blankLine": "always", "prev": "*", "next": "return"},
-      {"blankLine": "always", "prev": ["const", "let", "var"], "next": "*"},
-      {
-        "blankLine": "any",
-        "prev": ["const", "let", "var"],
-        "next": ["const", "let", "var"]
-      }
-    ]
-  }
-}

.github/FUNDING.yml

@@ -2,7 +2,7 @@
 
 github: # Replace with up to 4 GitHub Sponsors-enabled usernames e.g., [user1, user2]
 patreon: jrgarciadev
-open_collective: nextui
+open_collective: heroui
 ko_fi: # Replace with a single Ko-fi username
 tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel
 community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry

.github/ISSUE_TEMPLATE/bug_report.yml

@@ -8,19 +8,31 @@ body:
       value: |
         Thank you for reporting an issue :pray:.
 
-        This issue tracker is for reporting bugs found in [NextUI github repository](https://github.com/nextui-org/nextui/)
+        This issue tracker is for reporting bugs found in [HeroUI github repository](https://github.com/heroui-inc/heroui/)
         If you have a question about how to achieve something and are struggling, please post a question
         inside of either of the following places:
-          - NextUI's [Discussion's tab](https://github.com/nextui-org/nextui/discussions)
-          - NextUI's [Discord channel](https://discord.gg/9b6yyZKmH4)
+          - HeroUI's [Discussion's tab](https://github.com/heroui-inc/heroui/discussions)
+          - HeroUI's [Discord channel](https://discord.gg/9b6yyZKmH4)
 
 
         Before submitting a new bug/issue, please check the links below to see if there is a solution or question posted there already:
-         - NextUI's [Issue's tab](https://github.com/nextui-org/nextui/pulls?q=is%3Apr+is%3Aopen+sort%3Aupdated-desc)
-         - NextUI's [closed issues tab](https://github.com/nextui-org/nextui/issues?q=is%3Aissue+sort%3Aupdated-desc+is%3Aclosed)
-         - NextUI's [Discussions tab](https://github.com/nextui-org/nextui/discussions)
+         - HeroUI's [Issue's tab](https://github.com/heroui-inc/heroui/pulls?q=is%3Apr+is%3Aopen+sort%3Aupdated-desc)
+         - HeroUI's [closed issues tab](https://github.com/heroui-inc/heroui/issues?q=is%3Aissue+sort%3Aupdated-desc+is%3Aclosed)
+         - HeroUI's [Discussions tab](https://github.com/heroui-inc/heroui/discussions)
 
         The more information you fill in, the better the community can help you.
+  - type: input
+    id: version
+    attributes:
+      label: HeroUI Version
+      description: |
+        Please provide the version of HeroUI you are using.
+        You can find the version number in the package.json file.
+        For global installation, please state the version only. (e.g. 2.4.2)
+        For individual installation, please state the package name as well. (e.g. @heroui/button@2.0.34)
+      placeholder: ex. 2.4.2
+    validations:
+      required: true
   - type: textarea
     id: description
     attributes:
@@ -35,7 +47,7 @@ body:
       description: |
         Which website or app were you using when the bug happened?
         Note:
-        - Your bug will may get fixed much faster if we can run your code and it doesn't have dependencies other than the `@nextui-org/react` npm package.
+        - Your bug will may get fixed much faster if we can run your code and it doesn't have dependencies other than the `@heroui/react` npm package.
         - To create a shareable code example you can use Stackblitz (https://stackblitz.com/). Please no localhost URLs.
         - Please read these tips for providing a minimal example: https://stackoverflow.com/help/mcve.
       placeholder: |
@@ -93,6 +105,6 @@ body:
         - "Safari"
         - "Edge"
         - "Opera"
-        - "Other (add additonal context)"
+        - "Other (add additional context)"
     validations:
-      required: true
+      required: true

.github/ISSUE_TEMPLATE/config.yml

@@ -1,11 +1,14 @@
 blank_issues_enabled: true
 contact_links:
+  - name: 💡 Feature Request
+    url: https://github.com/heroui-inc/heroui/discussions/categories/feature-requests
+    about: 💡 Suggest a new component, improve an existing component and etc
   - name: 🤔 Long question or ideas?
-    url: https://github.com/nextui-org/nextui/discussions
+    url: https://github.com/heroui-inc/heroui/discussions
     about: Ask long-form questions and discuss ideas.
   - name: 💬 Discord Community Chat
     url: https://discord.gg/9b6yyZKmH4
-    about: Ask quick questions or simply chat on the `NextUI` community Discord server.
-  - name: 💬 New Updates (Twitter)
-    url: https://twitter.com/getnextui
-    about: Link to our twitter account if you want to follow us and stay up to date with NextUI news
+    about: Ask quick questions or simply chat on the `HeroUI` community Discord server.
+  - name: 💬 New Updates (X)
+    url: https://x.com/hero_ui
+    about: Link to our X account if you want to follow us and stay up to date with HeroUI news

.github/ISSUE_TEMPLATE/feature_request.yml

@@ -1,49 +0,0 @@
-name: Feature request
-title: "[Feature Request] YOUR_FEATURE_TITLE_HERE_REPLACE_ME"
-labels: [feature request]
-description:  |
-  💡 Suggest an idea for the `NextUI` project
-  Examples
-    - propose a new component
-    - improve an exiting component
-    - ....etc
-body:
-  - type: markdown
-    attributes:
-      value: |
-        This issue form is for requesting features only! For example, requesting a new component, behavior ... etc
-        If you want to report a bug, please use the [bug report form](https://github.com/nextui-org/nextui/issues/new?assignees=&labels=&template=bug_report.yml).
-  - type: textarea
-    validations:
-      required: true
-    attributes:
-      label: Is your feature request related to a problem? Please describe.
-      description: A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
-  - type: textarea
-    validations:
-      required: true
-    attributes:
-      label: Describe the solution you'd like
-      description: A clear and concise description of what you want to happen.
-      placeholder: |
-        As a user, I expected ___ behavior but ___ ...
-        
-        Ideal Steps I would like to see:
-        1. Go to '...'
-        2. Click on '....'
-        3. ....
-  - type: textarea
-    validations:
-      required: true
-    attributes:
-      label: Describe alternatives you've considered
-      description: A clear and concise description of any alternative solutions or features you've considered.
-  - type: textarea
-    attributes:
-      label: Screenshots or Videos
-      description: |
-        If applicable, add screenshots or a video to help explain your problem.
-        For more information on the supported file image/file types and the file size limits, please refer
-        to the following link: https://docs.github.com/en/github/writing-on-github/working-with-advanced-formatting/attaching-files
-      placeholder: |
-        You can drag your video or image files inside of this editor ↓

.github/common-actions/install/action.yml

@@ -5,12 +5,10 @@ runs:
   using: composite
   steps:
     - name: Install dependencies
-      uses: pnpm/action-setup@v2.2.4
-      with:
-        version: 8
+      uses: pnpm/action-setup@v4
 
     - name: Setup Node.js
-      uses: actions/setup-node@v3
+      uses: actions/setup-node@v4
       with:
         node-version-file: ".nvmrc"
         registry-url: "https://registry.npmjs.org"

.github/pull_request_template.md

@@ -11,18 +11,18 @@ Closes # <!-- Github issue # here -->
 
 ## 📝 Description
 
-> Add a brief description
+<!--- Add a brief description -->
 
 ## ⛳️ Current behavior (updates)
 
-> Please describe the current behavior that you are modifying
+<!--- Please describe the current behavior that you are modifying -->
 
 ## 🚀 New behavior
 
-> Please describe the behavior or changes this PR adds
+<!--- Please describe the behavior or changes this PR adds -->
 
 ## 💣 Is this a breaking change (Yes/No):
 
-<!-- If Yes, please describe the impact and migration path for existing NextUI users. -->
+<!-- If Yes, please describe the impact and migration path for existing HeroUI users. -->
 
 ## 📝 Additional Information

.github/workflows/QA.yaml

@@ -3,15 +3,16 @@ name: QA
 on:
   pull_request:
     branches:
-      - main
+      - canary
+      - beta/release-next
 
 jobs:
   build:
-    name: QA - Steps
-    runs-on: ubuntu-latest
+    name: Build
+    runs-on: heroui-runner
     steps:
       - name: Checkout branch
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
 
       - name: Install
         uses: ./.github/common-actions/install
@@ -19,14 +20,71 @@ jobs:
       - name: Build packages
         run: pnpm build
 
+  tests:
+    name: Tests
+    runs-on: heroui-runner
+    steps:
+      - name: Checkout branch
+        uses: actions/checkout@v4
+
+      - name: Install
+        uses: ./.github/common-actions/install
+
       - name: Run tests
-        run: pnpm test  
+        run: pnpm test
+
+  eslint:
+    name: ESLint
+    runs-on: heroui-runner
+    steps:
+      - name: Checkout branch
+        uses: actions/checkout@v4
+
+      - name: Install
+        uses: ./.github/common-actions/install
 
       - name: Run ESLint
         run: pnpm lint
-      
+
+  types:
+    name: TypeScript
+    runs-on: heroui-runner
+    steps:
+      - name: Checkout branch
+        uses: actions/checkout@v4
+
+      - name: Install
+        uses: ./.github/common-actions/install
+
       - name: Run typecheck
         run: pnpm typecheck
 
+  prettier:
+    name: Prettier
+    runs-on: heroui-runner
+    steps:
+      - name: Checkout branch
+        uses: actions/checkout@v4
+
+      - name: Install
+        uses: ./.github/common-actions/install
+
       - name: Run prettier
         run: pnpm format:check
+
+  continuous-release:
+    name: Continuous Release
+    if: github.repository == 'heroui-inc/heroui'
+    runs-on: heroui-runner
+    steps:
+      - name: Checkout branch
+        uses: actions/checkout@v4
+
+      - name: Install
+        uses: ./.github/common-actions/install
+
+      - name: Build packages
+        run: pnpm build
+
+      - name: Release
+        run: pnpx pkg-pr-new publish --compact --pnpm './packages/components/*' './packages/core/*' './packages/hooks/*' './packages/utilities/*'

.github/workflows/enter-pre-release-mode.yaml

@@ -0,0 +1,35 @@
+name: Enter pre-release mode
+
+on: workflow_dispatch
+jobs:
+  enter-pre-release-mode:
+    if: ${{ github.ref == 'refs/heads/beta/release-next' || github.ref == 'refs/heads/canary' }}
+    runs-on: heroui-runner
+    permissions:
+      contents: write
+      pull-requests: write
+      id-token: write
+    steps:
+      - name: Checkout branch
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+
+      - name: Install
+        uses: ./.github/common-actions/install
+
+      - name: Enter pre-release mode
+        id: enter-pre-release-mode
+        env:
+          GITHUB_TOKEN: ${{ secrets.GA_ACCESS_TOKEN }}
+        run: |
+          git config user.email "41898282+github-actions[bot]@users.noreply.github.com"
+          git config user.name "github-actions[bot]"
+          if [ ${{ github.ref }} == 'refs/heads/canary' ]; then
+            pnpm changeset:canary
+          else
+            pnpm changeset:beta
+          fi
+          git add -A
+          git commit -m 'chore(pre-release): enter pre-release mode'
+          git push

.github/workflows/exit-pre-release-mode.yaml

@@ -0,0 +1,39 @@
+name: Exit pre-release mode
+
+on: workflow_dispatch
+jobs:
+  exit-pre-release-mode:
+    if: ${{ github.ref == 'refs/heads/beta/release-next' || github.ref == 'refs/heads/canary' }}
+    name: exit pre-release mode
+    runs-on: heroui-runner
+    permissions:
+      contents: write
+      pull-requests: write
+      id-token: write
+
+    steps:
+      - name: Checkout branch
+        uses: actions/checkout@v4
+        with:
+          ref: ${{ github.event.inputs.branch }}
+          fetch-depth: 0
+
+      - name: Install
+        uses: ./.github/common-actions/install
+
+      - name: remove pre.json
+        # we only remove .changeset/pre.json here 
+        # since we want to keep the changeset files introduced in beta/release-next or canary branch
+        # once we merge it to canary / main, those files will be removed in version PR in canary 
+        # and converted to corresponding changelogs
+        run: npx rimraf .changeset/pre.json
+
+      - name: Commit and push changes
+        env:
+          GITHUB_TOKEN: ${{ secrets.GA_ACCESS_TOKEN }}
+        run: |
+          git config user.email "41898282+github-actions[bot]@users.noreply.github.com"
+          git config user.name "github-actions[bot]"
+          git add -A
+          git commit -m "ci(changesets): exit pre-release mode"
+          git push

.github/workflows/pre-release.yaml

@@ -0,0 +1,81 @@
+name: Pre-release
+
+on:
+  push:
+    paths:
+      - ".changeset/**"
+      - "packages/**"
+    branches:
+      - "beta/release-next"
+
+concurrency: ${{ github.workflow }}-${{ github.ref }}
+
+jobs:
+  prerelease:
+    name: changesets pre-release
+    runs-on: heroui-runner
+    timeout-minutes: 30
+    permissions:
+      contents: write
+      pull-requests: write
+      id-token: write
+    steps:
+      - name: Checkout branch
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+
+      - name: Install
+        uses: ./.github/common-actions/install
+
+      - name: Check if pre.json exists
+        id: check_if_pre_json_exists
+        uses: andstor/file-existence-action@v3.0.0
+        with:
+          files: ".changeset/pre.json"
+
+      - name: Debug condition values
+        run: |
+          echo "pre.json exists: ${{ steps.check_if_pre_json_exists.outputs.files_exists }}"
+          echo "Commit message: ${{ github.event.head_commit.message }}"
+          echo "Contains version packages: ${{ contains(github.event.head_commit.message, 'ci(changesets): version packages') }}"
+          echo "Full condition would be: ${{ steps.check_if_pre_json_exists.outputs.files_exists == 'true' && contains(github.event.head_commit.message, 'ci(changesets): version packages') }}"
+
+      - name: Get pre-release changesets
+        id: get-pre-release-changesets
+        uses: notiz-dev/github-action-json-property@release
+        with:
+          path: ".changeset/pre.json"
+          prop_path: "changesets"
+
+      - name: Create pre-release PR
+        id: create-pre-release-pr
+        if: "${{ steps.check_if_pre_json_exists.outputs.files_exists == 'true' && !startsWith(github.event.head_commit.message, 'ci(changesets): version packages') }}"
+        uses: changesets/action@v1
+        with:
+          version: pnpm run version
+          title: "ci(changesets): :package: version packages"
+          commit: "ci(changesets): version packages"
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Tests
+        if: "${{ steps.check_if_pre_json_exists.outputs.files_exists == 'true' && contains(github.event.head_commit.message, 'ci(changesets): version packages') }}"
+        run: pnpm test
+
+      - name: Build
+        if: "${{ steps.check_if_pre_json_exists.outputs.files_exists == 'true' && contains(github.event.head_commit.message, 'ci(changesets): version packages') }}"
+        run: pnpm build
+        env:
+          NODE_OPTIONS: "--max-old-space-size=4096"
+
+      - name: Publish to NPM
+        id: publish-to-npm
+        if: "${{ steps.check_if_pre_json_exists.outputs.files_exists == 'true' && contains(github.event.head_commit.message, 'ci(changesets): version packages') }}"
+        uses: changesets/action@v1
+        with:
+          publish: pnpm run release
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
+          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/release.yaml

@@ -6,7 +6,7 @@ on:
       - ".changeset/**"
       - "packages/**"
     branches:
-      - main
+      - canary
 
 concurrency:
   group: ${{ github.workflow }}-${{ github.ref }}
@@ -14,25 +14,36 @@ concurrency:
 jobs:
   release:
     name: Release
-    runs-on: ubuntu-latest
+    runs-on: heroui-runner
+    timeout-minutes: 30
     steps:
       - name: Checkout branch
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
 
       - name: Install
         uses: ./.github/common-actions/install
 
-      - name: Build
-        run: pnpm build
-
       - name: Tests
         run: pnpm test
 
+      - name: Build
+        id: build
+        continue-on-error: false
+        # Custom turbo build failure information
+        run: |
+          pnpm build || {
+            echo "Turbo build failed with exit code $?"
+            exit 1
+          }
+
       - name: Create Release Pull Request or Publish to NPM
+        # Run only if the build is successful
+        if: steps.build.outcome == 'success'
         id: changesets
         uses: changesets/action@v1
         with:
           publish: pnpm release
+          title: "ci(changesets): :package: version packages"
           commit: "ci(changesets): version packages"
           setupGitUser: false
         env:
@@ -40,12 +51,13 @@ jobs:
           NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
 
-      - name: Create @dev release
-        if: steps.changesets.outputs.published != 'true'
+      - name: Create canary release
+        if: steps.build.outcome == 'success' && steps.changesets.outputs.published != 'true'
+        timeout-minutes: 15
         run: |
-          git checkout main
-          pnpm version:dev
-          pnpm release:dev
+          git checkout canary
+          pnpm version:canary
+          pnpm release:canary
         env:
           NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/update-stats.yml

@@ -0,0 +1,42 @@
+name: Update Stats
+
+on:
+  schedule:
+    # Runs every Monday at 00:00 UTC
+    - cron: '0 0 * * 1'
+  # Allow manual trigger
+  workflow_dispatch:
+
+jobs:
+  update-stats:
+    name: Update Stats
+    runs-on: heroui-runner
+    steps:
+      - name: Checkout branch
+        uses: actions/checkout@v4
+
+      - name: Install
+        uses: ./.github/common-actions/install
+
+      - name: Update search metadata
+        run: pnpm update:search-meta
+
+      - name: Update GitHub info
+        run: pnpm update:github-info
+
+      - name: Create Pull Request
+        uses: peter-evans/create-pull-request@v5
+        with:
+          commit-message: "chore(stats): update project statistics"
+          title: "chore(stats): 📊 Update project statistics"
+          body: |
+            This PR updates the project statistics including:
+            - Search metadata
+            - GitHub repository information
+            
+            This is an automated PR generated weekly.
+          branch: chore/update-stats
+          base: main
+          delete-branch: true
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.gitignore

@@ -18,7 +18,9 @@ coverage
 # production
 /build
 dist/
+storybook-static
 /packages/storybook/public/tailwind.css
+
 # misc
 .DS_Store
 .env
@@ -54,6 +56,7 @@ packages/**/*.backup.ts
 
 # ignore sitemap
 apps/**/sitemap.xml
+apps/**/sitemap-0.xml
 
 # turbo
 .turbo

.husky/post-merge

@@ -0,0 +1,5 @@
+#!/usr/bin/env sh
+huskyDir=$(dirname -- "$0")
+. "$huskyDir/_/husky.sh"
+
+. "$huskyDir/scripts/update-dep"

.husky/post-rebase

@@ -0,0 +1,5 @@
+#!/usr/bin/env sh
+huskyDir=$(dirname -- "$0")
+. "$huskyDir/_/husky.sh"
+
+. "$huskyDir/scripts/update-dep"

.husky/scripts/update-dep

@@ -0,0 +1,11 @@
+#!/usr/bin/env sh
+changed_files="$(git diff-tree -r --name-only --no-commit-id ORIG_HEAD HEAD)"
+
+check_run() {
+  if (echo "$changed_files" | grep --quiet "$1"); then
+    printf "\033[36mDetected changes in pnpm-lock.yaml, starting dependency update\033[0m\n"
+    eval "$2"
+  fi
+}
+
+check_run pnpm-lock.yaml "pnpm install --color"

.lintstagedrc.cjs

@@ -1,4 +1,6 @@
 const {relative} = require("path");
+const escape = require('shell-quote').quote
+const isWin = process.platform === 'win32'
 
 const {ESLint} = require("eslint");
 
@@ -9,18 +11,24 @@ const removeIgnoredFiles = async (files) => {
   const isIgnored = await Promise.all(relativePaths.map((file) => eslint.isPathIgnored(file)));
   const filteredFiles = files.filter((_, i) => !isIgnored[i]);
 
-  return filteredFiles.join(" ");
+  return filteredFiles;
 };
 
 module.exports = {
-  "**/*.{cjs,mjs,js,ts,jsx,tsx}": async (files) => {
+  "**/*.{js,ts,jsx,tsx}": async (files) => {
     const filesToLint = await removeIgnoredFiles(files);
 
-    return [`eslint -c .eslintrc.json --max-warnings=0 --fix ${filesToLint}`];
+    return filesToLint.map((filename) =>
+      `"${isWin ? filename : escape([filename])}"`
+    ).map((file) => `eslint --max-warnings=0 --fix ${file}`);
   },
-  "**/*.{css,json,md}": async (files) => {
+  "**/*.css": async (files) => {
     const filesToLint = await removeIgnoredFiles(files);
 
-    return [`prettier --config .prettierrc.json --ignore-path --write ${filesToLint}`];
+    return filesToLint.map((filename) =>
+      `"${isWin ? filename : escape([filename])}"`
+    ).map(
+      (file) => `prettier --config .prettierrc.json --ignore-path --write ${file}`
+    );
   },
 };

.npmrc

@@ -3,4 +3,4 @@ enable-pre-post-scripts=true
 public-hoist-pattern[]=*tailwind-variants*
 public-hoist-pattern[]=*framer-motion*
 public-hoist-pattern[]=*@react-aria/interactions*
-public-hoist-pattern[]=*@nextui-org/theme*
+public-hoist-pattern[]=*@heroui/theme*

.nvmrc

@@ -1 +1 @@
-16.x
+v22.14.0

.prettierignore

@@ -2,6 +2,7 @@ dist
 node_modules
 plop
 coverage
+.changeset
 .next
 build
 scripts

.vscode/settings.json

@@ -2,6 +2,16 @@
   "typescript.tsdk": "node_modules/typescript/lib",
   "editor.formatOnSave": false,
   "editor.codeActionsOnSave": {
-    "source.fixAll.eslint": true
-  }
+    "source.fixAll.eslint": "explicit"
+  },
+  "tailwindCSS.experimental.configFile": {
+    "apps/docs/styles/globals.css": "apps/docs/**/*",
+    "packages/storybook/.storybook/style.css": ["packages/core/theme/**/*", "packages/components/**/*"],
+  },
+  "tailwindCSS.experimental.classRegex": [
+    ["([\"'`][^\"'`]*.*?[\"'`])", "[\"'`]([^\"'`]*).*?[\"'`]"]
+  ],
+  "cSpell.words": [
+    "heroui"
+  ],
 }

CONTRIBUTING.md

@@ -1,8 +1,8 @@
-# Next UI Contributing Guide
+# HeroUI Contributing Guide
 
-Hello!, I am very excited that you are interested in contributing with Next UI. However, before submitting your contribution, be sure to take a moment and read the following guidelines.
+Hello!, I am very excited that you are interested in contributing with HeroUI. However, before submitting your contribution, be sure to take a moment and read the following guidelines.
 
-- [Code of Conduct](https://github.com/jrgarciadev/nextui/blob/main/CODE_OF_CONDUCT.md)
+- [Code of Conduct](https://github.com/heroui-inc/heroui/blob/canary/CODE_OF_CONDUCT.md)
 - [Extraction request guidelines](#pull-request-guidelines)
 - [Development Setup](#development-setup)
 - [Tests](#tests)
@@ -14,7 +14,7 @@ Hello!, I am very excited that you are interested in contributing with Next UI.
 ### Tooling
 
 - [PNPM](https://pnpm.io/) to manage packages and dependencies
-- [Tsup](https://tsup.egoist.sh/) to bundle packages
+- [Tsup](https://tsup.egoist.dev/) to bundle packages
 - [Storybook](https://storybook.js.org/) for rapid UI component development and
   testing
 - [Testing Library](https://testing-library.com/) for testing components and
@@ -57,7 +57,7 @@ https://www.conventionalcommits.org/ or check out the
 
 ## Pull Request Guidelines
 
-- The `main` branch is basically a snapshot of the latest stable version. All development must be done in dedicated branches.
+- The `main` branch is basically a snapshot of the latest production version. All development must be done in dedicated branches and will be merged to `canary` branch.
 - Make sure that Github Actions are green
 - It is good to have multiple small commits while working on the PR. We'll let GitHub squash it automatically before the merge.
 - If you add a new feature:
@@ -71,16 +71,16 @@ https://www.conventionalcommits.org/ or check out the
 
 ### Steps to PR
 
-1. Fork of the nextui repository and clone your fork
+1. Fork of the heroui repository and clone your fork
 
-2. Create a new branch out of the `main` branch. We follow the convention
+2. Create a new branch out of the `canary` branch. We follow the convention
    `[type/scope]`. For example `fix/dropdown-hook` or `docs/menu-typo`. `type`
    can be either `docs`, `fix`, `feat`, `build`, or any other conventional
    commit type. `scope` is just a short id that describes the scope of work.
 
 3. Make and commit your changes following the
-   [commit convention](https://github.com/nextui-org/nextui/blob/main/CONTRIBUTING.md#commit-convention).
-   As you develop, you can run `pnpm build --filter=<module>` and
+   [commit convention](https://github.com/heroui-inc/heroui/blob/main/CONTRIBUTING.md#commit-convention).
+   As you canary, you can run `pnpm build --filter=<module>` and
    `pnpm test packages/<module>/<pkg>` e.g. `pnpm build --filter=avatar & pnpm test packages/components/avatar` to make sure everything works as expected.
 
    > To know more about the `--filter` option, please check the turborepo [docs](https://turborepo.org/docs/core-concepts/filtering).
@@ -117,21 +117,22 @@ We use [Turbo Repo](https://turborepo.org/) for the project management.
 2. If you will be working on the components source code, you can use the following command to start the webpack dev server:
 
 ```bash
-## Start the dev babel server of NextUI core components
-pnpm dev:nextui
+## Start the dev babel server of HeroUI core components
+pnpm dev
 
 ## optional
-pnpm dev:docs ## this will start the documentation next.js server and it will automatically detect the changes in the components.
 
-pnpm start:sb ## this will start the storybook server for a faster development and testing.
+pnpm sb ## this will start the storybook server for a faster development and testing.
+
+pnpm dev:docs ## this will start the documentation next.js server and it will automatically detect the changes in the components.
 ```
 
 - If you will be working just on the documentation source code / mdx, you can use the following commands to build
-  NextUI components and then start the next.js dev server:
+  HeroUI components and then start the next.js dev server:
 
 ```bash
-## Build NextUI source components
-pnpm build:nextui
+## Build HeroUI source components
+pnpm build
 
 ## Start the next.js documentation dev server
 pnpm dev:docs
@@ -141,10 +142,6 @@ pnpm dev:docs
 
 ```bash
 pnpm sb
-
-#or
-
-pnpm start:sb
 ```
 
 Remember that these commands must be executed in the root folder of the project.
@@ -166,29 +163,46 @@ git checkout -b fix/something
 All commits that fix bugs or add features need a test.
 You can run the nest command for component specific tests.
 
-```
+```bash
 # Test current code
-pnpm test:update # or npm run test:update
 
+pnpm test
+
+# or
+
+npm run test
+```
+
+```bash
 # Test isolated component code
-pnpm test:update src/button  # or npm run test:update src/button
+
+pnpm test button
+
+# or
+
+npm run test button
 
 ```
 
 5. Be sure the package builds.
 
-```
+```bash
 # Build current code
-pnpm build # or npm run build
+
+pnpm build
+
+# or
+
+npm run build
 ```
 
-> Note: ensure your version of Node is 14 or higher to run scripts
+> Note: ensure that you have at least Node.js 22 as well as pnpm 10 or higher installed on your machine to run the scripts
 
 6. Send your pull request:
 
-- Send your pull request to the `main` branch
+- Send your pull request to the `canary` branch
 - Your pull request will be reviewed by the maintainers and the maintainers will decide if it is accepted or not
-- Once the pull request is accepted, the maintainers will merge it to the `main` branch
+- Once the pull request is accepted, the maintainers will merge it to the `canary` branch
 
 ## Visual Changes
 
@@ -196,13 +210,13 @@ When making a visual change, please provide screenshots
 and/or screencasts of the proposed change. This will help us to understand the
 desired change easier.
 
-Until NextUI has a stable release new components will be created only for the core team.
+Until HeroUI has a stable release new components will be created only for the core team.
 
 ## Documentation
 
 Please update the docs with any API changes, the code and docs should always be in sync.
 
-The main documentation lives in the `apps/docs/content` folder, the project uses MDX and all `NextUI` are already imported.
+The main documentation lives in the `apps/docs/content` folder, the project uses MDX and all `HeroUI` are already imported.
 
 ## Breaking changes
 
@@ -210,7 +224,7 @@ Breaking changes should be accompanied with deprecations of removed functionalit
 
 ## Becoming a maintainer
 
-If you are interested in becoming a NextUI maintainer, start by
+If you are interested in becoming a HeroUI maintainer, start by
 reviewing issues and pull requests. Answer questions for those in need of
 troubleshooting. Join us in the
 [Discord Community](https://discord.gg/9b6yyZKmH4) chat room.
@@ -221,7 +235,7 @@ best to be proactive in reaching out to those that are already helping out.
 GitHub by default does not publicly state that you are a member of the
 organization. Please feel free to change that setting for yourself so others
 will know who's helping out. That can be configured on the [organization
-list](https://github.com/orgs/nextui-org/people) page.
+list](https://github.com/orgs/heroui-inc/people) page.
 
 Being a maintainer is not an obligation. You can help when you have time and be
 less active when you don't. If you get a new job and get busy, that's alright.

LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2020 Next UI
+Copyright (c) 2020 Next UI Inc.
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

apps/docs/.env.example

@@ -8,8 +8,17 @@ NEXT_PUBLIC_ALGOLIA_SEARCH_API_KEY=
 
 # Vercel Env (is used for skipping typescript check)
 IS_VERCEL_ENV=true/false
+IGNORE_BUILD_CHECKS=true/false
 IS_PREVIEW=true/false
 ANALYZE_BUNDLE=true/false
 
 # Vercel preview env (is used for taking the docs directly from the project files)
-NEXT_PUBLIC_PREVIEW=true/false
+NEXT_PUBLIC_PREVIEW=true/false
+
+## Featurebase
+NEXT_PUBLIC_FB_FEEDBACK_ORG=
+NEXT_PUBLIC_FB_FEEDBACK_URL=
+
+# PostHog
+NEXT_PUBLIC_POSTHOG_KEY=your-posthog-key
+NEXT_PUBLIC_POSTHOG_HOST=your-posthog-host

apps/docs/.eslintrc.json

@@ -3,7 +3,7 @@
   "ignorePatterns": ["!**/*"],
   "overrides": [
     {
-      "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
+      "files": ["*.ts", "*.tsx"],
       "parserOptions": {
         "project": ["apps/docs/tsconfig(.*)?.json"],
         "ecmaFeatures": {
@@ -22,10 +22,6 @@
     {
       "files": ["*.ts", "*.tsx"],
       "rules": {}
-    },
-    {
-      "files": ["*.js", "*.jsx"],
-      "rules": {}
     }
   ]
 }

apps/docs/.gitignore

@@ -28,6 +28,7 @@ yarn-error.log*
 # local env files
 .env
 .env*.local
+.dev.vars
 
 # vercel
 .vercel
@@ -35,3 +36,7 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+
+# cloudflare
+.wrangler
+/.open-next/

apps/docs/.sponsorsrc

@@ -202,7 +202,7 @@
     "email": null,
     "twitter": null,
     "github": "https://github.com/HighError",
-    "website": "https://higherror.github.io/"
+    "website": null
   },
   {
     "MemberId": 409558,
@@ -308,5 +308,25 @@
     "twitter": null,
     "github": null,
     "website": "https://encur.me/"
+  },
+  {
+    "MemberId": 571230,
+    "createdAt": "2024-06-01 18:47",
+    "type": "ORGANIZATION",
+    "role": "BACKER",
+    "tier": "Gold Sponsor 🥇",
+    "isActive": true,
+    "totalAmountDonated": 100,
+    "currency": "USD",
+    "lastTransactionAt": "2024-06-01 18:47",
+    "lastTransactionAmount": 100,
+    "profile": "https://opencollective.com/coderabbit",
+    "name": "CodeRabbit",
+    "company": null,
+    "description": "CodeRabbit is an AI-driven context-aware code reviewer that provides line-by-line feedback and smart chat. ",
+    "image": "/sponsors/571230.jpg",
+    "twitter": null,
+    "github": null,
+    "website": "https://coderabbit.ai"
   }
 ]

apps/docs/LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2020 Next UI
+Copyright (c) 2020 Next UI Inc.
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

apps/docs/app/blog/[slug]/page.tsx

@@ -1,16 +1,18 @@
 import type {Metadata} from "next";
+import type {Route} from "@/libs/docs/page";
 
 import {notFound} from "next/navigation";
-import {allBlogPosts} from "contentlayer/generated";
-import {Link, User} from "@nextui-org/react";
+import {allBlogPosts} from "contentlayer2/generated";
+import {Link, Spacer, User} from "@heroui/react";
 import {format, parseISO} from "date-fns";
 import NextLink from "next/link";
 import {Balancer} from "react-wrap-balancer";
 
+import {__DEV__, __PREVIEW__} from "@/utils";
 import {MDXContent} from "@/components/mdx-content";
 import {siteConfig} from "@/config/site";
-import {Route} from "@/libs/docs/page";
 import {ChevronRightLinearIcon} from "@/components/icons";
+import {CarbonAd} from "@/components/ads/carbon-ad";
 
 interface BlogPostProps {
   params: {
@@ -18,6 +20,8 @@ interface BlogPostProps {
   };
 }
 
+const isDraftVisible = __DEV__ || __PREVIEW__;
+
 async function getBlogPostFromParams({params}: BlogPostProps) {
   const slug = params.slug || "";
   const post = allBlogPosts.find((post) => post.slugAsParams === slug);
@@ -78,7 +82,7 @@ export async function generateStaticParams(): Promise<BlogPostProps["params"][]>
 export default async function DocPage({params}: BlogPostProps) {
   const {post} = await getBlogPostFromParams({params});
 
-  if (!post) {
+  if (!post || (post.draft && !isDraftVisible)) {
     notFound();
   }
 
@@ -96,6 +100,11 @@ export default async function DocPage({params}: BlogPostProps) {
           <ChevronRightLinearIcon className="rotate-180 inline-block mr-1" size={15} />
           Back to blog
         </Link>
+
+        <CarbonAd />
+
+        <Spacer y={4} />
+
         <time className="block text-small mb-2 text-default-500" dateTime={post.date}>
           {format(parseISO(post.date), "LLLL d, yyyy")}
         </time>
@@ -119,6 +128,7 @@ export default async function DocPage({params}: BlogPostProps) {
         </div>
         <h1 className="mb-2 font-bold text-4xl">
           <Balancer>{post.title}</Balancer>
+          <strong className="text-default-300">{post?.draft && " (Draft)"}</strong>
         </h1>
         <MDXContent code={post.body.code} />
       </div>

apps/docs/app/blog/layout.tsx

@@ -1,4 +1,6 @@
-import {Image} from "@nextui-org/react";
+import {Image} from "@heroui/react";
+
+import {ScriptProviders} from "@/components/scripts/script-providers";
 
 interface DocsLayoutProps {
   children: React.ReactNode;
@@ -7,21 +9,31 @@ interface DocsLayoutProps {
 export default function DocsLayout({children}: DocsLayoutProps) {
   return (
     <>
-      <main className="relative container mx-auto max-w-7xl z-10 px-6 min-h-[calc(100vh_-_64px_-_108px)] mb-12 flex-grow">
+      <main className="relative container mx-auto max-w-7xl z-10 px-6 min-h-[calc(100vh_-_64px_-_108px)] mb-12 grow">
         {children}
       </main>
       <div
         aria-hidden="true"
         className="fixed hidden dark:md:block dark:opacity-70 -bottom-[40%] -left-[20%] z-0"
       >
-        <Image removeWrapper alt="docs left background" src="/gradients/docs-left.png" />
+        <Image
+          removeWrapper
+          alt="docs left background"
+          src="https://heroui-assets.nyc3.cdn.digitaloceanspaces.com/images/docs-left.png"
+        />
       </div>
       <div
         aria-hidden="true"
         className="fixed hidden dark:md:block dark:opacity-70 -top-[80%] -right-[60%] 2xl:-top-[60%] 2xl:-right-[45%] z-0 rotate-12"
       >
-        <Image removeWrapper alt="docs right background" src="/gradients/docs-right.png" />
+        <Image
+          removeWrapper
+          alt="docs right background"
+          src="https://heroui-assets.nyc3.cdn.digitaloceanspaces.com/images/docs-right.png"
+        />
       </div>
+
+      <ScriptProviders />
     </>
   );
 }

apps/docs/app/blog/page.tsx

@@ -1,16 +1,27 @@
-import {allBlogPosts} from "contentlayer/generated";
+import {allBlogPosts} from "contentlayer2/generated";
 import {compareDesc} from "date-fns";
 
 import {BlogPostList} from "@/components/blog-post";
+import {__DEV__, __PREVIEW__} from "@/utils";
+
+const isDraftVisible = __DEV__ || __PREVIEW__;
 
 export default function Blog() {
-  const posts = allBlogPosts.sort((a, b) => compareDesc(new Date(a.date), new Date(b.date)));
+  const posts = allBlogPosts
+    .sort((a, b) => compareDesc(new Date(a.date), new Date(b.date)))
+    ?.filter((post) => {
+      if (post.draft && !isDraftVisible) {
+        return false;
+      }
+
+      return true;
+    });
 
   return (
     <div className="w-full lg:px-16 mt-12">
       <div className="text-center">
-        <h1 className="mb-2 font-bold text-4xl">NextUI Latest Updates</h1>
-        <h5 className="text-default-500 text-lg">All the latest news about NextUI.</h5>
+        <h1 className="mb-2 font-bold text-4xl">HeroUI Latest Updates</h1>
+        <h5 className="text-default-500 text-lg">All the latest news about HeroUI.</h5>
       </div>
       <BlogPostList posts={posts} />
     </div>

apps/docs/app/docs/[[...slug]]/page.tsx

@@ -1,26 +1,25 @@
 import type {Metadata} from "next";
+import type {Route} from "@/libs/docs/page";
 
 import {notFound} from "next/navigation";
-import {allDocs} from "contentlayer/generated";
-import {Link} from "@nextui-org/react";
+import {allDocs} from "contentlayer2/generated";
+import {Link, ToastProvider} from "@heroui/react";
 
 import {MDXContent} from "@/components/mdx-content";
 import {siteConfig} from "@/config/site";
 import {DocsPager, DocsToc} from "@/components/docs";
-import {Route} from "@/libs/docs/page";
 import {GITHUB_URL, REPO_NAME} from "@/libs/github/constants";
 import {CONTENT_PATH, TAG} from "@/libs/docs/config";
 import {getHeadings} from "@/libs/docs/utils";
 
 interface DocPageProps {
-  params: {
-    slug: string[];
-  };
+  params: Promise<{slug: string[]}>;
 }
 
 async function getDocFromParams({params}: DocPageProps) {
-  const slug = params.slug?.join("/") || "";
-  const doc = allDocs.find((doc) => doc.slugAsParams === slug);
+  const {slug} = await params;
+  const paramsSlug = slug?.join("/") || "";
+  const doc = allDocs.find((doc) => doc.slugAsParams === paramsSlug);
 
   if (!doc) {
     null;
@@ -72,9 +71,11 @@ export async function generateMetadata({params}: DocPageProps): Promise<Metadata
 }
 
 export async function generateStaticParams(): Promise<DocPageProps["params"][]> {
-  return allDocs.map((doc) => ({
-    slug: doc.slugAsParams.split("/"),
-  }));
+  return allDocs.map((doc) =>
+    Promise.resolve({
+      slug: doc.slugAsParams.split("/"),
+    }),
+  );
 }
 
 export default async function DocPage({params}: DocPageProps) {
@@ -83,7 +84,8 @@ export default async function DocPage({params}: DocPageProps) {
   if (!doc) {
     notFound();
   }
-  const editUrl = `${GITHUB_URL}/${REPO_NAME}/edit/${TAG}/${CONTENT_PATH}${currentRoute?.path}`;
+
+  const editUrl = `${GITHUB_URL}/${REPO_NAME}/edit/${TAG}${CONTENT_PATH}${currentRoute?.path}`;
 
   return (
     <>
@@ -99,10 +101,12 @@ export default async function DocPage({params}: DocPageProps) {
         </footer>
       </div>
       {headings && headings.length > 0 && (
-        <div className="hidden z-10 xl:flex xl:col-span-2 mt-8 pl-4">
+        <div className="hidden z-10 xl:flex xl:col-span-2 mt-8 pl-0">
           <DocsToc headings={headings} />
         </div>
       )}
+      {/* toast page has its own provider*/}
+      {doc.title !== "Toast" && <ToastProvider />}
     </>
   );
 }

apps/docs/app/docs/layout.tsx

@@ -1,7 +1,8 @@
-import {Image} from "@nextui-org/react";
+import {Image} from "@heroui/react";
 
 import manifest from "@/config/routes.json";
 import {DocsSidebar} from "@/components/docs/sidebar";
+import {ScriptProviders} from "@/components/scripts/script-providers";
 
 interface DocsLayoutProps {
   children: React.ReactNode;
@@ -10,9 +11,9 @@ interface DocsLayoutProps {
 export default function DocsLayout({children}: DocsLayoutProps) {
   return (
     <>
-      <main className="relative container mx-auto max-w-7xl z-10 px-6 min-h-[calc(100vh_-_64px_-_108px)] mb-12 flex-grow">
+      <main className="relative container mx-auto max-w-8xl z-10 px-6 min-h-[calc(100vh_-_64px_-_108px)] mb-12 grow">
         <div className="grid grid-cols-12">
-          <div className="hidden relative z-10 lg:block lg:col-span-2 mt-8 pr-4">
+          <div className="hidden overflow-visible relative z-10 lg:block lg:col-span-2 mt-8 pr-4">
             <DocsSidebar routes={manifest.routes} />
           </div>
           {children}
@@ -20,16 +21,26 @@ export default function DocsLayout({children}: DocsLayoutProps) {
       </main>
       <div
         aria-hidden="true"
-        className="fixed hidden dark:md:block dark:opacity-70 -bottom-[40%] -left-[20%] z-0"
+        className="fixed hidden dark:md:block dark:opacity-100 -bottom-[30%] -left-[30%] z-0"
       >
-        <Image removeWrapper alt="docs left background" src="/gradients/docs-left.png" />
+        <Image
+          removeWrapper
+          alt="docs left background"
+          src="https://heroui-assets.nyc3.cdn.digitaloceanspaces.com/images/docs-left.png"
+        />
       </div>
       <div
         aria-hidden="true"
-        className="fixed hidden dark:md:block dark:opacity-70 -top-[80%] -right-[60%] 2xl:-top-[60%] 2xl:-right-[45%] z-0 rotate-12"
+        className="fixed hidden dark:md:block dark:opacity-70 -top-[50%] -right-[60%] 2xl:-top-[60%] 2xl:-right-[45%] z-0 rotate-12"
       >
-        <Image removeWrapper alt="docs right background" src="/gradients/docs-right.png" />
+        <Image
+          removeWrapper
+          alt="docs right background"
+          src="https://heroui-assets.nyc3.cdn.digitaloceanspaces.com/images/docs-right.png"
+        />
       </div>
+
+      <ScriptProviders />
     </>
   );
 }

apps/docs/app/examples/autocomplete/async-filtering/page.tsx

@@ -0,0 +1,46 @@
+"use client";
+
+import * as React from "react";
+import {Autocomplete, AutocompleteItem} from "@heroui/react";
+import {useAsyncList} from "@react-stately/data";
+
+type SWCharacter = {
+  name: string;
+  height: string;
+  mass: string;
+  birth_year: string;
+};
+
+export default function Page() {
+  let list = useAsyncList<SWCharacter>({
+    async load({signal, filterText}) {
+      let res = await fetch(`https://swapi.py4e.com/api/people/?search=${filterText}`, {signal});
+      let json = await res.json();
+
+      return {
+        items: json.results,
+      };
+    },
+  });
+
+  return (
+    <div className="p-6">
+      <Autocomplete
+        className="max-w-xs"
+        inputValue={list.filterText}
+        isLoading={list.isLoading}
+        items={list.items}
+        label="Select a character"
+        placeholder="Type to search..."
+        variant="bordered"
+        onInputChange={list.setFilterText}
+      >
+        {(item) => (
+          <AutocompleteItem key={item.name} className="capitalize">
+            {item.name}
+          </AutocompleteItem>
+        )}
+      </Autocomplete>
+    </div>
+  );
+}

apps/docs/app/examples/autocomplete/async-items-loading/page.tsx

@@ -0,0 +1,113 @@
+/* eslint-disable no-console */
+"use client";
+
+import * as React from "react";
+import {Autocomplete, AutocompleteItem} from "@heroui/react";
+import {useInfiniteScroll} from "@heroui/use-infinite-scroll";
+
+type Pokemon = {
+  name: string;
+  url: string;
+};
+
+type UsePokemonListProps = {
+  /** Delay to wait before fetching more items */
+  fetchDelay?: number;
+};
+
+function usePokemonList({fetchDelay = 0}: UsePokemonListProps = {}) {
+  const [items, setItems] = React.useState<Pokemon[]>([]);
+  const [hasMore, setHasMore] = React.useState(true);
+  const [isLoading, setIsLoading] = React.useState(false);
+  const [offset, setOffset] = React.useState(0);
+  const limit = 10; // Number of items per page, adjust as necessary
+
+  const loadPokemon = async (currentOffset: number) => {
+    const controller = new AbortController();
+    const {signal} = controller;
+
+    try {
+      setIsLoading(true);
+
+      if (offset > 0) {
+        // Delay to simulate network latency
+        await new Promise((resolve) => setTimeout(resolve, fetchDelay));
+      }
+
+      let res = await fetch(
+        `https://pokeapi.co/api/v2/pokemon?offset=${currentOffset}&limit=${limit}`,
+        {signal},
+      );
+
+      if (!res.ok) {
+        throw new Error("Network response was not ok");
+      }
+
+      let json = await res.json();
+
+      setHasMore(json.next !== null);
+      // Append new results to existing ones
+      setItems((prevItems) => [...prevItems, ...json.results]);
+    } catch (error) {
+      // @ts-ignore
+      if (error.name === "AbortError") {
+        console.log("Fetch aborted");
+      } else {
+        console.error("There was an error with the fetch operation:", error);
+      }
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  React.useEffect(() => {
+    loadPokemon(offset);
+  }, []);
+
+  const onLoadMore = () => {
+    const newOffset = offset + limit;
+
+    setOffset(newOffset);
+    loadPokemon(newOffset);
+  };
+
+  return {
+    items,
+    hasMore,
+    isLoading,
+    onLoadMore,
+  };
+}
+
+export default function Page() {
+  const [isOpen, setIsOpen] = React.useState(false);
+  const {items, hasMore, isLoading, onLoadMore} = usePokemonList({fetchDelay: 1500});
+
+  const [, scrollerRef] = useInfiniteScroll({
+    hasMore,
+    isEnabled: isOpen,
+    shouldUseLoader: false, // We don't want to show the loader at the bottom of the list
+    onLoadMore,
+  });
+
+  return (
+    <div className="p-6">
+      <Autocomplete
+        className="max-w-xs"
+        defaultItems={items}
+        isLoading={isLoading}
+        label="Pick a Pokemon"
+        placeholder="Select a Pokemon"
+        scrollRef={scrollerRef}
+        variant="bordered"
+        onOpenChange={setIsOpen}
+      >
+        {(item) => (
+          <AutocompleteItem key={item.name} className="capitalize">
+            {item.name}
+          </AutocompleteItem>
+        )}
+      </Autocomplete>
+    </div>
+  );
+}

apps/docs/app/examples/autocomplete/fully-controlled/page.tsx

@@ -0,0 +1,109 @@
+"use client";
+
+import type {MenuTriggerAction} from "@heroui/react";
+
+import * as React from "react";
+import {Autocomplete, AutocompleteItem} from "@heroui/react";
+import {useFilter} from "@react-aria/i18n";
+
+const animals = [
+  {label: "Cat", value: "cat", description: "The second most popular pet in the world"},
+  {label: "Dog", value: "dog", description: "The most popular pet in the world"},
+  {label: "Elephant", value: "elephant", description: "The largest land animal"},
+  {label: "Lion", value: "lion", description: "The king of the jungle"},
+  {label: "Tiger", value: "tiger", description: "The largest cat species"},
+  {label: "Giraffe", value: "giraffe", description: "The tallest land animal"},
+  {
+    label: "Dolphin",
+    value: "dolphin",
+    description: "A widely distributed and diverse group of aquatic mammals",
+  },
+  {label: "Penguin", value: "penguin", description: "A group of aquatic flightless birds"},
+  {label: "Zebra", value: "zebra", description: "A several species of African equids"},
+  {
+    label: "Shark",
+    value: "shark",
+    description: "A group of elasmobranch fish characterized by a cartilaginous skeleton",
+  },
+  {
+    label: "Whale",
+    value: "whale",
+    description: "Diverse group of fully aquatic placental marine mammals",
+  },
+  {label: "Otter", value: "otter", description: "A carnivorous mammal in the subfamily Lutrinae"},
+  {label: "Crocodile", value: "crocodile", description: "A large semiaquatic reptile"},
+];
+
+type FieldState = {
+  selectedKey: React.Key | null;
+  inputValue: string;
+  items: typeof animals;
+};
+
+export default function Page() {
+  // Store ComboBox input value, selected option, open state, and items
+  // in a state tracker
+  const [fieldState, setFieldState] = React.useState<FieldState>({
+    selectedKey: "",
+    inputValue: "",
+    items: animals,
+  });
+
+  // Implement custom filtering logic and control what items are
+  // available to the Autocomplete.
+  const {startsWith} = useFilter({sensitivity: "base"});
+
+  // Specify how each of the Autocomplete values should change when an
+  // option is selected from the list box
+  const onSelectionChange = (key: React.Key | null) => {
+    setFieldState((prevState) => {
+      let selectedItem = prevState.items.find((option) => option.value === key);
+
+      return {
+        inputValue: selectedItem?.label || "",
+        selectedKey: key,
+        items: animals.filter((item) => startsWith(item.label, selectedItem?.label || "")),
+      };
+    });
+  };
+
+  // Specify how each of the Autocomplete values should change when the input
+  // field is altered by the user
+  const onInputChange = (value: string) => {
+    setFieldState((prevState) => ({
+      inputValue: value,
+      selectedKey: value === "" ? null : prevState.selectedKey,
+      items: animals.filter((item) => startsWith(item.label, value)),
+    }));
+  };
+
+  // Show entire list if user opens the menu manually
+  const onOpenChange = (isOpen: boolean, menuTrigger: MenuTriggerAction) => {
+    if (menuTrigger === "manual" && isOpen) {
+      setFieldState((prevState) => ({
+        inputValue: prevState.inputValue,
+        selectedKey: prevState.selectedKey,
+        items: animals,
+      }));
+    }
+  };
+
+  return (
+    <div className="p-6">
+      <Autocomplete
+        className="max-w-xs"
+        inputValue={fieldState.inputValue}
+        items={fieldState.items}
+        label="Favorite Animal"
+        placeholder="Select an animal"
+        selectedKey={fieldState.selectedKey}
+        variant="bordered"
+        onInputChange={onInputChange}
+        onOpenChange={onOpenChange}
+        onSelectionChange={onSelectionChange}
+      >
+        {(item) => <AutocompleteItem key={item.value}>{item.label}</AutocompleteItem>}
+      </Autocomplete>
+    </div>
+  );
+}

apps/docs/app/examples/demo/page.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import {Card, CardBody, CircularProgress} from "@nextui-org/react";
+import {Card, CardBody, CircularProgress} from "@heroui/react";
 
 export default function ButtonDemo() {
   return (

apps/docs/app/examples/modal/placement/page.tsx

@@ -1,5 +1,7 @@
 "use client";
 
+import type {ModalProps} from "@heroui/react";
+
 import {
   Modal,
   ModalContent,
@@ -10,8 +12,7 @@ import {
   useDisclosure,
   RadioGroup,
   Radio,
-  ModalProps,
-} from "@nextui-org/react";
+} from "@heroui/react";
 import {useState} from "react";
 
 export default function Page() {
@@ -58,7 +59,7 @@ export default function Page() {
                 </p>
               </ModalBody>
               <ModalFooter>
-                <Button color="danger" variant="light" onClick={onClose}>
+                <Button color="danger" variant="light" onPress={onClose}>
                   Close
                 </Button>
                 <Button color="primary" onPress={onClose}>

apps/docs/app/examples/navbar/bordered/page.tsx

@@ -1,16 +1,6 @@
 "use client";
 
-import {
-  Navbar,
-  NavbarBrand,
-  NavbarContent,
-  NavbarItem,
-  Link as NextUiLink,
-  LinkProps,
-  Button,
-} from "@nextui-org/react";
-
-const Link = (props: LinkProps) => <NextUiLink {...props} onClick={(e) => e.preventDefault()} />;
+import {Navbar, NavbarBrand, NavbarContent, NavbarItem, Link, Button} from "@heroui/react";
 
 const AcmeLogo = () => (
   <svg fill="none" height="36" viewBox="0 0 32 32" width="36">

apps/docs/app/examples/navbar/controlled-menu/page.tsx

@@ -9,13 +9,10 @@ import {
   NavbarMenuItem,
   NavbarMenuToggle,
   Button,
-  Link as NextUiLink,
-  LinkProps,
-} from "@nextui-org/react";
+  Link,
+} from "@heroui/react";
 import React from "react";
 
-const Link = (props: LinkProps) => <NextUiLink {...props} onClick={(e) => e.preventDefault()} />;
-
 const AcmeLogo = () => (
   <svg fill="none" height="36" viewBox="0 0 32 32" width="36">
     <path
@@ -44,12 +41,12 @@ export default function Page() {
   ];
 
   return (
-    <Navbar isBordered onMenuOpenChange={setIsMenuOpen}>
-      <NavbarContent className="sm:hidden" justify="start">
-        <NavbarMenuToggle aria-label={isMenuOpen ? "Close menu" : "Open menu"} />
-      </NavbarContent>
-
-      <NavbarContent className="sm:hidden pr-3" justify="center">
+    <Navbar onMenuOpenChange={setIsMenuOpen}>
+      <NavbarContent>
+        <NavbarMenuToggle
+          aria-label={isMenuOpen ? "Close menu" : "Open menu"}
+          className="sm:hidden"
+        />
         <NavbarBrand>
           <AcmeLogo />
           <p className="font-bold text-inherit">ACME</p>
@@ -57,17 +54,13 @@ export default function Page() {
       </NavbarContent>
 
       <NavbarContent className="hidden sm:flex gap-4" justify="center">
-        <NavbarBrand>
-          <AcmeLogo />
-          <p className="font-bold text-inherit">ACME</p>
-        </NavbarBrand>
         <NavbarItem>
           <Link color="foreground" href="#">
             Features
           </Link>
         </NavbarItem>
         <NavbarItem isActive>
-          <Link aria-current="page" color="warning" href="#">
+          <Link aria-current="page" href="#">
             Customers
           </Link>
         </NavbarItem>
@@ -77,25 +70,23 @@ export default function Page() {
           </Link>
         </NavbarItem>
       </NavbarContent>
-
       <NavbarContent justify="end">
         <NavbarItem className="hidden lg:flex">
           <Link href="#">Login</Link>
         </NavbarItem>
         <NavbarItem>
-          <Button as={Link} color="warning" href="#" variant="flat">
+          <Button as={Link} color="primary" href="#" variant="flat">
             Sign Up
           </Button>
         </NavbarItem>
       </NavbarContent>
-
       <NavbarMenu>
         {menuItems.map((item, index) => (
           <NavbarMenuItem key={`${item}-${index}`}>
             <Link
               className="w-full"
               color={
-                index === 2 ? "warning" : index === menuItems.length - 1 ? "danger" : "foreground"
+                index === 2 ? "primary" : index === menuItems.length - 1 ? "danger" : "foreground"
               }
               href="#"
               size="lg"

apps/docs/app/examples/navbar/custom-active-item/page.tsx

@@ -1,16 +1,6 @@
 "use client";
 
-import {
-  Navbar,
-  NavbarBrand,
-  NavbarContent,
-  NavbarItem,
-  Link as NextUiLink,
-  LinkProps,
-  Button,
-} from "@nextui-org/react";
-
-const Link = (props: LinkProps) => <NextUiLink {...props} onClick={(e) => e.preventDefault()} />;
+import {Navbar, NavbarBrand, NavbarContent, NavbarItem, Link, Button} from "@heroui/react";
 
 const AcmeLogo = () => (
   <svg fill="none" height="36" viewBox="0 0 32 32" width="36">

apps/docs/app/examples/navbar/disable-menu-animation/page.tsx

@@ -6,16 +6,13 @@ import {
   NavbarContent,
   NavbarItem,
   Button,
-  Link as NextUiLink,
-  LinkProps,
+  Link,
   NavbarMenu,
   NavbarMenuItem,
   NavbarMenuToggle,
-} from "@nextui-org/react";
+} from "@heroui/react";
 import React from "react";
 
-const Link = (props: LinkProps) => <NextUiLink {...props} onClick={(e) => e.preventDefault()} />;
-
 const AcmeLogo = () => (
   <svg fill="none" height="36" viewBox="0 0 32 32" width="36">
     <path
@@ -28,6 +25,8 @@ const AcmeLogo = () => (
 );
 
 export default function Page() {
+  const [isMenuOpen, setIsMenuOpen] = React.useState<boolean | undefined>(false);
+
   const menuItems = [
     "Profile",
     "Dashboard",
@@ -42,12 +41,12 @@ export default function Page() {
   ];
 
   return (
-    <Navbar disableAnimation isBordered>
-      <NavbarContent className="sm:hidden" justify="start">
-        <NavbarMenuToggle />
-      </NavbarContent>
-
-      <NavbarContent className="sm:hidden pr-3" justify="center">
+    <Navbar disableAnimation onMenuOpenChange={setIsMenuOpen}>
+      <NavbarContent>
+        <NavbarMenuToggle
+          aria-label={isMenuOpen ? "Close menu" : "Open menu"}
+          className="sm:hidden"
+        />
         <NavbarBrand>
           <AcmeLogo />
           <p className="font-bold text-inherit">ACME</p>
@@ -55,17 +54,13 @@ export default function Page() {
       </NavbarContent>
 
       <NavbarContent className="hidden sm:flex gap-4" justify="center">
-        <NavbarBrand>
-          <AcmeLogo />
-          <p className="font-bold text-inherit">ACME</p>
-        </NavbarBrand>
         <NavbarItem>
           <Link color="foreground" href="#">
             Features
           </Link>
         </NavbarItem>
         <NavbarItem isActive>
-          <Link aria-current="page" color="warning" href="#">
+          <Link aria-current="page" href="#">
             Customers
           </Link>
         </NavbarItem>
@@ -75,25 +70,23 @@ export default function Page() {
           </Link>
         </NavbarItem>
       </NavbarContent>
-
       <NavbarContent justify="end">
         <NavbarItem className="hidden lg:flex">
           <Link href="#">Login</Link>
         </NavbarItem>
         <NavbarItem>
-          <Button as={Link} color="warning" href="#" variant="flat">
+          <Button as={Link} color="primary" href="#" variant="flat">
             Sign Up
           </Button>
         </NavbarItem>
       </NavbarContent>
-
       <NavbarMenu>
         {menuItems.map((item, index) => (
           <NavbarMenuItem key={`${item}-${index}`}>
             <Link
               className="w-full"
               color={
-                index === 2 ? "warning" : index === menuItems.length - 1 ? "danger" : "foreground"
+                index === 2 ? "primary" : index === menuItems.length - 1 ? "danger" : "foreground"
               }
               href="#"
               size="lg"

apps/docs/app/examples/navbar/disabled-blur/page.tsx

@@ -1,16 +1,6 @@
 "use client";
 
-import {
-  Navbar,
-  NavbarBrand,
-  NavbarContent,
-  NavbarItem,
-  Link as NextUiLink,
-  LinkProps,
-  Button,
-} from "@nextui-org/react";
-
-const Link = (props: LinkProps) => <NextUiLink {...props} onClick={(e) => e.preventDefault()} />;
+import {Navbar, NavbarBrand, NavbarContent, NavbarItem, Link, Button} from "@heroui/react";
 
 const AcmeLogo = () => (
   <svg fill="none" height="36" viewBox="0 0 32 32" width="36">

apps/docs/app/examples/navbar/hide-on-scroll/page.tsx

@@ -1,16 +1,6 @@
 "use client";
 
-import {
-  Navbar,
-  NavbarBrand,
-  NavbarContent,
-  NavbarItem,
-  Link as NextUiLink,
-  LinkProps,
-  Button,
-} from "@nextui-org/react";
-
-const Link = (props: LinkProps) => <NextUiLink {...props} onClick={(e) => e.preventDefault()} />;
+import {Navbar, NavbarBrand, NavbarContent, NavbarItem, Link, Button} from "@heroui/react";
 
 const AcmeLogo = () => (
   <svg fill="none" height="36" viewBox="0 0 32 32" width="36">

apps/docs/app/examples/navbar/layout.tsx

@@ -1,5 +1,5 @@
 const Content = () => (
-  <div className="px-6 flex gap-4 flex-col pb-16 flex-grow">
+  <div className="px-6 flex gap-4 flex-col pb-16 grow">
     <h1 className="mt-4 font-bold text-4xl">Lorem ipsum dolor sit amet</h1>
     <p>
       Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut

apps/docs/app/examples/navbar/static/page.tsx

@@ -1,16 +1,6 @@
 "use client";
 
-import {
-  Navbar,
-  NavbarBrand,
-  NavbarContent,
-  NavbarItem,
-  Link as NextUiLink,
-  LinkProps,
-  Button,
-} from "@nextui-org/react";
-
-const Link = (props: LinkProps) => <NextUiLink {...props} onClick={(e) => e.preventDefault()} />;
+import {Navbar, NavbarBrand, NavbarContent, NavbarItem, Link, Button} from "@heroui/react";
 
 const AcmeLogo = () => (
   <svg fill="none" height="36" viewBox="0 0 32 32" width="36">

apps/docs/app/examples/navbar/usage/page.tsx

@@ -1,16 +1,6 @@
 "use client";
 
-import {
-  Navbar,
-  NavbarBrand,
-  NavbarContent,
-  NavbarItem,
-  Link as NextUiLink,
-  LinkProps,
-  Button,
-} from "@nextui-org/react";
-
-const Link = (props: LinkProps) => <NextUiLink {...props} onClick={(e) => e.preventDefault()} />;
+import {Navbar, NavbarBrand, NavbarContent, NavbarItem, Link, Button} from "@heroui/react";
 
 const AcmeLogo = () => (
   <svg fill="none" height="36" viewBox="0 0 32 32" width="36">

apps/docs/app/examples/navbar/with-avatar/page.tsx

@@ -5,16 +5,13 @@ import {
   NavbarBrand,
   NavbarContent,
   NavbarItem,
-  Link as NextUiLink,
-  LinkProps,
+  Link,
   DropdownItem,
   DropdownTrigger,
   Dropdown,
   DropdownMenu,
   Avatar,
-} from "@nextui-org/react";
-
-const Link = (props: LinkProps) => <NextUiLink {...props} onClick={(e) => e.preventDefault()} />;
+} from "@heroui/react";
 
 const AcmeLogo = () => (
   <svg fill="none" height="36" viewBox="0 0 32 32" width="36">

apps/docs/app/examples/navbar/with-dropdown-menu/page.tsx

@@ -5,17 +5,14 @@ import {
   NavbarBrand,
   NavbarContent,
   NavbarItem,
-  Link as NextUiLink,
-  LinkProps,
+  Link,
   Button,
   DropdownItem,
   DropdownTrigger,
   Dropdown,
   DropdownMenu,
-} from "@nextui-org/react";
-import {ChevronDown, Lock, Activity, Flash, Server, TagUser, Scale} from "@nextui-org/shared-icons";
-
-const Link = (props: LinkProps) => <NextUiLink {...props} onClick={(e) => e.preventDefault()} />;
+} from "@heroui/react";
+import {ChevronDown, Lock, Activity, Flash, Server, TagUser, Scale} from "@heroui/shared-icons";
 
 const AcmeLogo = () => (
   <svg fill="none" height="36" viewBox="0 0 32 32" width="36">
@@ -62,42 +59,41 @@ export default function Page() {
           </NavbarItem>
           <DropdownMenu
             aria-label="ACME features"
-            className="w-[340px]"
             itemClasses={{
               base: "gap-4",
             }}
           >
             <DropdownItem
               key="autoscaling"
-              description="ACME scales apps to meet user demand, automagically, based on load."
+              description="ACME scales apps based on demand and load"
               startContent={icons.scale}
             >
               Autoscaling
             </DropdownItem>
             <DropdownItem
               key="usage_metrics"
-              description="Real-time metrics to debug issues. Slow query added? We’ll show you exactly where."
+              description="Real-time metrics to debug issues"
               startContent={icons.activity}
             >
               Usage Metrics
             </DropdownItem>
             <DropdownItem
               key="production_ready"
-              description="ACME runs on ACME, join us and others serving requests at web scale."
+              description="ACME runs on ACME, join us at web scale"
               startContent={icons.flash}
             >
               Production Ready
             </DropdownItem>
             <DropdownItem
               key="99_uptime"
-              description="Applications stay on the grid with high availability and high uptime guarantees."
+              description="High availability and uptime guarantees"
               startContent={icons.server}
             >
               +99% Uptime
             </DropdownItem>
             <DropdownItem
               key="supreme_support"
-              description="Overcome any challenge with a supporting team ready to respond."
+              description="Support team ready to respond"
               startContent={icons.user}
             >
               +Supreme Support

apps/docs/app/examples/navbar/with-menu/page.tsx

@@ -5,17 +5,14 @@ import {
   NavbarBrand,
   NavbarContent,
   NavbarItem,
-  Link as NextUiLink,
-  LinkProps,
+  Link,
   Button,
   NavbarMenuToggle,
   NavbarMenu,
   NavbarMenuItem,
-} from "@nextui-org/react";
+} from "@heroui/react";
 import React from "react";
 
-const Link = (props: LinkProps) => <NextUiLink {...props} onClick={(e) => e.preventDefault()} />;
-
 const AcmeLogo = () => (
   <svg fill="none" height="36" viewBox="0 0 32 32" width="36">
     <path

apps/docs/app/examples/navbar/with-search-input/page.tsx

@@ -5,17 +5,14 @@ import {
   NavbarBrand,
   NavbarContent,
   NavbarItem,
-  Link as NextUiLink,
-  LinkProps,
+  Link,
   Input,
   DropdownItem,
   DropdownTrigger,
   Dropdown,
   DropdownMenu,
   Avatar,
-} from "@nextui-org/react";
-
-const Link = (props: LinkProps) => <NextUiLink {...props} onClick={(e) => e.preventDefault()} />;
+} from "@heroui/react";
 
 import {SearchLinearIcon} from "@/components/icons";
 
@@ -61,7 +58,8 @@ export default function Page() {
           classNames={{
             base: "max-w-full sm:max-w-[10rem] h-10",
             input: "text-small",
-            inputWrapper: "font-normal text-default-500 bg-default-400/20 dark:bg-default-500/20",
+            inputWrapper:
+              "h-full font-normal text-default-500 bg-default-400/20 dark:bg-default-500/20",
           }}
           placeholder="Type to search..."
           startContent={<SearchLinearIcon size={18} />}

apps/docs/app/examples/perf/client-page.tsx

@@ -0,0 +1,561 @@
+"use client";
+
+import {
+  RadioGroup,
+  Radio,
+  Button,
+  Accordion,
+  Tabs,
+  Textarea,
+  Input,
+  Tab,
+  Avatar,
+  Select,
+  SelectItem,
+  AccordionItem,
+  Pagination,
+  extendVariants,
+  PaginationItem,
+} from "@heroui/react";
+import {useFilter} from "@react-aria/i18n";
+import {useEffect, useMemo, useRef, useState} from "react";
+import {useSearchParams} from "next/navigation";
+
+import {SearchLinearIcon} from "@/components/icons";
+
+const MyRadioGroup = () => {
+  const [radio, setRadio] = useState("1");
+
+  return (
+    <RadioGroup value={radio} onValueChange={setRadio}>
+      <Radio value="1">Radio 1</Radio>
+      <Radio value="2">Radio 2</Radio>
+      <Radio value="3">Radio 3</Radio>
+      <Radio value="4">Radio 4</Radio>
+      <Radio value="5">Radio 5</Radio>
+      <Radio value="6">Radio 6</Radio>
+      <Radio value="7">Radio 7</Radio>
+      <Radio value="8">Radio 8</Radio>
+      <Radio value="9">Radio 9</Radio>
+      <Radio value="10">Radio 10</Radio>
+      <Radio value="11">Radio 11</Radio>
+      <Radio value="12">Radio 12</Radio>
+      <Radio value="13">Radio 13</Radio>
+      <Radio value="14">Radio 14</Radio>
+      <Radio value="15">Radio 15</Radio>
+      <Radio value="16">Radio 16</Radio>
+      <Radio value="17">Radio 17</Radio>
+      <Radio value="18">Radio 18</Radio>
+      <Radio value="19">Radio 19</Radio>
+      <Radio value="20">Radio 20</Radio>
+      <Radio value="21">Radio 21</Radio>
+      <Radio value="22">Radio 22</Radio>
+      <Radio value="23">Radio 23</Radio>
+      <Radio value="24">Radio 24</Radio>
+      <Radio value="25">Radio 25</Radio>
+      <Radio value="26">Radio 26</Radio>
+      <Radio value="27">Radio 27</Radio>
+      <Radio value="28">Radio 28</Radio>
+      <Radio value="29">Radio 29</Radio>
+      <Radio value="30">Radio 30</Radio>
+      <Radio value="31">Radio 31</Radio>
+      <Radio value="32">Radio 32</Radio>
+      <Radio value="33">Radio 33</Radio>
+      <Radio value="34">Radio 34</Radio>
+      <Radio value="35">Radio 35</Radio>
+      <Radio value="36">Radio 36</Radio>
+      <Radio value="37">Radio 37</Radio>
+      <Radio value="38">Radio 38</Radio>
+      <Radio value="39">Radio 39</Radio>
+      <Radio value="40">Radio 40</Radio>
+      <Radio value="41">Radio 41</Radio>
+      <Radio value="42">Radio 42</Radio>
+      <Radio value="43">Radio 43</Radio>
+      <Radio value="44">Radio 44</Radio>
+      <Radio value="45">Radio 45</Radio>
+      <Radio value="46">Radio 46</Radio>
+      <Radio value="47">Radio 47</Radio>
+      <Radio value="48">Radio 48</Radio>
+      <Radio value="49">Radio 49</Radio>
+      <Radio value="50">Radio 50</Radio>
+      <Radio value="51">Radio 51</Radio>
+      <Radio value="52">Radio 52</Radio>
+      <Radio value="53">Radio 53</Radio>
+      <Radio value="54">Radio 54</Radio>
+      <Radio value="55">Radio 55</Radio>
+      <Radio value="56">Radio 56</Radio>
+      <Radio value="57">Radio 57</Radio>
+      <Radio value="58">Radio 58</Radio>
+      <Radio value="59">Radio 59</Radio>
+      <Radio value="60">Radio 60</Radio>
+      <Radio value="61">Radio 61</Radio>
+      <Radio value="62">Radio 62</Radio>
+    </RadioGroup>
+  );
+};
+
+const MyInput = extendVariants(Input, {
+  variants: {
+    color: {
+      stone: {
+        inputWrapper: [
+          "bg-zinc-100",
+          "border",
+          "shadow-sm",
+          "transition-colors",
+          "focus-within:bg-zinc-100",
+          "data-[hover=true]:border-zinc-600",
+          "data-[hover=true]:bg-zinc-100",
+          "group-data-[focus=true]:border-zinc-600",
+          // dark theme
+          "dark:bg-zinc-900",
+          "dark:border-zinc-800",
+          "dark:data-[hover=true]:bg-zinc-900",
+          "dark:focus-within:bg-zinc-900",
+        ],
+        input: [
+          "text-zinc-800",
+          "placeholder:text-zinc-600",
+          // dark theme
+          "dark:text-zinc-400",
+          "dark:placeholder:text-zinc-600",
+        ],
+      },
+    },
+    size: {
+      xs: {
+        inputWrapper: "h-6 min-h-6 px-1",
+        input: "text-tiny",
+      },
+      md: {
+        inputWrapper: "h-10 min-h-10",
+        input: "text-small",
+      },
+      xl: {
+        inputWrapper: "h-14 min-h-14",
+        input: "text-medium",
+      },
+    },
+    radius: {
+      xs: {
+        inputWrapper: "rounded-sm",
+      },
+      sm: {
+        inputWrapper: "rounded-[4px]",
+      },
+    },
+    textSize: {
+      base: {
+        input: "text-base",
+      },
+    },
+    removeLabel: {
+      true: {
+        label: "hidden",
+      },
+      false: {},
+    },
+  },
+  defaultVariants: {
+    color: "stone",
+    textSize: "base",
+    removeLabel: true,
+  },
+});
+
+const MyButton2 = extendVariants(Button, {
+  variants: {
+    color: {
+      foreground:
+        "bg-foreground text-background data-[hover=true]:bg-foreground/90 data-[pressed=true]:bg-foreground/80",
+    },
+    isScalable: {
+      true: "scale-125",
+      false: "",
+    },
+    size: {
+      xl: "size--xl",
+      "2xl": "size--2xl",
+    },
+    mySize: {
+      lg: "px-12 py-6 text-lg",
+      xl: "px-12 py-6 text-xl",
+    },
+  },
+  defaultVariants: {
+    color: "foreground",
+  },
+});
+
+const usersData = [
+  {
+    id: 1,
+    name: "Tony Reichert",
+    role: "CEO",
+    team: "Management",
+    status: "active",
+    age: "29",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/1.png",
+    email: "tony.reichert@example.com",
+  },
+  {
+    id: 2,
+    name: "Zoey Lang",
+    role: "Tech Lead",
+    team: "Development",
+    status: "paused",
+    age: "25",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/1.png",
+    email: "zoey.lang@example.com",
+  },
+  {
+    id: 3,
+    name: "Jane Fisher",
+    role: "Sr. Dev",
+    team: "Development",
+    status: "active",
+    age: "22",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/2.png",
+    email: "jane.fisher@example.com",
+  },
+  {
+    id: 4,
+    name: "William Howard",
+    role: "C.M.",
+    team: "Marketing",
+    status: "vacation",
+    age: "28",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/2.png",
+    email: "william.howard@example.com",
+  },
+  {
+    id: 5,
+    name: "Kristen Copper",
+    role: "S. Manager",
+    team: "Sales",
+    status: "active",
+    age: "24",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/3.png",
+    email: "kristen.cooper@example.com",
+  },
+  {
+    id: 6,
+    name: "Brian Kim",
+    role: "P. Manager",
+    team: "Management",
+    age: "29",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/3.png",
+    email: "brian.kim@example.com",
+    status: "active",
+  },
+  {
+    id: 7,
+    name: "Michael Hunt",
+    role: "Designer",
+    team: "Design",
+    status: "paused",
+    age: "27",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/4.png",
+    email: "michael.hunt@example.com",
+  },
+  {
+    id: 8,
+    name: "Samantha Brooks",
+    role: "HR Manager",
+    team: "HR",
+    status: "active",
+    age: "31",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/4.png",
+    email: "samantha.brooks@example.com",
+  },
+  {
+    id: 9,
+    name: "Frank Harrison",
+    role: "F. Manager",
+    team: "Finance",
+    status: "vacation",
+    age: "33",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/5.png",
+    email: "frank.harrison@example.com",
+  },
+  {
+    id: 10,
+    name: "Emma Adams",
+    role: "Ops Manager",
+    team: "Operations",
+    status: "active",
+    age: "35",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/5.png",
+    email: "emma.adams@example.com",
+  },
+  {
+    id: 11,
+    name: "Brandon Stevens",
+    role: "Jr. Dev",
+    team: "Development",
+    status: "active",
+    age: "22",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/7.png",
+    email: "brandon.stevens@example.com",
+  },
+  {
+    id: 12,
+    name: "Megan Richards",
+    role: "P. Manager",
+    team: "Product",
+    status: "paused",
+    age: "28",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/7.png",
+    email: "megan.richards@example.com",
+  },
+  {
+    id: 13,
+    name: "Oliver Scott",
+    role: "S. Manager",
+    team: "Security",
+    status: "active",
+    age: "37",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/8.png",
+    email: "oliver.scott@example.com",
+  },
+  {
+    id: 14,
+    name: "Grace Allen",
+    role: "M. Specialist",
+    team: "Marketing",
+    status: "active",
+    age: "30",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/8.png",
+    email: "grace.allen@example.com",
+  },
+  {
+    id: 15,
+    name: "Noah Carter",
+    role: "IT Specialist",
+    team: "I. Technology",
+    status: "paused",
+    age: "31",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/9.png",
+    email: "noah.carter@example.com",
+  },
+  {
+    id: 16,
+    name: "Ava Perez",
+    role: "Manager",
+    team: "Sales",
+    status: "active",
+    age: "29",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/9.png",
+    email: "ava.perez@example.com",
+  },
+  {
+    id: 17,
+    name: "Liam Johnson",
+    role: "Data Analyst",
+    team: "Analysis",
+    status: "active",
+    age: "28",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/11.png",
+    email: "liam.johnson@example.com",
+  },
+  {
+    id: 18,
+    name: "Sophia Taylor",
+    role: "QA Analyst",
+    team: "Testing",
+    status: "active",
+    age: "27",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/11.png",
+    email: "sophia.taylor@example.com",
+  },
+  {
+    id: 19,
+    name: "Lucas Harris",
+    role: "Administrator",
+    team: "Information Technology",
+    status: "paused",
+    age: "32",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/12.png",
+    email: "lucas.harris@example.com",
+  },
+  {
+    id: 20,
+    name: "Mia Robinson",
+    role: "Coordinator",
+    team: "Operations",
+    status: "active",
+    age: "26",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/12.png",
+    email: "mia.robinson@example.com",
+  },
+];
+
+export default function HeroUIPerf() {
+  const [textA, setTextA] = useState<string>("");
+  const [textB, setTextB] = useState<string>("");
+  const [textC, setTextC] = useState<string>("");
+  const [isOpen, setIsOpen] = useState<boolean>(false);
+  const [inputValue, setInputValue] = useState<string>();
+  const [selectedKey, setSelectedKey] = useState<string>("");
+
+  const searchParams = useSearchParams();
+
+  const page = Number(searchParams.get("page"));
+
+  let {startsWith} = useFilter({sensitivity: "base"});
+
+  const filteredItems = inputValue
+    ? usersData.filter((item) => startsWith(item.name, inputValue))
+    : usersData;
+
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    isOpen && inputRef?.current?.focus();
+  }, [isOpen]);
+
+  const handleSelectionChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
+    setSelectedKey(e.target.value);
+  };
+
+  const topContent = useMemo(() => {
+    return (
+      <Input
+        ref={inputRef}
+        isClearable
+        aria-activedescendant={selectedKey}
+        aria-expanded={isOpen}
+        aria-label="Search user"
+        autoComplete="off"
+        autoCorrect="off"
+        className="z-10 sticky top-1"
+        placeholder="Search..."
+        spellCheck="false"
+        startContent={<SearchLinearIcon className="text-default-400" size={18} strokeWidth="2" />}
+        type="text"
+        onValueChange={setInputValue}
+      />
+    );
+  }, [inputRef, selectedKey, isOpen]);
+
+  return (
+    <div className="w-full p-24 gap-4 flex flex-col">
+      <Select
+        classNames={{
+          base: "max-w-xs",
+          listboxWrapper: "scroll-pb-6 scroll-pt-28",
+        }}
+        items={filteredItems}
+        label="Assigned to"
+        labelPlacement="outside"
+        listboxProps={{
+          topContent,
+          variant: "flat",
+          classNames: {
+            base: [
+              "before:content-[''] before:rounded-t-medium before:fixed before:w-full before:h-14 before:z-10",
+              "before:top-0 before:left-0 before:bg-linear-to-b before:from-default-50",
+            ],
+          },
+        }}
+        placeholder="Select a user"
+        selectedKeys={[selectedKey]}
+        showScrollIndicators={false}
+        variant="flat"
+        onChange={handleSelectionChange}
+        onOpenChange={setIsOpen}
+      >
+        {(item) => (
+          <SelectItem key={item.id} textValue={item.name}>
+            <div className="flex gap-2 items-center">
+              <Avatar alt={item.name} className="shrink-0" size="sm" src={item.avatar} />
+              <div className="flex flex-col">
+                <span className="text-small">{item.name}</span>
+                <span className="text-tiny text-default-400">{item.email}</span>
+              </div>
+            </div>
+          </SelectItem>
+        )}
+      </Select>
+
+      <Accordion>
+        <AccordionItem key="1" aria-label="Accordion 1" title="Accordion 1">
+          Non est aliqua tempor occaecat laborum. Lorem culpa minim irure mollit. Est qui
+          reprehenderit commodo magna proident anim ipsum ex. Mollit id amet officia nisi excepteur
+          eu. Commodo elit commodo nisi nisi aute eu aliquip aliquip voluptate exercitation ullamco
+          ipsum eiusmod veniam. Magna in laborum anim amet anim ex elit aliqua nostrud mollit.
+          Pariatur ullamco cillum proident aliqua nostrud. Labore ea veniam cillum duis veniam in
+          cupidatat voluptate eu officia. Ut laborum sunt nostrud magna. Ex magna esse cillum enim
+          incididunt pariatur qui veniam dolor. Exercitation id culpa et enim mollit duis duis
+          aliquip. Magna ullamco est cupidatat laboris irure pariatur aliquip duis aute cillum.
+          Officia irure do laboris ea nisi sunt reprehenderit laboris irure. Ex eiusmod in duis
+          veniam excepteur. Sunt et et laboris culpa. Mollit excepteur occaecat elit anim officia.
+          Laborum commodo proident cupidatat pariatur eu veniam id qui do culpa. Quis consectetur
+          adipisicing anim ex ea velit excepteur. Deserunt laboris ex aute sunt laborum tempor ea
+          enim dolore ut in. Id aliqua Lorem exercitation qui velit nostrud anim reprehenderit enim.
+          Nisi elit fugiat deserunt elit. Sit excepteur ipsum enim excepteur irure irure sint veniam
+          elit consequat ea id. Lorem ea qui sunt enim occaecat excepteur officia ex consequat
+          nostrud. Tempor sint Lorem est culpa do.
+        </AccordionItem>
+        <AccordionItem key="2" aria-label="Accordion 2" title="Accordion 2">
+          Non est aliqua tempor occaecat laborum. Lorem culpa minim irure mollit. Est qui
+          reprehenderit commodo magna proident anim ipsum ex. Mollit id amet officia nisi excepteur
+          eu. Commodo elit commodo nisi nisi aute eu aliquip aliquip voluptate exercitation ullamco
+          ipsum eiusmod veniam. Magna in laborum anim amet anim ex elit aliqua nostrud mollit.
+          Pariatur ullamco cillum proident aliqua nostrud. Labore ea veniam cillum duis veniam in
+          cupidatat voluptate eu officia. Ut laborum sunt nostrud magna. Ex magna esse cillum enim
+        </AccordionItem>
+        <AccordionItem key="3" aria-label="Accordion 3" title="Accordion 3">
+          Non est aliqua tempor occaecat laborum. Lorem culpa minim irure mollit. Est qui
+          reprehenderit commodo magna proident anim ipsum ex. Mollit id amet officia nisi excepteur
+          eu. Commodo elit commodo nisi nisi aute eu aliquip aliquip voluptate exercitation ullamco
+          ipsum eiusmod veniam. Magna in laborum anim amet anim ex elit aliqua nostrud mollit.
+          Pariatur ullamco cillum proident aliqua nostrud. Labore ea veniam cillum duis veniam in
+        </AccordionItem>
+      </Accordion>
+      <Tabs classNames={{panel: "flex flex-col gap-5"}} variant="underlined">
+        <Tab title="Test 1">
+          <Textarea defaultValue="ASdasd" label="Default value (uncontrolled)" />
+          <Input label="Text B Tab 1" value={textB} onValueChange={setTextB} />
+          <Textarea label="Text C Tab 1" value={textC} onValueChange={setTextC} />
+        </Tab>
+        <Tab title="Test 2">
+          <Textarea label="Text B Tab 2" value={textB} onValueChange={setTextB} />
+          <Textarea label="Text C Tab 2" value={textC} onValueChange={setTextC} />
+        </Tab>
+        <Tab title="Test 3">
+          <Textarea label="Text B Tab 3" value={textB} onValueChange={setTextB} />
+          <Textarea label="Text C Tab 3" value={textC} onValueChange={setTextC} />
+        </Tab>
+      </Tabs>
+
+      <h2>Outside</h2>
+      <Textarea label="Text A" placeholder="Text A" value={textA} onValueChange={setTextA} />
+      <Textarea label="Text B" placeholder="Text B" value={textB} onValueChange={setTextB} />
+      <Textarea label="Text C" placeholder="Text C" value={textC} onValueChange={setTextC} />
+
+      <MyRadioGroup />
+
+      <MyInput
+        isClearable
+        placeholder="Search..."
+        radius="md"
+        size="md"
+        startContent={<SearchLinearIcon className="text-zinc-500" size={16} />}
+      />
+
+      <Button>Click Me!</Button>
+
+      <MyButton2 color="primary">Press Me!</MyButton2>
+
+      <Pagination
+        showControls
+        initialPage={page ?? 1}
+        renderItem={({page, ...itemProps}) => {
+          return <PaginationItem href={`/examples/perf?page=${page}`} {...itemProps} />;
+        }}
+        total={10}
+      />
+    </div>
+  );
+}

apps/docs/app/examples/perf/page.tsx

@@ -1,259 +1,11 @@
-"use client";
+import {Suspense} from "react";
 
-import {
-  RadioGroup,
-  Radio,
-  Button,
-  Accordion,
-  Tabs,
-  Textarea,
-  Input,
-  Tab,
-  AccordionItem,
-  extendVariants,
-} from "@nextui-org/react";
-import {useState} from "react";
-
-import {SearchLinearIcon} from "@/components/icons";
-
-const MyRadioGroup = () => {
-  const [radio, setRadio] = useState("1");
+import ClientPage from "./client-page";
 
+export default function PerfPage() {
   return (
-    <RadioGroup value={radio} onValueChange={setRadio}>
-      <Radio value="1">Radio 1</Radio>
-      <Radio value="2">Radio 2</Radio>
-      <Radio value="3">Radio 3</Radio>
-      <Radio value="4">Radio 4</Radio>
-      <Radio value="5">Radio 5</Radio>
-      <Radio value="6">Radio 6</Radio>
-      <Radio value="7">Radio 7</Radio>
-      <Radio value="8">Radio 8</Radio>
-      <Radio value="9">Radio 9</Radio>
-      <Radio value="10">Radio 10</Radio>
-      <Radio value="11">Radio 11</Radio>
-      <Radio value="12">Radio 12</Radio>
-      <Radio value="13">Radio 13</Radio>
-      <Radio value="14">Radio 14</Radio>
-      <Radio value="15">Radio 15</Radio>
-      <Radio value="16">Radio 16</Radio>
-      <Radio value="17">Radio 17</Radio>
-      <Radio value="18">Radio 18</Radio>
-      <Radio value="19">Radio 19</Radio>
-      <Radio value="20">Radio 20</Radio>
-      <Radio value="21">Radio 21</Radio>
-      <Radio value="22">Radio 22</Radio>
-      <Radio value="23">Radio 23</Radio>
-      <Radio value="24">Radio 24</Radio>
-      <Radio value="25">Radio 25</Radio>
-      <Radio value="26">Radio 26</Radio>
-      <Radio value="27">Radio 27</Radio>
-      <Radio value="28">Radio 28</Radio>
-      <Radio value="29">Radio 29</Radio>
-      <Radio value="30">Radio 30</Radio>
-      <Radio value="31">Radio 31</Radio>
-      <Radio value="32">Radio 32</Radio>
-      <Radio value="33">Radio 33</Radio>
-      <Radio value="34">Radio 34</Radio>
-      <Radio value="35">Radio 35</Radio>
-      <Radio value="36">Radio 36</Radio>
-      <Radio value="37">Radio 37</Radio>
-      <Radio value="38">Radio 38</Radio>
-      <Radio value="39">Radio 39</Radio>
-      <Radio value="40">Radio 40</Radio>
-      <Radio value="41">Radio 41</Radio>
-      <Radio value="42">Radio 42</Radio>
-      <Radio value="43">Radio 43</Radio>
-      <Radio value="44">Radio 44</Radio>
-      <Radio value="45">Radio 45</Radio>
-      <Radio value="46">Radio 46</Radio>
-      <Radio value="47">Radio 47</Radio>
-      <Radio value="48">Radio 48</Radio>
-      <Radio value="49">Radio 49</Radio>
-      <Radio value="50">Radio 50</Radio>
-      <Radio value="51">Radio 51</Radio>
-      <Radio value="52">Radio 52</Radio>
-      <Radio value="53">Radio 53</Radio>
-      <Radio value="54">Radio 54</Radio>
-      <Radio value="55">Radio 55</Radio>
-      <Radio value="56">Radio 56</Radio>
-      <Radio value="57">Radio 57</Radio>
-      <Radio value="58">Radio 58</Radio>
-      <Radio value="59">Radio 59</Radio>
-      <Radio value="60">Radio 60</Radio>
-      <Radio value="61">Radio 61</Radio>
-      <Radio value="62">Radio 62</Radio>
-    </RadioGroup>
-  );
-};
-
-const MyInput = extendVariants(Input, {
-  variants: {
-    color: {
-      stone: {
-        inputWrapper: [
-          "bg-zinc-100",
-          "border",
-          "shadow",
-          "transition-colors",
-          "focus-within:bg-zinc-100",
-          "data-[hover=true]:border-zinc-600",
-          "data-[hover=true]:bg-zinc-100",
-          "group-data-[focus=true]:border-zinc-600",
-          // dark theme
-          "dark:bg-zinc-900",
-          "dark:border-zinc-800",
-          "dark:data-[hover=true]:bg-zinc-900",
-          "dark:focus-within:bg-zinc-900",
-        ],
-        input: [
-          "text-zinc-800",
-          "placeholder:text-zinc-600",
-          // dark theme
-          "dark:text-zinc-400",
-          "dark:placeholder:text-zinc-600",
-        ],
-      },
-    },
-    size: {
-      xs: {
-        inputWrapper: "h-unit-6 min-h-unit-6 px-1",
-        input: "text-tiny",
-      },
-      md: {
-        inputWrapper: "h-unit-10 min-h-unit-10",
-        input: "text-small",
-      },
-      xl: {
-        inputWrapper: "h-unit-14 min-h-unit-14",
-        input: "text-medium",
-      },
-    },
-    radius: {
-      xs: {
-        inputWrapper: "rounded",
-      },
-      sm: {
-        inputWrapper: "rounded-[4px]",
-      },
-    },
-    textSize: {
-      base: {
-        input: "text-base",
-      },
-    },
-    removeLabel: {
-      true: {
-        label: "hidden",
-      },
-      false: {},
-    },
-  },
-  defaultVariants: {
-    color: "stone",
-    textSize: "base",
-    removeLabel: true,
-  },
-});
-
-const MyButton2 = extendVariants(Button, {
-  variants: {
-    color: {
-      foreground:
-        "bg-foreground text-background data-[hover=true]:bg-foreground/90 data-[pressed=true]:bg-foreground/80",
-    },
-    isScalable: {
-      true: "scale-125",
-      false: "",
-    },
-    size: {
-      xl: "size--xl",
-      "2xl": "size--2xl",
-    },
-    mySize: {
-      lg: "px-12 py-6 text-lg",
-      xl: "px-12 py-6 text-xl",
-    },
-  },
-  defaultVariants: {},
-});
-
-export default function NextUIPerf() {
-  const [textA, setTextA] = useState<string | undefined>("");
-  const [textB, setTextB] = useState<string | undefined>("");
-  const [textC, setTextC] = useState<string | undefined>("");
-
-  return (
-    <div className="w-full p-24 gap-4 flex flex-col">
-      <Accordion>
-        <AccordionItem key="1" aria-label="Accordion 1" title="Accordion 1">
-          Non est aliqua tempor occaecat laborum. Lorem culpa minim irure mollit. Est qui
-          reprehenderit commodo magna proident anim ipsum ex. Mollit id amet officia nisi excepteur
-          eu. Commodo elit commodo nisi nisi aute eu aliquip aliquip voluptate exercitation ullamco
-          ipsum eiusmod veniam. Magna in laborum anim amet anim ex elit aliqua nostrud mollit.
-          Pariatur ullamco cillum proident aliqua nostrud. Labore ea veniam cillum duis veniam in
-          cupidatat voluptate eu officia. Ut laborum sunt nostrud magna. Ex magna esse cillum enim
-          incididunt pariatur qui veniam dolor. Exercitation id culpa et enim mollit duis duis
-          aliquip. Magna ullamco est cupidatat laboris irure pariatur aliquip duis aute cillum.
-          Officia irure do laboris ea nisi sunt reprehenderit laboris irure. Ex eiusmod in duis
-          veniam excepteur. Sunt et et laboris culpa. Mollit excepteur occaecat elit anim officia.
-          Laborum commodo proident cupidatat pariatur eu veniam id qui do culpa. Quis consectetur
-          adipisicing anim ex ea velit excepteur. Deserunt laboris ex aute sunt laborum tempor ea
-          enim dolore ut in. Id aliqua Lorem exercitation qui velit nostrud anim reprehenderit enim.
-          Nisi elit fugiat deserunt elit. Sit excepteur ipsum enim excepteur irure irure sint veniam
-          elit consequat ea id. Lorem ea qui sunt enim occaecat excepteur officia ex consequat
-          nostrud. Tempor sint Lorem est culpa do.
-        </AccordionItem>
-        <AccordionItem key="2" aria-label="Accordion 2" title="Accordion 2">
-          Non est aliqua tempor occaecat laborum. Lorem culpa minim irure mollit. Est qui
-          reprehenderit commodo magna proident anim ipsum ex. Mollit id amet officia nisi excepteur
-          eu. Commodo elit commodo nisi nisi aute eu aliquip aliquip voluptate exercitation ullamco
-          ipsum eiusmod veniam. Magna in laborum anim amet anim ex elit aliqua nostrud mollit.
-          Pariatur ullamco cillum proident aliqua nostrud. Labore ea veniam cillum duis veniam in
-          cupidatat voluptate eu officia. Ut laborum sunt nostrud magna. Ex magna esse cillum enim
-        </AccordionItem>
-        <AccordionItem key="3" aria-label="Accordion 3" title="Accordion 3">
-          Non est aliqua tempor occaecat laborum. Lorem culpa minim irure mollit. Est qui
-          reprehenderit commodo magna proident anim ipsum ex. Mollit id amet officia nisi excepteur
-          eu. Commodo elit commodo nisi nisi aute eu aliquip aliquip voluptate exercitation ullamco
-          ipsum eiusmod veniam. Magna in laborum anim amet anim ex elit aliqua nostrud mollit.
-          Pariatur ullamco cillum proident aliqua nostrud. Labore ea veniam cillum duis veniam in
-        </AccordionItem>
-      </Accordion>
-      <Tabs classNames={{panel: "flex flex-col gap-5"}} variant="underlined">
-        <Tab title="Test 1">
-          <Textarea defaultValue="ASdasd" label="Default value (uncontrolled)" />
-          <Input label="Text B Tab 1" value={textB} onValueChange={setTextB} />
-          <Textarea label="Text C Tab 1" value={textC} onValueChange={setTextC} />
-        </Tab>
-        <Tab title="Test 2">
-          <Textarea label="Text B Tab 2" value={textB} onValueChange={setTextB} />
-          <Textarea label="Text C Tab 2" value={textC} onValueChange={setTextC} />
-        </Tab>
-        <Tab title="Test 3">
-          <Textarea label="Text B Tab 3" value={textB} onValueChange={setTextB} />
-          <Textarea label="Text C Tab 3" value={textC} onValueChange={setTextC} />
-        </Tab>
-      </Tabs>
-
-      <h2>Outside</h2>
-      <Textarea label="Text A" placeholder="Text A" value={textA} onValueChange={setTextA} />
-      <Textarea label="Text B" placeholder="Text B" value={textB} onValueChange={setTextB} />
-      <Textarea label="Text C" placeholder="Text C" value={textC} onValueChange={setTextC} />
-
-      <MyRadioGroup />
-
-      <MyInput
-        isClearable
-        placeholder="Search..."
-        radius="md"
-        size="md"
-        startContent={<SearchLinearIcon className="text-zinc-500" size={16} />}
-      />
-
-      <Button>Click Me!</Button>
-
-      <MyButton2 color="foreground">Press Me!</MyButton2>
-    </div>
+    <Suspense fallback={<div>Loading...</div>}>
+      <ClientPage />
+    </Suspense>
   );
 }

apps/docs/app/examples/select/async-items-loading/page.tsx

@@ -0,0 +1,113 @@
+/* eslint-disable no-console */
+"use client";
+
+import {Select, SelectItem} from "@heroui/react";
+import {useEffect, useState} from "react";
+import {useInfiniteScroll} from "@heroui/use-infinite-scroll";
+
+type Pokemon = {
+  name: string;
+  url: string;
+};
+
+type UsePokemonListProps = {
+  /** Delay to wait before fetching more items */
+  fetchDelay?: number;
+};
+
+function usePokemonList({fetchDelay = 0}: UsePokemonListProps = {}) {
+  const [items, setItems] = useState<Pokemon[]>([]);
+  const [hasMore, setHasMore] = useState(true);
+  const [isLoading, setIsLoading] = useState(false);
+  const [offset, setOffset] = useState(0);
+  const limit = 10; // Number of items per page, adjust as necessary
+
+  const loadPokemon = async (currentOffset: number) => {
+    const controller = new AbortController();
+    const {signal} = controller;
+
+    try {
+      setIsLoading(true);
+
+      if (offset > 0) {
+        // Delay to simulate network latency
+        await new Promise((resolve) => setTimeout(resolve, fetchDelay));
+      }
+
+      let res = await fetch(
+        `https://pokeapi.co/api/v2/pokemon?offset=${currentOffset}&limit=${limit}`,
+        {signal},
+      );
+
+      if (!res.ok) {
+        throw new Error("Network response was not ok");
+      }
+
+      let json = await res.json();
+
+      setHasMore(json.next !== null);
+      // Append new results to existing ones
+      setItems((prevItems) => [...prevItems, ...json.results]);
+    } catch (error) {
+      // @ts-ignore
+      if (error.name === "AbortError") {
+        console.log("Fetch aborted");
+      } else {
+        console.error("There was an error with the fetch operation:", error);
+      }
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    loadPokemon(offset);
+  }, []);
+
+  const onLoadMore = () => {
+    const newOffset = offset + limit;
+
+    setOffset(newOffset);
+    loadPokemon(newOffset);
+  };
+
+  return {
+    items,
+    hasMore,
+    isLoading,
+    onLoadMore,
+  };
+}
+
+export default function Page() {
+  const [isOpen, setIsOpen] = useState(false);
+  const {items, hasMore, isLoading, onLoadMore} = usePokemonList({fetchDelay: 1500});
+
+  const [, scrollerRef] = useInfiniteScroll({
+    hasMore,
+    isEnabled: isOpen,
+    shouldUseLoader: false, // We don't want to show the loader at the bottom of the list
+    onLoadMore,
+  });
+
+  return (
+    <div className="p-6">
+      <Select
+        className="max-w-xs"
+        isLoading={isLoading}
+        items={items}
+        label="Pick a Pokemon"
+        placeholder="Select a Pokemon"
+        scrollRef={scrollerRef}
+        selectionMode="single"
+        onOpenChange={setIsOpen}
+      >
+        {(item) => (
+          <SelectItem key={item.name} className="capitalize">
+            {item.name}
+          </SelectItem>
+        )}
+      </Select>
+    </div>
+  );
+}

apps/docs/app/examples/table/async-pagination/page.tsx

@@ -10,9 +10,9 @@ import {
   getKeyValue,
   Spinner,
   Pagination,
-} from "@nextui-org/react";
-import {useAsyncList} from "@react-stately/data";
-import {useCallback, useMemo, useState} from "react";
+} from "@heroui/react";
+import {useMemo, useState} from "react";
+import useSWR from "swr";
 
 type SWCharacter = {
   name: string;
@@ -21,50 +21,23 @@ type SWCharacter = {
   birth_year: string;
 };
 
+const fetcher = (...args: Parameters<typeof fetch>) => fetch(...args).then((res) => res.json());
+
 export default function Page() {
   const [page, setPage] = useState(1);
-  const [total, setTotal] = useState(0);
-  const [isLoading, setIsLoading] = useState(true);
+
+  const {data, isLoading} = useSWR<{
+    count: number;
+    results: SWCharacter[];
+  }>(`https://swapi.py4e.com/api/people?page=${page}`, fetcher, {
+    keepPreviousData: true,
+  });
 
   const rowsPerPage = 10;
 
-  let list = useAsyncList<SWCharacter>({
-    async load({signal, cursor}) {
-      // If no cursor is available, then we're loading the first page.
-      // Otherwise, the cursor is the next URL to load, as returned from the previous page.
-      const res = await fetch(cursor || "https://swapi.py4e.com/api/people/?search=", {signal});
-      let json = await res.json();
-
-      setTotal(json.count);
-
-      setIsLoading(false);
-
-      return {
-        items: json.results,
-        cursor: json.next,
-      };
-    },
-  });
-
-  const pages = Math.ceil(total / rowsPerPage);
-
-  const items = useMemo(() => {
-    const start = (page - 1) * rowsPerPage;
-    const end = start + rowsPerPage;
-
-    return list.items.slice(start, end);
-  }, [page, list.items?.length]);
-
-  const onPaginationChange = useCallback(
-    (page: number) => {
-      setIsLoading(true);
-      if (page >= list.items.length / rowsPerPage) {
-        list.loadMore();
-      }
-      setPage(page);
-    },
-    [list.items.length],
-  );
+  const pages = useMemo(() => {
+    return data?.count ? Math.ceil(data.count / rowsPerPage) : 0;
+  }, [data?.count, rowsPerPage]);
 
   return (
     <div className="p-6">
@@ -80,7 +53,7 @@ export default function Page() {
                 color="primary"
                 page={page}
                 total={pages}
-                onChange={onPaginationChange}
+                onChange={(page) => setPage(page)}
               />
             </div>
           ) : null
@@ -96,8 +69,8 @@ export default function Page() {
           <TableColumn key="birth_year">Birth year</TableColumn>
         </TableHeader>
         <TableBody
-          isLoading={isLoading && !items.length}
-          items={items}
+          isLoading={isLoading || data?.results.length === 0}
+          items={data?.results ?? []}
           loadingContent={<Spinner />}
         >
           {(item) => (

apps/docs/app/examples/table/custom-styles/page.tsx

@@ -1,6 +1,7 @@
-/* eslint-disable jsx-a11y/no-onchange */
 "use client";
 
+import type {Selection, ChipProps, SortDescriptor} from "@heroui/react";
+
 import {
   Table,
   TableHeader,
@@ -14,16 +15,13 @@ import {
   Dropdown,
   DropdownMenu,
   DropdownItem,
-  Selection,
   Chip,
   User,
-  ChipProps,
   Pagination,
-  SortDescriptor,
-} from "@nextui-org/react";
-import {ChevronDownIcon, SearchIcon} from "@nextui-org/shared-icons";
+} from "@heroui/react";
+import {ChevronDownIcon, SearchIcon} from "@heroui/shared-icons";
 import {useCallback, useMemo, useState} from "react";
-import {capitalize} from "lodash";
+import {capitalize} from "@heroui/shared-utils";
 
 import {PlusLinearIcon} from "@/components/icons";
 import {VerticalDotsIcon} from "@/components/icons/vertical-dots";
@@ -105,14 +103,14 @@ const users = [
     email: "kristen.cooper@example.com",
   },
   {
-    key: 6,
+    id: 6,
     name: "Brian Kim",
     role: "P. Manager",
     team: "Management",
     age: "29",
     avatar: "https://i.pravatar.cc/150?u=a042581f4e29026024d",
     email: "brian.kim@example.com",
-    status: "Active",
+    status: "active",
   },
   {
     id: 7,
@@ -256,7 +254,7 @@ const users = [
   },
 ];
 
-type User = typeof users[0];
+type User = (typeof users)[number];
 
 export default function Page() {
   const [filterValue, setFilterValue] = useState("");
@@ -352,20 +350,18 @@ export default function Page() {
         );
       case "actions":
         return (
-          <div className="relative flex justify-end items-center gap-2">
-            <Dropdown className="bg-background border-1 border-default-200">
-              <DropdownTrigger>
-                <Button isIconOnly radius="full" size="sm" variant="light">
-                  <VerticalDotsIcon className="text-default-400" />
-                </Button>
-              </DropdownTrigger>
-              <DropdownMenu>
-                <DropdownItem>View</DropdownItem>
-                <DropdownItem>Edit</DropdownItem>
-                <DropdownItem>Delete</DropdownItem>
-              </DropdownMenu>
-            </Dropdown>
-          </div>
+          <Dropdown className="bg-background border-1 border-default-200">
+            <DropdownTrigger>
+              <Button isIconOnly radius="full" size="sm" variant="light">
+                <VerticalDotsIcon className="text-default-400" />
+              </Button>
+            </DropdownTrigger>
+            <DropdownMenu>
+              <DropdownItem key="view">View</DropdownItem>
+              <DropdownItem key="edit">Edit</DropdownItem>
+              <DropdownItem key="delete">Delete</DropdownItem>
+            </DropdownMenu>
+          </Dropdown>
         );
       default:
         return cellValue;
@@ -469,7 +465,7 @@ export default function Page() {
           <label className="flex items-center text-default-400 text-small">
             Rows per page:
             <select
-              className="bg-transparent outline-none text-default-400 text-small"
+              className="bg-transparent outline-solid outline-transparent text-default-400 text-small"
               onChange={onRowsPerPageChange}
             >
               <option value="5">5</option>
@@ -521,13 +517,13 @@ export default function Page() {
       td: [
         // changing the rows border radius
         // first
-        "group-data-[first=true]:first:before:rounded-none",
-        "group-data-[first=true]:last:before:rounded-none",
+        "first:group-data-[first=true]:before:rounded-none",
+        "last:group-data-[first=true]:before:rounded-none",
         // middle
         "group-data-[middle=true]:before:rounded-none",
         // last
-        "group-data-[last=true]:first:before:rounded-none",
-        "group-data-[last=true]:last:before:rounded-none",
+        "first:group-data-[last=true]:before:rounded-none",
+        "last:group-data-[last=true]:before:rounded-none",
       ],
     }),
     [],

apps/docs/app/examples/table/infinite-pagination/page.tsx

@@ -9,9 +9,9 @@ import {
   TableCell,
   getKeyValue,
   Spinner,
-} from "@nextui-org/react";
+} from "@heroui/react";
 import {useAsyncList} from "@react-stately/data";
-import {useInfiniteScroll} from "@nextui-org/use-infinite-scroll";
+import {useInfiniteScroll} from "@heroui/use-infinite-scroll";
 import {useState} from "react";
 
 type SWCharacter = {

apps/docs/app/examples/table/load-more/page.tsx

@@ -10,7 +10,7 @@ import {
   getKeyValue,
   Spinner,
   Button,
-} from "@nextui-org/react";
+} from "@heroui/react";
 import {useAsyncList} from "@react-stately/data";
 import {useState} from "react";
 

apps/docs/app/examples/table/sort-icon/page.tsx

@@ -0,0 +1,96 @@
+"use client";
+
+import {
+  Table,
+  TableHeader,
+  TableColumn,
+  TableBody,
+  TableRow,
+  TableCell,
+  getKeyValue,
+  Spinner,
+} from "@heroui/react";
+import {SortIcon} from "@heroui/shared-icons";
+import {useAsyncList} from "@react-stately/data";
+import {useState} from "react";
+
+type SWCharacter = {
+  name: string;
+  height: string;
+  mass: string;
+  birth_year: string;
+};
+
+export default function Page() {
+  const [isLoading, setIsLoading] = useState(true);
+
+  let list = useAsyncList<SWCharacter>({
+    async load({signal}) {
+      let res = await fetch(`https://swapi.py4e.com/api/people/?search`, {
+        signal,
+      });
+      let json = await res.json();
+
+      setIsLoading(false);
+
+      return {
+        items: json.results,
+      };
+    },
+    async sort({items, sortDescriptor}) {
+      return {
+        items: items.sort((a, b) => {
+          let first = a[sortDescriptor.column as keyof SWCharacter];
+          let second = b[sortDescriptor.column as keyof SWCharacter];
+          let cmp = (parseInt(first) || first) < (parseInt(second) || second) ? -1 : 1;
+
+          if (sortDescriptor.direction === "descending") {
+            cmp *= -1;
+          }
+
+          return cmp;
+        }),
+      };
+    },
+  });
+
+  return (
+    <div className="p-6">
+      <Table
+        aria-label="Example table with client side sorting"
+        classNames={{
+          table: "min-h-[400px]",
+        }}
+        sortDescriptor={list.sortDescriptor}
+        sortIcon={SortIcon}
+        onSortChange={list.sort}
+      >
+        <TableHeader>
+          <TableColumn key="name" allowsSorting>
+            Name
+          </TableColumn>
+          <TableColumn key="height" allowsSorting>
+            Height
+          </TableColumn>
+          <TableColumn key="mass" allowsSorting>
+            Mass
+          </TableColumn>
+          <TableColumn key="birth_year" allowsSorting>
+            Birth year
+          </TableColumn>
+        </TableHeader>
+        <TableBody
+          isLoading={isLoading}
+          items={list.items}
+          loadingContent={<Spinner label="Loading..." />}
+        >
+          {(item) => (
+            <TableRow key={item.name}>
+              {(columnKey) => <TableCell>{getKeyValue(item, columnKey)}</TableCell>}
+            </TableRow>
+          )}
+        </TableBody>
+      </Table>
+    </div>
+  );
+}

apps/docs/app/examples/table/sorting/page.tsx

@@ -9,7 +9,7 @@ import {
   TableCell,
   getKeyValue,
   Spinner,
-} from "@nextui-org/react";
+} from "@heroui/react";
 import {useAsyncList} from "@react-stately/data";
 import {useState} from "react";
 

apps/docs/app/examples/table/use-case/page.tsx

@@ -1,6 +1,7 @@
-/* eslint-disable jsx-a11y/no-onchange */
 "use client";
 
+import type {Selection, ChipProps, SortDescriptor} from "@heroui/react";
+
 import {
   Table,
   TableHeader,
@@ -14,16 +15,13 @@ import {
   Dropdown,
   DropdownMenu,
   DropdownItem,
-  Selection,
   Chip,
   User,
-  ChipProps,
   Pagination,
-  SortDescriptor,
-} from "@nextui-org/react";
-import {ChevronDownIcon, SearchIcon} from "@nextui-org/shared-icons";
+} from "@heroui/react";
+import {ChevronDownIcon, SearchIcon} from "@heroui/shared-icons";
 import {useCallback, useMemo, useState} from "react";
-import {capitalize} from "lodash";
+import {capitalize} from "@heroui/shared-utils";
 
 import {PlusLinearIcon} from "@/components/icons";
 import {VerticalDotsIcon} from "@/components/icons/vertical-dots";
@@ -105,14 +103,14 @@ const users = [
     email: "kristen.cooper@example.com",
   },
   {
-    key: 6,
+    id: 6,
     name: "Brian Kim",
     role: "P. Manager",
     team: "Management",
     age: "29",
     avatar: "https://i.pravatar.cc/150?u=a042581f4e29026024d",
     email: "brian.kim@example.com",
-    status: "Active",
+    status: "active",
   },
   {
     id: 7,
@@ -256,7 +254,7 @@ const users = [
   },
 ];
 
-type User = typeof users[0];
+type User = (typeof users)[number];
 
 export default function Page() {
   const [filterValue, setFilterValue] = useState("");
@@ -271,8 +269,6 @@ export default function Page() {
 
   const [page, setPage] = useState(1);
 
-  const pages = Math.ceil(users.length / rowsPerPage);
-
   const hasSearchFilter = Boolean(filterValue);
 
   const headerColumns = useMemo(() => {
@@ -298,6 +294,8 @@ export default function Page() {
     return filteredUsers;
   }, [users, filterValue, statusFilter]);
 
+  const pages = Math.ceil(filteredItems.length / rowsPerPage) || 1;
+
   const items = useMemo(() => {
     const start = (page - 1) * rowsPerPage;
     const end = start + rowsPerPage;
@@ -344,20 +342,18 @@ export default function Page() {
         );
       case "actions":
         return (
-          <div className="relative flex justify-end items-center gap-2">
-            <Dropdown>
-              <DropdownTrigger>
-                <Button isIconOnly size="sm" variant="light">
-                  <VerticalDotsIcon className="text-default-300" />
-                </Button>
-              </DropdownTrigger>
-              <DropdownMenu>
-                <DropdownItem>View</DropdownItem>
-                <DropdownItem>Edit</DropdownItem>
-                <DropdownItem>Delete</DropdownItem>
-              </DropdownMenu>
-            </Dropdown>
-          </div>
+          <Dropdown>
+            <DropdownTrigger>
+              <Button isIconOnly size="sm" variant="light">
+                <VerticalDotsIcon className="text-default-300" />
+              </Button>
+            </DropdownTrigger>
+            <DropdownMenu>
+              <DropdownItem key="view">View</DropdownItem>
+              <DropdownItem key="edit">Edit</DropdownItem>
+              <DropdownItem key="delete">Delete</DropdownItem>
+            </DropdownMenu>
+          </Dropdown>
         );
       default:
         return cellValue;
@@ -390,6 +386,11 @@ export default function Page() {
     }
   }, []);
 
+  const onClear = useCallback(() => {
+    setFilterValue("");
+    setPage(1);
+  }, []);
+
   const topContent = useMemo(() => {
     return (
       <div className="flex flex-col gap-4">
@@ -400,7 +401,7 @@ export default function Page() {
             placeholder="Search by name..."
             startContent={<SearchIcon />}
             value={filterValue}
-            onClear={() => setFilterValue("")}
+            onClear={() => onClear()}
             onValueChange={onSearchChange}
           />
           <div className="flex gap-3">
@@ -456,7 +457,7 @@ export default function Page() {
           <label className="flex items-center text-default-400 text-small">
             Rows per page:
             <select
-              className="bg-transparent outline-none text-default-400 text-small"
+              className="bg-transparent outline-solid outline-transparent text-default-400 text-small"
               onChange={onRowsPerPageChange}
             >
               <option value="5">5</option>
@@ -483,23 +484,22 @@ export default function Page() {
         <span className="w-[30%] text-small text-default-400">
           {selectedKeys === "all"
             ? "All items selected"
-            : `${selectedKeys.size} of ${items.length} selected`}
+            : `${selectedKeys.size} of ${filteredItems.length} selected`}
         </span>
         <Pagination
           isCompact
           showControls
           showShadow
           color="primary"
-          isDisabled={hasSearchFilter}
           page={page}
           total={pages}
           onChange={setPage}
         />
         <div className="hidden sm:flex w-[30%] justify-end gap-2">
-          <Button isDisabled={hasSearchFilter} size="sm" variant="flat" onPress={onPreviousPage}>
+          <Button isDisabled={pages === 1} size="sm" variant="flat" onPress={onPreviousPage}>
             Previous
           </Button>
-          <Button isDisabled={hasSearchFilter} size="sm" variant="flat" onPress={onNextPage}>
+          <Button isDisabled={pages === 1} size="sm" variant="flat" onPress={onNextPage}>
             Next
           </Button>
         </div>

apps/docs/app/feed.xml/route.ts

@@ -1,5 +1,5 @@
 import Rss from "rss";
-import {allBlogPosts} from "contentlayer/generated";
+import {allBlogPosts} from "contentlayer2/generated";
 
 import {siteConfig} from "@/config/site";
 import {allCoreContent} from "@/libs/contentlayer";
@@ -24,7 +24,8 @@ export async function GET() {
       url: `${siteConfig.siteUrl}/blog/${post.slug}`,
       guid: `${siteConfig.siteUrl}/blog/${post.slug}`,
       date: post.date,
-      author: `${author} <${siteConfig.email}>`,
+      // @ts-ignore - name does exist
+      author: `${author.name} <${siteConfig.email}>`,
       categories: post.tags ?? [],
     });
   });

apps/docs/app/figma/page.tsx

@@ -1,56 +0,0 @@
-import {Button, Image, Link} from "@nextui-org/react";
-
-import {Blockquote} from "@/components/docs/components/blockquote";
-
-export default function FigmaPage() {
-  return (
-    <>
-      <main className="relative container mx-auto max-w-7xl z-10 px-6 min-h-[calc(100vh_-_64px_-_108px)] mb-12 flex-grow">
-        <section className="w-full flex flex-col items-center lg:px-16 mt-12 gap-6">
-          <div className="text-center max-w-xl">
-            <h1 className="mb-2 font-bold text-4xl">NextUI Figma Kit</h1>
-            <h5 className="text-default-500 text-lg">
-              A Figma file that contains the basis of the NextUI design system to help you design
-              your applications.
-            </h5>
-          </div>
-
-          <iframe
-            className="aspect-video w-full border border-transparent dark:border-default-200/50 object-fit rounded-xl shadow-lg"
-            height="600"
-            src="https://embed.figma.com/file/1267584376234254760/hf_embed?community_viewer=true&embed_host=nextui"
-            title="NextUI Figma Kit"
-            width="800"
-          />
-          <div className="text-center max-w-2xl m-auto">
-            <Button className="max-w-fit" color="default" variant="bordered">
-              <Link
-                isExternal
-                showAnchorIcon
-                className="text-current"
-                href="https://www.figma.com/community/file/1267584376234254760"
-              >
-                Open in Figma
-              </Link>
-            </Button>
-            <Blockquote color="warning">
-              This file is still in development and will be continuously updated.
-            </Blockquote>
-          </div>
-        </section>
-      </main>
-      <div
-        aria-hidden="true"
-        className="fixed hidden dark:md:block dark:opacity-70 -bottom-[40%] -left-[20%] z-0"
-      >
-        <Image removeWrapper alt="docs left background" src="/gradients/docs-left.png" />
-      </div>
-      <div
-        aria-hidden="true"
-        className="fixed hidden dark:md:block dark:opacity-70 -top-[80%] -right-[60%] 2xl:-top-[60%] 2xl:-right-[45%] z-0 rotate-12"
-      >
-        <Image removeWrapper alt="docs right background" src="/gradients/docs-right.png" />
-      </div>
-    </>
-  );
-}

apps/docs/app/layout.tsx

@@ -1,18 +1,19 @@
 import "@/styles/globals.css";
 import "@/styles/sandpack.css";
-import {Metadata} from "next";
-import {clsx} from "@nextui-org/shared-utils";
-import {Analytics} from "@vercel/analytics/react";
+import type {Metadata, Viewport} from "next";
+
+import {cn} from "@heroui/theme";
+import {Analytics} from "@vercel/analytics/next";
 
 import {Providers} from "./providers";
 
 import {Cmdk} from "@/components/cmdk";
 import manifest from "@/config/routes.json";
 import {siteConfig} from "@/config/site";
-import {fontSans} from "@/config/fonts";
+import {fonts} from "@/config/fonts";
 import {Navbar} from "@/components/navbar";
 import {Footer} from "@/components/footer";
-import {__PROD__} from "@/utils";
+import {ProBanner} from "@/components/pro-banner";
 
 export const metadata: Metadata = {
   title: {
@@ -23,8 +24,9 @@ export const metadata: Metadata = {
   keywords: [
     "React",
     "Next.js",
-    "Tailwind CSS",
     "NextUI",
+    "Tailwind CSS",
+    "HeroUI",
     "React Aria",
     "Server Components",
     "React Components",
@@ -34,10 +36,6 @@ export const metadata: Metadata = {
     "UI Framework",
     "UI Design System",
   ],
-  themeColor: [
-    {media: "(prefers-color-scheme: light)", color: "white"},
-    {media: "(prefers-color-scheme: dark)", color: "black"},
-  ],
   icons: {
     icon: "/favicon.ico",
     shortcut: "/favicon-32x32.png",
@@ -48,29 +46,51 @@ export const metadata: Metadata = {
   openGraph: siteConfig.openGraph,
   authors: [
     {
-      name: "jrgarciadev",
-      url: "https://jrgarciadev.com",
+      name: "hero_ui",
+      url: "https://x.com/hero_ui",
     },
   ],
-  creator: "jrgarciadev",
-  viewport:
-    "viewport-fit=cover, width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0",
+  creator: "heroui-inc",
+  alternates: {
+    canonical: "https://heroui.com",
+    types: {
+      "application/rss+xml": [{url: "https://heroui.com/feed.xml", title: "HeroUI RSS Feed"}],
+    },
+  },
+};
+
+export const viewport: Viewport = {
+  themeColor: [
+    {color: "#f4f4f5", media: "(prefers-color-scheme: light)"},
+    {color: "#111111", media: "(prefers-color-scheme: dark)"},
+  ],
+  width: "device-width",
+  initialScale: 1,
+  maximumScale: 1,
+  userScalable: false,
 };
 
 export default function RootLayout({children}: {children: React.ReactNode}) {
   return (
     <html suppressHydrationWarning dir="ltr" lang="en">
       <head />
-      <body className={clsx("min-h-screen bg-background font-sans antialiased", fontSans.variable)}>
+      <body
+        className={cn(
+          "min-h-screen text-foreground bg-background font-sans antialiased",
+          fonts.sans.variable,
+          fonts.mono.variable,
+        )}
+      >
         <Providers themeProps={{attribute: "class", defaultTheme: "dark"}}>
           <div className="relative flex flex-col" id="app-container">
+            <ProBanner />
             <Navbar mobileRoutes={manifest.mobileRoutes} routes={manifest.routes} />
             {children}
+            <Analytics mode="production" />
             <Footer />
           </div>
           <Cmdk />
         </Providers>
-        {__PROD__ && <Analytics />}
       </body>
     </html>
   );

apps/docs/app/page.tsx

@@ -1,4 +1,5 @@
-import {Spacer} from "@nextui-org/spacer";
+import {Spacer} from "@heroui/spacer";
+import {Suspense} from "react";
 
 import {Hero} from "@/components/marketing/hero";
 import {FeaturesGrid} from "@/components/marketing/features-grid";
@@ -9,27 +10,13 @@ import {Customization} from "@/components/marketing/customization";
 import {LastButNotLeast} from "@/components/marketing/last-but-not-least";
 import {InstallBanner} from "@/components/marketing/install-banner";
 import {Community} from "@/components/marketing/community";
-import {Support} from "@/components/marketing/support";
+import Support from "@/components/marketing/support";
 import landingContent from "@/content/landing";
-import {getAllSponsors} from "@/utils/get-all-sponsors";
-
-async function getData() {
-  try {
-    const sponsors = await getAllSponsors();
-
-    return {
-      sponsors,
-    };
-  } catch (error) {
-    throw new Error("Failed to fetch data");
-  }
-}
+import {HeroUIProSection} from "@/components/marketing/heroui-pro-section";
 
 export default async function Home() {
-  const data = await getData();
-
   return (
-    <main className="container mx-auto max-w-7xl px-6 flex-grow">
+    <main className="container mx-auto max-w-7xl px-6 grow">
       <section className="flex flex-col items-center justify-center">
         <Hero />
         <FeaturesGrid features={landingContent.topFeatures} />
@@ -37,8 +24,11 @@ export default async function Home() {
         <A11yOtb />
         <DarkMode />
         <Customization />
+        <HeroUIProSection />
         <LastButNotLeast />
-        <Support sponsors={data.sponsors} />
+        <Suspense fallback={<div>Loading...</div>}>
+          <Support />
+        </Suspense>
         <Spacer y={24} />
         <InstallBanner />
         <Community />

apps/docs/app/playground/page.tsx

@@ -0,0 +1,33 @@
+import {Image} from "@heroui/react";
+
+import PlaygroundTabs from "./playground-tabs";
+
+export default function FigmaPage() {
+  return (
+    <>
+      <main className="prose prose-neutral relative container mx-auto max-w-3xl z-10 px-6 min-h-[calc(100vh_-_64px_-_108px)] mb-12 grow">
+        <section className="w-full flex flex-col items-center mt-12 gap-6">
+          <div className="text-center">
+            <h1 className="mb-2">Playground</h1>
+          </div>
+        </section>
+        <section>
+          <h3 className="text-medium text-default-500">Components</h3>
+          <PlaygroundTabs />
+        </section>
+      </main>
+      <div
+        aria-hidden="true"
+        className="fixed hidden dark:md:block dark:opacity-70 -bottom-[40%] -left-[20%] z-0"
+      >
+        <Image removeWrapper alt="docs left background" src="/gradients/docs-left.png" />
+      </div>
+      <div
+        aria-hidden="true"
+        className="fixed hidden dark:md:block dark:opacity-70 -top-[80%] -right-[60%] 2xl:-top-[60%] 2xl:-right-[45%] z-0 rotate-12"
+      >
+        <Image removeWrapper alt="docs right background" src="/gradients/docs-right.png" />
+      </div>
+    </>
+  );
+}

apps/docs/app/playground/playground-tabs.tsx

@@ -0,0 +1,19 @@
+"use client";
+
+import {Tab, Tabs} from "@heroui/react";
+
+export default function BlocksTabs() {
+  return (
+    <Tabs
+      classNames={{
+        cursor: "dark:bg-default-100 bg-default-200",
+      }}
+      radius="full"
+      variant="light"
+    >
+      <Tab key="input" title="Inputs" />
+      <Tab key="button" title="Buttons" />
+      <Tab key="card" title="Cards" />
+    </Tabs>
+  );
+}

apps/docs/app/providers.tsx

@@ -1,19 +1,52 @@
 "use client";
 
+import type {ThemeProviderProps} from "next-themes";
+
 import * as React from "react";
-import {NextUIProvider} from "@nextui-org/react";
+import {HeroUIProvider} from "@heroui/react";
 import {ThemeProvider as NextThemesProvider} from "next-themes";
-import {ThemeProviderProps} from "next-themes/dist/types";
+import {useRouter} from "next/navigation";
+import {useEffect} from "react";
+import posthog from "posthog-js";
+import {PostHogProvider} from "posthog-js/react";
+
+import {__PROD__} from "@/utils";
 
 export interface ProvidersProps {
   children: React.ReactNode;
   themeProps?: ThemeProviderProps;
 }
 
+const ProviderWrapper = ({children}: {children: React.ReactElement}) => {
+  useEffect(() => {
+    // Initialize PostHog only once when the app starts
+    if (typeof window !== "undefined" && __PROD__ && !posthog.isFeatureEnabled("capture")) {
+      posthog.init(process.env.NEXT_PUBLIC_POSTHOG_KEY!, {
+        api_host: "/ingest",
+        person_profiles: "identified_only",
+        ui_host: process.env.NEXT_PUBLIC_POSTHOG_HOST,
+        capture_pageview: false,
+        capture_pageleave: false,
+        capture_heatmaps: false,
+      });
+    }
+  }, []);
+
+  if (__PROD__) {
+    return <PostHogProvider client={posthog}>{children}</PostHogProvider>;
+  }
+
+  return children;
+};
+
 export function Providers({children, themeProps}: ProvidersProps) {
+  const router = useRouter();
+
   return (
-    <NextUIProvider>
-      <NextThemesProvider {...themeProps}>{children}</NextThemesProvider>
-    </NextUIProvider>
+    <ProviderWrapper>
+      <HeroUIProvider navigate={router.push}>
+        <NextThemesProvider {...themeProps}>{children}</NextThemesProvider>
+      </HeroUIProvider>
+    </ProviderWrapper>
   );
 }

apps/docs/app/themes/page.tsx

@@ -0,0 +1,9 @@
+import {ThemeBuilder} from "@/components/themes";
+
+export default function ThemesPage() {
+  return (
+    <div className="flex flex-col md:flex-row gap-6 w-full p-6 py-3 md:pr-[45vw] lg:pr-[30vw] justify-start mt-12 scrollbar-hide">
+      <ThemeBuilder />
+    </div>
+  );
+}

apps/docs/components/ads/carbon-ad/carbon-ad.tsx

@@ -1,13 +1,23 @@
+"use client";
+
 import React, {useCallback, useEffect} from "react";
 import Script from "next/script";
+import {Image} from "@heroui/react";
 
 import carbonOptimize from "./carbon-optimize";
 
 import {loadScript} from "@/utils/scripts";
 import {useIsMounted} from "@/hooks/use-is-mounted";
-import {__PROD__} from "@/utils";
+import {__PROD__, __ENABLE_ADS__} from "@/utils";
 
 const EA_PROVIDER_RATIO = 0.85;
+const PRODUCT_HUNT_ENABLED = false;
+
+const PH_INFO = {
+  description: "Join the conversation and help us get #1 Product of the Week! ↗",
+  title: "We're live on Product Hunt! (30% OFF)",
+  url: "https://ph.heroui.chat?utm_source=heroui.chat&utm_medium=banner",
+};
 
 export const CarbonAd: React.FC<unknown> = () => {
   const carbonRef = React.useRef(null);
@@ -39,6 +49,8 @@ export const CarbonAd: React.FC<unknown> = () => {
   }, []);
 
   useEffect(() => {
+    if (PRODUCT_HUNT_ENABLED) return;
+
     const shouldShowEthicalAds = Math.random() < EA_PROVIDER_RATIO;
 
     let loadCarbon: any = null;
@@ -79,7 +91,7 @@ export const CarbonAd: React.FC<unknown> = () => {
               setShowEthicalAds(true);
             }
           });
-        } catch (error) {
+        } catch {
           loadCarbonAds();
         }
       } else {
@@ -94,7 +106,32 @@ export const CarbonAd: React.FC<unknown> = () => {
     };
   }, [isMounted]);
 
-  if (!__PROD__) return null;
+  if (PRODUCT_HUNT_ENABLED) {
+    return (
+      <div className="px-2 not-prose hover:opacity-80 transition-[opacity] duration-200 carbon-ad-container max-h-[100px] min-h-[100px] h-[100px] m-0 p-0">
+        <a
+          className="group flex items-center flex gap-2 h-full"
+          href={PH_INFO.url}
+          rel="noopener noreferrer"
+          target="_blank"
+        >
+          <Image
+            alt="Product Hunt"
+            className="m-0 w-[80px] h-[80px] object-cover"
+            src="/product-hunt.png"
+          />
+          <div className="flex flex-col gap-0.5 pointer-events-none">
+            <div className="text-small md:text-medium font-medium no-underline">
+              {PH_INFO.title}
+            </div>
+            <div className="text-tiny md:text-small text-default-500">{PH_INFO.description}</div>
+          </div>
+        </a>
+      </div>
+    );
+  }
+
+  if (!__PROD__ || !__ENABLE_ADS__) return null;
 
   return (
     <>
@@ -108,7 +145,10 @@ export const CarbonAd: React.FC<unknown> = () => {
           style={{display: showEthicalAds ? "block" : "none"}}
         />
       </>
-      <div className="carbon-ad-container" style={{display: showEthicalAds ? "none" : "block"}}>
+      <div
+        className="carbon-ad-container max-h-[120px] p-0"
+        style={{display: showEthicalAds ? "none" : "block"}}
+      >
         <span ref={carbonRef} id="carbon-ad" />
       </div>
     </>

apps/docs/components/ads/carbon-ad/carbon-optimize.js

@@ -47,7 +47,6 @@ export default {
 
     if (!document.hidden) {
       if (typeof _carbonads !== "undefined" && isElementInViewport("#carbonads")) {
-        // eslint-disable-next-line no-undef
         _carbonads.refresh();
       }
     }

apps/docs/components/bg-grid-container.tsx

@@ -1,5 +1,6 @@
-import {ReactNode, FC} from "react";
-import {clsx} from "@nextui-org/shared-utils";
+import type {ReactNode, FC} from "react";
+
+import {cn} from "@heroui/theme";
 export interface BgGridContainerProps {
   showGradient?: boolean;
   children?: ReactNode;
@@ -13,7 +14,7 @@ export const BgGridContainer: FC<BgGridContainerProps> = ({
 }) => {
   return (
     <div
-      className={clsx(
+      className={cn(
         "relative overflow-y-hidden flex items-center border border-default-200 dark:border-default-100 px-2 py-4 rounded-lg",
         "overflow-hidden",
         // blur effect
@@ -34,7 +35,7 @@ export const BgGridContainer: FC<BgGridContainerProps> = ({
         {children}
       </div>
       {/* <div
-        className={clsx(
+        className={cn(
           "hidden md:block absolute z-[-1] inset-0 bg-grid-zinc-300/25 [mask-image:linear-gradient(0deg,rgba(255,255,255,0.1),rgba(255,255,255,0.6))]",
           "dark:bg-grid-zinc-500/25 dark:[mask-image:linear-gradient(0deg,rgba(255,255,255,0.1),rgba(255,255,255,0.5))]",
         )}

apps/docs/components/blog-post.tsx

@@ -1,56 +1,72 @@
 "use client";
 
-import {BlogPost} from "contentlayer/generated";
-import {Card, CardFooter, CardBody, CardHeader, Link, Avatar, Image} from "@nextui-org/react";
+import type {BlogPost} from "contentlayer2/generated";
+
+import {Card, CardFooter, CardBody, CardHeader, Link, Avatar, Image} from "@heroui/react";
 import Balancer from "react-wrap-balancer";
 import {format, parseISO} from "date-fns";
 import NextLink from "next/link";
 import {AnimatePresence, motion} from "framer-motion";
+import {usePostHog} from "posthog-js/react";
 
 import {useIsMounted} from "@/hooks/use-is-mounted";
 
 const BlogPostCard = (post: BlogPost) => {
   const isMounted = useIsMounted();
 
+  const posthog = usePostHog();
+
+  const handlePress = () => {
+    posthog.capture("BlogPostCard - Selection", {
+      name: post.title,
+      action: "click",
+      category: "blog",
+      data: post.url ?? "",
+    });
+  };
+
   return (
     <AnimatePresence>
       {isMounted && (
-        <motion.div
+        <motion.article
           animate={{opacity: 1, y: 0}}
           exit={{opacity: 0, y: 5}}
           initial={{opacity: 0, y: 5}}
           transition={{duration: 0.3}}
         >
           <Card
+            disableRipple
             isBlurred
             as={NextLink}
-            className="p-2 border-transparent text-start bg-white/5 dark:bg-default-400/10 backdrop-blur-lg backdrop-saturate-[1.8]"
+            className="p-2 h-full border-transparent text-start bg-white/5 dark:bg-default-400/10 backdrop-blur-lg backdrop-saturate-[1.8]"
             href={post.url}
             isPressable={!!post.url}
+            onPress={handlePress}
           >
             <CardHeader>
               <Link
                 as={NextLink}
-                className="font-semibold "
+                className="font-semibold text-foreground"
                 href={post.url}
                 size="lg"
                 underline="hover"
+                onPress={handlePress}
               >
                 <Balancer>{post.title}</Balancer>
               </Link>
             </CardHeader>
             <CardBody className="pt-0 px-2 pb-1">
-              <Image className="mb-3" src={post.image} />
-              <p className="font-normal px-1 text-default-600">{post.description}</p>
+              <Image className="mb-4" src={post.image} />
+              <p className="font-normal w-full text-default-600">{post.description}</p>
             </CardBody>
             <CardFooter className="flex justify-between items-center">
               <time className="block text-small text-default-500" dateTime={post.date}>
-                {format(parseISO(post.date), "LLLL d, yyyy")}
+                {format(parseISO(post.date), "LLLL d, yyyy")} {post?.draft && " (Draft)"}
               </time>
               <Avatar size="sm" src={post.author?.avatar} />
             </CardFooter>
           </Card>
-        </motion.div>
+        </motion.article>
       )}
     </AnimatePresence>
   );
@@ -58,7 +74,7 @@ const BlogPostCard = (post: BlogPost) => {
 
 export const BlogPostList = ({posts}: {posts: BlogPost[]}) => {
   return (
-    <div className="mt-10 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+    <div className="mt-10 grid gap-4 grid-cols-[repeat(auto-fill,minmax(300px,1fr))]">
       {posts.map((post, idx) => (
         <BlogPostCard key={idx} {...post} />
       ))}

apps/docs/components/blog/nextjs-templates.tsx

@@ -6,17 +6,17 @@ const frameworks = [
     title: "Next.js 13 (App) Template",
     isExternal: true,
     description:
-      "A Next.js 13 with app directory template pre-configured with NextUI (v2) and Tailwind CSS.",
+      "A Next.js 13 with app directory template pre-configured with HeroUI (v2) and Tailwind CSS.",
     icon: <NewNextJSIcon height={40} width={40} />,
-    href: "https://github.com/nextui-org/next-app-template",
+    href: "https://github.com/heroui-inc/next-app-template",
   },
   {
     title: "Next.js 13 (Pages) Template",
     isExternal: true,
     description:
-      "A Next.js 13 with pages directory template pre-configured with NextUI (v2) and Tailwind CSS.",
+      "A Next.js 13 with pages directory template pre-configured with HeroUI (v2) and Tailwind CSS.",
     icon: <NewNextJSIcon height={40} width={40} />,
-    href: "https://github.com/nextui-org/next-pages-template",
+    href: "https://github.com/heroui-inc/next-pages-template",
   },
 ];
 

apps/docs/components/blog/video-in-view.tsx

@@ -1,9 +1,10 @@
-/* eslint-disable jsx-a11y/media-has-caption */
 "use client";
 
+import type {FC} from "react";
+
 import {useInView} from "framer-motion";
-import {useRef, FC, useEffect, useState, useCallback} from "react";
-import {Button, cn, Spinner, Tooltip} from "@nextui-org/react";
+import {useRef, useEffect, useState, useCallback} from "react";
+import {Button, cn, Spinner, Tooltip} from "@heroui/react";
 
 import {PlayBoldIcon, PauseBoldIcon} from "@/components/icons";
 import {RotateLeftLinearIcon} from "@/components/icons";

apps/docs/components/cmdk.tsx

@@ -1,20 +1,24 @@
 /* eslint-disable jsx-a11y/no-autofocus */
 "use client";
 
+import type {FC} from "react";
+import type {ButtonProps} from "@heroui/react";
+
 import {Command} from "cmdk";
-import {useEffect, useState, FC, useMemo, useCallback, useRef} from "react";
+import {useEffect, useState, useMemo, useCallback, useRef} from "react";
 import {matchSorter} from "match-sorter";
-import {Button, ButtonProps, Kbd, Modal, ModalContent} from "@nextui-org/react";
-import {CloseIcon} from "@nextui-org/shared-icons";
+import {Button, Kbd, Modal, ModalContent} from "@heroui/react";
+import {CloseIcon} from "@heroui/shared-icons";
 import {tv} from "tailwind-variants";
 import {usePathname, useRouter} from "next/navigation";
 import MultiRef from "react-multi-ref";
-import {clsx} from "@nextui-org/shared-utils";
+import {cn} from "@heroui/theme";
 import scrollIntoView from "scroll-into-view-if-needed";
 import {isAppleDevice, isWebKit} from "@react-aria/utils";
 import {create} from "zustand";
-import {intersectionBy, isEmpty} from "lodash";
+import {isEmpty, intersectionBy} from "@heroui/shared-utils";
 import {writeStorage, useLocalStorage} from "@rehooks/local-storage";
+import {usePostHog} from "posthog-js/react";
 
 import {
   DocumentCodeBoldIcon,
@@ -59,7 +63,7 @@ const cmdk = tv({
       "h-14",
       "font-sans",
       "text-lg",
-      "outline-none",
+      "outline-solid outline-transparent",
       "rounded-none",
       "bg-transparent",
       "text-default-700",
@@ -77,7 +81,7 @@ const cmdk = tv({
       "justify-between",
       "items-center",
       "rounded-lg",
-      "shadow",
+      "shadow-xs",
       "bg-content2/50",
       "active:opacity-70",
       "cursor-pointer",
@@ -138,6 +142,8 @@ export const Cmdk: FC<{}> = () => {
 
   const {isOpen, onClose, onOpen} = useCmdkStore();
 
+  const posthog = usePostHog();
+
   const [recentSearches] = useLocalStorage<SearchResultItem[]>(RECENT_SEARCHES_KEY);
 
   const addToRecentSearches = (item: SearchResultItem) => {
@@ -153,6 +159,16 @@ export const Cmdk: FC<{}> = () => {
     }
   };
 
+  const prioritizeFirstLevelItems = (a: SearchResultItem, b: SearchResultItem) => {
+    if (a.type === "lvl1") {
+      return -1;
+    } else if (b.type === "lvl1") {
+      return 1;
+    }
+
+    return 0;
+  };
+
   const results = useMemo<SearchResultItem[]>(
     function getResults() {
       if (query.length < 2) return [];
@@ -164,23 +180,40 @@ export const Cmdk: FC<{}> = () => {
       if (words.length === 1) {
         return matchSorter(data, query, {
           keys: MATCH_KEYS,
+          sorter: (matches) => {
+            matches.sort((a, b) => prioritizeFirstLevelItems(a.item, b.item));
+
+            return matches;
+          },
         }).slice(0, MAX_RESULTS);
       }
 
       const matchesForEachWord = words.map((word) =>
         matchSorter(data, word, {
           keys: MATCH_KEYS,
+          sorter: (matches) => {
+            matches.sort((a, b) => prioritizeFirstLevelItems(a.item, b.item));
+
+            return matches;
+          },
         }),
       );
 
       const matches = intersectionBy(...matchesForEachWord, "objectID").slice(0, MAX_RESULTS);
 
+      posthog.capture("Cmdk - Search", {
+        name: "cmdk - search",
+        action: "search",
+        category: "cmdk",
+        data: {query, words, matches: matches?.map((match) => match.url).join(", ")},
+      });
+
       return matches;
     },
     [query],
   );
 
-  const items = !isEmpty(results) ? results : recentSearches ?? [];
+  const items = !isEmpty(results) ? results : (recentSearches ?? []);
 
   // Toggle the menu when ⌘K / CTRL K is pressed
   useEffect(() => {
@@ -190,10 +223,21 @@ export const Cmdk: FC<{}> = () => {
       if (e?.key?.toLowerCase() === "k" && e[hotkey]) {
         e.preventDefault();
         isOpen ? onClose() : onOpen();
+
+        posthog.capture("Cmdk - Open/Close", {
+          name: "cmdk - open/close",
+          action: "keydown",
+          category: "cmdk",
+          data: isOpen ? "close" : "open",
+        });
       }
     };
 
     document.addEventListener("keydown", onKeyDown);
+
+    return () => {
+      document.removeEventListener("keydown", onKeyDown);
+    };
   }, [isOpen]);
 
   const onItemSelect = useCallback(
@@ -201,6 +245,13 @@ export const Cmdk: FC<{}> = () => {
       onClose();
       router.push(item.url);
       addToRecentSearches(item);
+
+      posthog.capture("Cmdk - ItemSelect", {
+        name: item.content,
+        action: "click",
+        category: "cmdk",
+        data: item.url,
+      });
     },
     [router, recentSearches],
   );
@@ -272,7 +323,7 @@ export const Cmdk: FC<{}> = () => {
       return (
         <Button
           isIconOnly
-          className={clsx(
+          className={cn(
             "border data-[hover=true]:bg-content2 border-default-400 dark:border-default-100",
             className,
           )}
@@ -346,10 +397,10 @@ export const Cmdk: FC<{}> = () => {
           "mt-[20vh]",
           "border-small",
           "dark:border-default-100",
-          "supports-[backdrop-filter]:bg-background/80",
-          "dark:supports-[backdrop-filter]:bg-background/30",
-          "supports-[backdrop-filter]:backdrop-blur-md",
-          "supports-[backdrop-filter]:backdrop-saturate-150",
+          "supports-backdrop-filter:bg-background/80",
+          "dark:supports-backdrop-filter:bg-background/30",
+          "supports-backdrop-filter:backdrop-blur-md",
+          "supports-backdrop-filter:backdrop-saturate-150",
         ],
         backdrop: ["bg-black/80"],
       }}
@@ -384,8 +435,8 @@ export const Cmdk: FC<{}> = () => {
             </Kbd>
           </div>
           <Command.List ref={listRef} className={slots.list()} role="listbox">
-            {query.length > 0 && (
-              <Command.Empty>
+            <Command.Empty>
+              {query.length > 0 && (
                 <div className={slots.emptyWrapper()}>
                   <div>
                     <p>No results for &quot;{query}&quot;</p>
@@ -398,8 +449,8 @@ export const Cmdk: FC<{}> = () => {
                     )}
                   </div>
                 </div>
-              </Command.Empty>
-            )}
+              )}
+            </Command.Empty>
 
             {isEmpty(query) &&
               (isEmpty(recentSearches) ? (

apps/docs/components/code-window/code-block.tsx

@@ -6,9 +6,9 @@ import jsx from "refractor/lang/jsx";
 import bash from "refractor/lang/bash";
 import css from "refractor/lang/css";
 import diff from "refractor/lang/diff";
-import hastToHtml from "hast-util-to-html";
+import {toHtml} from "hast-util-to-html";
 import rangeParser from "parse-numeric-range";
-import {clsx} from "@nextui-org/shared-utils";
+import {cn} from "@heroui/theme";
 
 import {Pre} from "./pre";
 import {WindowActions} from "./window-actions";
@@ -39,7 +39,7 @@ export type CodeBlockProps = PreProps & {
  * recursively get all text nodes as an array for a given element
  */
 function getTextNodes(node: any): any[] {
-  let childTextNodes = [];
+  let childTextNodes: React.ReactNode[] = [];
 
   if (!node.hasChildNodes()) return [];
 
@@ -108,9 +108,9 @@ function CodeTypewriter({value, className, css, ...props}: any) {
   return (
     <Pre className={className} css={css} {...props}>
       <code
+        dangerouslySetInnerHTML={{__html: value}}
         ref={wrapperRef}
         className={className}
-        dangerouslySetInnerHTML={{__html: value}}
         style={{opacity: 0}}
       />
     </Pre>
@@ -137,11 +137,11 @@ const CodeBlock = React.forwardRef<HTMLPreElement, CodeBlockProps>((_props, forw
   result = highlightWord(result);
 
   // convert to html
-  result = hastToHtml(result);
+  result = toHtml(result);
 
   // TODO reset theme
   const classes = `language-${language}`;
-  const codeClasses = clsx("absolute w-full px-4 pb-6", showWindowIcons ? "top-10" : "top-0");
+  const codeClasses = cn("absolute w-full px-4 pb-6", showWindowIcons ? "top-10" : "top-0");
 
   if (mode === "typewriter") {
     return <CodeTypewriter className={classes} css={css} value={result} {...props} />;
@@ -150,16 +150,16 @@ const CodeBlock = React.forwardRef<HTMLPreElement, CodeBlockProps>((_props, forw
   return (
     <Pre
       ref={forwardedRef}
-      className={clsx("code-block", classes, className)}
+      className={cn("code-block", classes, className)}
       data-line-numbers={showLineNumbers}
       {...props}
     >
       {showWindowIcons && <WindowActions title={title} />}
-      <code className={clsx(classes, codeClasses)} dangerouslySetInnerHTML={{__html: result}} />
+      <code dangerouslySetInnerHTML={{__html: result}} className={cn(classes, codeClasses)} />
     </Pre>
   );
 });
 
-CodeBlock.displayName = "NextUI - CodeBlock";
+CodeBlock.displayName = "HeroUI - CodeBlock";
 
 export default CodeBlock;

apps/docs/components/code-window/code-window.tsx

@@ -1,9 +1,11 @@
 "use client";
 // Inspired by https://github.dev/modulz/stitches-site code demo
+import type {CodeBlockProps} from "./code-block";
+
 import React from "react";
 import rangeParser from "parse-numeric-range";
 
-import CodeBlock, {CodeBlockProps} from "./code-block";
+import CodeBlock from "./code-block";
 
 import {CopyButton} from "@/components";
 
@@ -90,7 +92,7 @@ export const CodeWindow: React.FC<CodeWindowProps> = ({highlightLines, showCopy,
   return (
     <div className="relative">
       <CodeBlock ref={wrapperRef} {...props} />
-      {showCopy && <CopyButton value={props.value} />}
+      {showCopy && <CopyButton className="top-2 absolute right-2" value={props.value} />}
     </div>
   );
 };

apps/docs/components/code-window/pre.tsx

@@ -1,5 +1,5 @@
 import {forwardRef} from "react";
-import {clsx} from "@nextui-org/shared-utils";
+import {cn} from "@heroui/theme";
 
 export interface PreProps {
   className?: string;
@@ -14,7 +14,7 @@ export const Pre = forwardRef<HTMLPreElement, PreProps>(
     return (
       <pre
         ref={forwardedRef}
-        className={clsx(
+        className={cn(
           "relative w-full h-full box-border shadow-md text-white/80 leading-5 whitespace-pre text-sm font-mono bg-code-background rounded-xl [&>code]:transition-transform",
           scrollClass,
           className,

apps/docs/components/code-window/window-actions.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import {tv} from "tailwind-variants";
-import {clsx} from "@nextui-org/shared-utils";
+import {cn} from "@heroui/theme";
 
 export type WindowActionsProps = {
   title?: string;
@@ -21,7 +21,7 @@ const windowIconStyles = tv({
 export const WindowActions: React.FC<WindowActionsProps> = ({title, className, ...props}) => {
   return (
     <div
-      className={clsx(
+      className={cn(
         "flex items-center sticky top-0 left-0 px-4 z-10 justify-between h-8 bg-code-background w-full",
         className,
       )}

apps/docs/components/copy-button.tsx

@@ -1,6 +1,10 @@
-import {FC} from "react";
-import {Button, ButtonProps} from "@nextui-org/react";
-import {useClipboard} from "@nextui-org/use-clipboard";
+import type {ButtonProps} from "@heroui/react";
+
+import {useClipboard} from "@heroui/use-clipboard";
+import {memo} from "react";
+import {Tooltip} from "@heroui/react";
+
+import {PreviewButton} from "./preview-button";
 
 import {CheckLinearIcon, CopyLinearIcon} from "@/components/icons";
 
@@ -8,32 +12,38 @@ export interface CopyButtonProps extends ButtonProps {
   value?: string;
 }
 
-export const CopyButton: FC<CopyButtonProps> = ({value, ...buttonProps}) => {
+export const CopyButton = memo<CopyButtonProps>(({value, className, ...buttonProps}) => {
   const {copy, copied} = useClipboard();
 
+  const icon = copied ? (
+    <CheckLinearIcon
+      className="opacity-0 scale-50 data-[visible=true]:opacity-100 data-[visible=true]:scale-100 transition-transform-opacity"
+      data-visible={copied}
+      size={16}
+    />
+  ) : (
+    <CopyLinearIcon
+      className="opacity-0 scale-50 data-[visible=true]:opacity-100 data-[visible=true]:scale-100 transition-transform-opacity"
+      data-visible={!copied}
+      size={16}
+    />
+  );
+
   const handleCopy = () => {
     copy(value);
   };
 
   return (
-    <Button
-      isIconOnly
-      className="absolute z-50 right-3 top-8 border-1 border-transparent bg-transparent before:bg-white/10 before:content-[''] before:block before:z-[-1] before:absolute before:inset-0 before:backdrop-blur-md before:backdrop-saturate-100 before:rounded-lg"
-      size="sm"
-      variant="bordered"
-      onPress={handleCopy}
-      {...buttonProps}
+    <Tooltip
+      key={copied ? "copied" : "copy"}
+      className="text-xs px-2"
+      closeDelay={0}
+      content={copied ? "Copied!" : "Copy"}
+      radius="md"
     >
-      <CheckLinearIcon
-        className="absolute opacity-0 scale-50 text-zinc-300 data-[visible=true]:opacity-100 data-[visible=true]:scale-100 transition-transform-opacity"
-        data-visible={copied}
-        size={16}
-      />
-      <CopyLinearIcon
-        className="absolute opacity-0 scale-50 text-zinc-300 data-[visible=true]:opacity-100 data-[visible=true]:scale-100 transition-transform-opacity"
-        data-visible={!copied}
-        size={16}
-      />
-    </Button>
+      <PreviewButton className={className} icon={icon} onPress={handleCopy} {...buttonProps} />
+    </Tooltip>
   );
-};
+});
+
+CopyButton.displayName = "CopyButton";

apps/docs/components/demo-code-modal.tsx

@@ -1,18 +1,19 @@
 "use client";
 
-import {FC, useState} from "react";
+import type {FC} from "react";
+
+import {useState} from "react";
 import {
   Modal,
   Button,
   ModalContent,
   ModalHeader,
-  Link as NextUILink,
+  Link as HeroUILink,
   ModalBody,
   ModalFooter,
   Skeleton,
-} from "@nextui-org/react";
+} from "@heroui/react";
 import Link from "next/link";
-import {toLower} from "lodash";
 
 import {CodeWindow} from "@/components/code-window";
 import {useIsMobile} from "@/hooks/use-media-query";
@@ -30,14 +31,14 @@ export const DemoCodeModal: FC<DemoCodeModalProps> = ({isOpen, code, title, subt
 
   const isMobile = useIsMobile();
 
-  const lowerTitle = toLower(title);
-  const fileName = `${toLower(lowerTitle)}.tsx`;
+  const lowerTitle = title.toLowerCase();
+  const fileName = `${lowerTitle}.tsx`;
 
   return (
     <Modal
       classNames={{
-        backdrop: "z-[100002]", // to appear above the navbar
-        wrapper: "z-[100003]", // to appear above the backdrop
+        backdrop: "z-100002", // to appear above the navbar
+        wrapper: "z-100003", // to appear above the backdrop
       }}
       isOpen={isOpen}
       motionProps={{
@@ -57,9 +58,9 @@ export const DemoCodeModal: FC<DemoCodeModalProps> = ({isOpen, code, title, subt
               <>
                 This is an example of how to use the {lowerTitle} component, for more information
                 please visit the&nbsp;
-                <NextUILink as={Link} href={`/docs/${lowerTitle}`}>
+                <HeroUILink as={Link} href={`/docs/components/${lowerTitle}`}>
                   {lowerTitle}
-                </NextUILink>
+                </HeroUILink>
                 &nbsp;docs.
               </>
             )}
@@ -70,7 +71,7 @@ export const DemoCodeModal: FC<DemoCodeModalProps> = ({isOpen, code, title, subt
             <CodeWindow
               showCopy
               showWindowIcons
-              className="min-h-[320px] !h-[60vh] max-h-full"
+              className="min-h-[320px] h-[60vh]! max-h-full"
               language="jsx"
               title={fileName}
               value={code}

apps/docs/components/demos/custom-button.tsx

@@ -1,10 +1,12 @@
 "use client";
 
 import {useRef} from "react";
-import {Button} from "@nextui-org/react";
+import {Button} from "@heroui/react";
+import {usePostHog} from "posthog-js/react";
 
 export const CustomButton = () => {
   const buttonRef = useRef<HTMLButtonElement | null>(null);
+  const posthog = usePostHog();
 
   const handleConfetti = async () => {
     const {clientWidth, clientHeight} = document.documentElement;
@@ -26,13 +28,18 @@ export const CustomButton = () => {
         x: targetCenterX / clientWidth,
       },
     });
+
+    posthog.capture("LandingPage - Confetti Button", {
+      action: "press",
+      category: "landing-page",
+    });
   };
 
   return (
     <Button
       ref={buttonRef}
       disableRipple
-      className="relative overflow-visible rounded-full hover:-translate-y-1 px-12 shadow-xl bg-background/30 after:content-[''] after:absolute after:rounded-full after:inset-0 after:bg-background/40 after:z-[-1] after:transition after:!duration-500 hover:after:scale-150 hover:after:opacity-0"
+      className="relative overflow-visible rounded-full hover:-translate-y-1 px-12 shadow-xl bg-background/30 after:content-[''] after:absolute after:rounded-full after:inset-0 after:bg-background/40 after:z-[-1] after:transition after:duration-500! hover:after:scale-150 hover:after:opacity-0"
       size="lg"
       onPress={handleConfetti}
     >

apps/docs/components/demos/music-player.tsx

@@ -1,8 +1,11 @@
 "use client";
 
-import {Card, CardBody, Button, Image, Progress, CardProps} from "@nextui-org/react";
-import {useState, FC} from "react";
-import {clsx} from "@nextui-org/shared-utils";
+import type {CardProps} from "@heroui/react";
+import type {FC} from "react";
+
+import {Card, CardBody, Button, Image, Slider} from "@heroui/react";
+import {useState} from "react";
+import {cn} from "@heroui/theme";
 import NextImage from "next/image";
 
 import {
@@ -22,35 +25,34 @@ export const MusicPlayer: FC<MusicPlayerProps> = ({className, ...otherProps}) =>
   return (
     <Card
       isBlurred
-      className={clsx("border-none bg-background/60 dark:bg-default-100/50", className)}
+      className={cn("border-none bg-background/60 dark:bg-default-100/50", className)}
       shadow="sm"
       {...otherProps}
     >
       <CardBody>
-        <div className="grid grid-cols-6 md:grid-cols-12 gap-6 md:gap-4 items-center justify-center">
+        <div className="md:max-h-[200px] grid grid-cols-6 md:grid-cols-12 gap-6 md:gap-4 items-center justify-center">
           <div className="relative col-span-6 md:col-span-4">
             <Image
               alt="Album cover"
               as={NextImage}
               className="object-cover"
-              height={300}
+              height={160}
               shadow="md"
               src="/images/album-cover.png"
               width={240}
             />
           </div>
-
           <div className="flex flex-col col-span-6 md:col-span-8">
             <div className="flex justify-between items-start">
               <div className="flex flex-col gap-0">
-                <p className="font-semibold text-foreground/90">Daily Mix</p>
-                <p className="text-sm text-foreground/80">12 Tracks</p>
+                <p className="text-sm font-semibold text-foreground">Daily Mix</p>
+                <p className="text-xs text-foreground/80">12 Tracks</p>
                 <p className="text-lg font-medium mt-2">Frontend Radio</p>
               </div>
               <Button
                 isIconOnly
                 aria-label="Like"
-                className="text-default-900/60 data-[hover]:bg-foreground/10 -translate-y-2 translate-x-2"
+                className="text-default-900/60 data-hover:bg-foreground/10 -translate-y-2 translate-x-2"
                 radius="full"
                 variant="light"
                 onPress={() => setLiked((v) => !v)}
@@ -63,15 +65,15 @@ export const MusicPlayer: FC<MusicPlayerProps> = ({className, ...otherProps}) =>
             </div>
 
             <div className="flex flex-col mt-3 gap-1">
-              <Progress
+              <Slider
                 aria-label="Music progress"
                 classNames={{
-                  indicator: "bg-default-800 dark:bg-white",
                   track: "bg-default-500/30",
+                  thumb: "w-2 h-2 after:w-2 after:h-2 after:bg-foreground",
                 }}
-                color="default"
+                color="foreground"
+                defaultValue={33}
                 size="sm"
-                value={33}
               />
               <div className="flex justify-between">
                 <p className="text-sm">1:23</p>
@@ -83,7 +85,7 @@ export const MusicPlayer: FC<MusicPlayerProps> = ({className, ...otherProps}) =>
               <Button
                 isIconOnly
                 aria-label="Repeat"
-                className="data-[hover]:bg-foreground/10"
+                className="data-hover:bg-foreground/10"
                 radius="full"
                 variant="light"
               >
@@ -92,7 +94,7 @@ export const MusicPlayer: FC<MusicPlayerProps> = ({className, ...otherProps}) =>
               <Button
                 isIconOnly
                 aria-label="Previous"
-                className="data-[hover]:bg-foreground/10"
+                className="data-hover:bg-foreground/10"
                 radius="full"
                 variant="light"
               >
@@ -101,7 +103,7 @@ export const MusicPlayer: FC<MusicPlayerProps> = ({className, ...otherProps}) =>
               <Button
                 isIconOnly
                 aria-label="Play"
-                className="w-auto h-auto data-[hover]:bg-foreground/10"
+                className="w-auto h-auto data-hover:bg-foreground/10"
                 radius="full"
                 variant="light"
               >
@@ -110,7 +112,7 @@ export const MusicPlayer: FC<MusicPlayerProps> = ({className, ...otherProps}) =>
               <Button
                 isIconOnly
                 aria-label="Next"
-                className="data-[hover]:bg-foreground/10"
+                className="data-hover:bg-foreground/10"
                 radius="full"
                 variant="light"
               >
@@ -119,7 +121,7 @@ export const MusicPlayer: FC<MusicPlayerProps> = ({className, ...otherProps}) =>
               <Button
                 isIconOnly
                 aria-label="Shuffle"
-                className="data-[hover]:bg-foreground/10"
+                className="data-hover:bg-foreground/10"
                 radius="full"
                 variant="light"
               >

apps/docs/components/demos/speed-progress.tsx

@@ -1,11 +1,7 @@
-import {
-  tv,
-  VariantProps,
-  CircularProgress,
-  CircularProgressProps,
-  circularProgress,
-} from "@nextui-org/react";
-import {FC} from "react";
+import type {VariantProps, CircularProgressProps} from "@heroui/react";
+import type {FC} from "react";
+
+import {tv, CircularProgress, circularProgress} from "@heroui/react";
 
 const speedProgress = tv({
   extend: circularProgress,

apps/docs/components/demos/user-twitter-card.tsx

@@ -1,24 +1,22 @@
 "use client";
 
-import {useState, FC} from "react";
-import {Card, CardHeader, Button, Avatar, CardBody, CardFooter} from "@nextui-org/react";
-import {clsx} from "@nextui-org/shared-utils";
-import NextImage from "next/image";
+import {useState} from "react";
+import {Card, CardHeader, Button, Avatar, CardBody, CardFooter} from "@heroui/react";
+import {cn} from "@heroui/theme";
 
 interface UserTwitterCardProps {
   className?: string;
 }
 
-export const UserTwitterCard: FC<UserTwitterCardProps> = ({className}) => {
+export const UserTwitterCard = ({className}: UserTwitterCardProps) => {
   const [isFollowed, setIsFollowed] = useState(false);
 
   return (
-    <Card className={clsx("max-w-[300px]", className)}>
+    <Card className={cn("max-w-[300px]", className)}>
       <CardHeader className="justify-between">
         <div className="flex gap-5">
           <Avatar
             isBordered
-            ImgComponent={NextImage}
             alt="Zoey Lang"
             imgProps={{
               width: 40,
@@ -46,7 +44,7 @@ export const UserTwitterCard: FC<UserTwitterCardProps> = ({className}) => {
       </CardHeader>
       <CardBody className="px-3 py-0">
         <p className="text-sm pl-px text-default-400">
-          Full-stack developer, @getnextui lover she/her&nbsp;
+          Full-stack developer, @hero_ui lover she/her&nbsp;
           <span aria-label="confetti" role="img">
             🎉
           </span>

apps/docs/components/docs/components/blockquote.tsx

@@ -1,7 +1,9 @@
 "use client";
 
-import {FC} from "react";
-import {tv, VariantProps} from "tailwind-variants";
+import type {FC} from "react";
+import type {VariantProps} from "tailwind-variants";
+
+import {tv} from "tailwind-variants";
 
 const blockquoteStyles = tv({
   base: "border px-4 bg-default-50 my-6 py-3 rounded-xl [&>p]:m-0",

apps/docs/components/docs/components/code-demo/code-demo.tsx

@@ -1,27 +1,29 @@
 "use client";
 
+import type {UseCodeDemoProps} from "./use-code-demo";
+import type {WindowResizerProps} from "./window-resizer";
+import type {GradientBoxProps} from "@/components/gradient-box";
+
 import React, {useCallback, useMemo, useRef} from "react";
 import dynamic from "next/dynamic";
-import {Skeleton, Tab, Tabs} from "@nextui-org/react";
+import {Skeleton, Tab, Tabs} from "@heroui/react";
 import {useInView} from "framer-motion";
 
-import {useCodeDemo, UseCodeDemoProps} from "./use-code-demo";
-import WindowResizer, {WindowResizerProps} from "./window-resizer";
-
-import {GradientBoxProps} from "@/components/gradient-box";
+import {useCodeDemo} from "./use-code-demo";
+import WindowResizer from "./window-resizer";
 
 const DynamicReactLiveDemo = dynamic(
   () => import("./react-live-demo").then((m) => m.ReactLiveDemo),
   {
     ssr: false,
-    // eslint-disable-next-line react/display-name
+
     loading: () => <Skeleton className="w-full h-24 rounded-xl" />,
   },
 );
 
 const DynamicSandpack = dynamic(() => import("../../../sandpack").then((m) => m.Sandpack), {
   ssr: false,
-  // eslint-disable-next-line react/display-name
+
   loading: () => <Skeleton className="w-full h-32 rounded-xl" />,
 });
 
@@ -31,15 +33,15 @@ interface CodeDemoProps extends UseCodeDemoProps, WindowResizerProps {
   showSandpackPreview?: boolean;
   initialEditorOpen?: boolean;
   enableResize?: boolean;
-  showTabs?: boolean;
   showPreview?: boolean;
+  hideWindowActions?: boolean;
   showOpenInCodeSandbox?: boolean;
   isPreviewCentered?: boolean;
   resizeEnabled?: boolean;
+  typescriptStrict?: boolean;
   displayMode?: "always" | "visible";
   isGradientBox?: boolean;
   gradientColor?: GradientBoxProps["color"];
-  defaultExpanded?: boolean;
   previewHeight?: string | number;
   overflow?: "auto" | "visible" | "hidden";
   className?: string;
@@ -51,16 +53,18 @@ export const CodeDemo: React.FC<CodeDemoProps> = ({
   showEditor = true,
   showPreview = true,
   asIframe = false,
+  showTabs = true,
   resizeEnabled = true,
+  hideWindowActions = false,
   showSandpackPreview = false,
   isPreviewCentered = false,
-  showOpenInCodeSandbox,
+  // when false .js files will be used
+  typescriptStrict = false,
+  showOpenInCodeSandbox = true,
   isGradientBox = false,
-  defaultExpanded = false,
   previewHeight = "auto",
   overflow = "visible",
   displayMode = "always",
-  showTabs = true,
   gradientColor,
   highlightedLines,
   iframeInitialWidth,
@@ -96,6 +100,7 @@ export const CodeDemo: React.FC<CodeDemoProps> = ({
 
     const content = asIframe ? (
       <WindowResizer
+        hideWindowActions={hideWindowActions}
         iframeHeight={previewHeight}
         iframeInitialWidth={iframeInitialWidth}
         iframeSrc={iframeSrc}
@@ -106,6 +111,7 @@ export const CodeDemo: React.FC<CodeDemoProps> = ({
       <DynamicReactLiveDemo
         className={className}
         code={code}
+        files={files}
         gradientColor={gradientColor}
         height={previewHeight}
         isCentered={isPreviewCentered}
@@ -121,6 +127,7 @@ export const CodeDemo: React.FC<CodeDemoProps> = ({
     isGradientBox,
     gradientColor,
     previewHeight,
+    hideWindowActions,
     asIframe,
     showPreview,
     isInView,
@@ -132,12 +139,12 @@ export const CodeDemo: React.FC<CodeDemoProps> = ({
 
     const content = (
       <DynamicSandpack
-        defaultExpanded={defaultExpanded}
         files={files}
         highlightedLines={highlightedLines}
         showEditor={showEditor}
-        showOpenInCodeSandbox={showOpenInCodeSandbox || showPreview}
+        showOpenInCodeSandbox={showOpenInCodeSandbox}
         showPreview={showSandpackPreview}
+        typescriptStrict={typescriptStrict}
       />
     );
 
@@ -148,7 +155,6 @@ export const CodeDemo: React.FC<CodeDemoProps> = ({
     isInView,
     files,
     highlightedLines,
-    defaultExpanded,
     showPreview,
     showSandpackPreview,
     showOpenInCodeSandbox,
@@ -163,23 +169,25 @@ export const CodeDemo: React.FC<CodeDemoProps> = ({
   }, [showTabs, showPreview, showEditor]);
 
   return (
-    <div ref={ref} className="flex flex-col gap-2">
+    <div ref={ref} className="flex flex-col gap-2 relative">
       {shouldRenderTabs ? (
-        <Tabs
-          disableAnimation
-          aria-label="Code demo tabs"
-          classNames={{
-            panel: "pt-0",
-          }}
-          variant="underlined"
-        >
-          <Tab key="preview" title="Preview">
-            {previewContent}
-          </Tab>
-          <Tab key="code" title="Code">
-            {editorContent}
-          </Tab>
-        </Tabs>
+        <>
+          <Tabs
+            disableAnimation
+            aria-label="Code demo tabs"
+            classNames={{
+              panel: "pt-0",
+            }}
+            variant="underlined"
+          >
+            <Tab key="preview" title="Preview">
+              {previewContent}
+            </Tab>
+            <Tab key="code" title="Code">
+              {editorContent}
+            </Tab>
+          </Tabs>
+        </>
       ) : (
         <>
           {previewContent}

apps/docs/components/docs/components/code-demo/parse-dependencies.ts

@@ -0,0 +1,57 @@
+import React from "react";
+import * as HeroUI from "@heroui/react";
+
+const importRegex = /^(import\s+(?!type\s+\{)[\s\S]*?;)/gm;
+
+export const parseDependencies = (content: string) => {
+  const dependencies: {name: string; version: string}[] = [];
+
+  // by default, react and heroui packages are installed already
+  const installedPackages = {
+    ...React,
+    ...HeroUI,
+  } as Record<string, unknown>;
+
+  // create a map of installed packages
+  const imports = Object.keys(installedPackages).reduce(
+    (acc, key) => {
+      acc[key] = `${key}`;
+
+      return acc;
+    },
+    {React: "React"} as Record<string, string>,
+  );
+
+  // match all imports from the file content
+  content.match(importRegex)?.forEach((match) => {
+    // check if imported component is in default installed packages
+    const componentName = match.match(/\w+/g)?.[1] || "";
+    const matchingImport = imports[componentName];
+
+    if (matchingImport) {
+      return "";
+    }
+
+    if (match.includes("./") || match.includes("../")) {
+      return "";
+    }
+
+    const packageName = match.match(/['"]([^'"]+)['"]/)?.[1];
+
+    if (!packageName) {
+      return;
+    }
+
+    dependencies.push({
+      name: packageName,
+      version: fixedVersions[packageName] || "latest",
+    });
+  });
+
+  return dependencies;
+};
+
+const fixedVersions = {
+  "@internationalized/date": "3.10.1",
+  "@react-aria/i18n": "3.12.14",
+};

apps/docs/components/docs/components/code-demo/react-live-demo.tsx

@@ -1,13 +1,23 @@
+import type {SandpackFiles} from "@codesandbox/sandpack-react/types";
+import type {GradientBoxProps} from "@/components/gradient-box";
+
 import React from "react";
 import {LivePreview, LiveProvider, LiveError} from "react-live";
-import {clsx} from "@nextui-org/shared-utils";
-import * as Components from "@nextui-org/react";
+import {cn} from "@heroui/theme";
+import * as HeroUI from "@heroui/react";
+import * as intlDateUtils from "@internationalized/date";
+import * as reactAriaI18n from "@react-aria/i18n";
+import * as reactHookFormBase from "react-hook-form";
 
 import {BgGridContainer} from "@/components/bg-grid-container";
-import {GradientBox, GradientBoxProps} from "@/components/gradient-box";
+import {GradientBox} from "@/components/gradient-box";
+import {CopyButton} from "@/components/copy-button";
+import {StackblitzButton} from "@/components/stackblitz-button";
+import {PreviewButton} from "@/components/preview-button";
 
 export interface ReactLiveDemoProps {
   code: string;
+  files: SandpackFiles;
   noInline?: boolean;
   height?: string | number;
   isCentered?: boolean;
@@ -15,25 +25,55 @@ export interface ReactLiveDemoProps {
   className?: string;
   gradientColor?: GradientBoxProps["color"];
   overflow?: "auto" | "visible" | "hidden";
+  typescriptStrict?: boolean;
 }
 
+// 🚨 Do not pass react-hook-form to scope, it will break the live preview since
+// it also has a "Form" component that will override the one from @heroui/react
+const reactHookForm = {
+  useForm: reactHookFormBase.useForm,
+  Controller: reactHookFormBase.Controller,
+};
+
 export const scope = {
-  ...Components,
+  React,
+  ...HeroUI,
+  ...intlDateUtils,
+  ...reactAriaI18n,
+  ...reactHookForm,
 } as Record<string, unknown>;
 
+const DEFAULT_FILE = "/App.jsx";
+
 export const ReactLiveDemo: React.FC<ReactLiveDemoProps> = ({
   code,
+  files,
   isGradientBox,
   gradientColor = "orange",
   isCentered = false,
   height,
   className,
   noInline,
+  typescriptStrict = false,
 }) => {
   const content = (
     <>
+      {files?.[DEFAULT_FILE] && (
+        <div className="absolute top-[-26px] right-[3px] z-50 flex items-center">
+          <StackblitzButton
+            button={<PreviewButton icon={undefined} />}
+            className="before:hidden opacity-0 group-hover/code-demo:opacity-100 transition-opacity text-zinc-400"
+            files={files}
+            typescriptStrict={typescriptStrict}
+          />
+          <CopyButton
+            className="before:hidden opacity-0 group-hover/code-demo:opacity-100 transition-opacity text-zinc-400"
+            value={files?.[DEFAULT_FILE] as string}
+          />
+        </div>
+      )}
       <LivePreview
-        className={clsx("live-preview flex h-full w-full not-prose", {
+        className={cn("live-preview flex h-full w-full not-prose ", {
           "justify-center items-center": isCentered,
         })}
         style={{height}}
@@ -47,19 +87,19 @@ export const ReactLiveDemo: React.FC<ReactLiveDemoProps> = ({
       {isGradientBox ? (
         <GradientBox
           isCentered
-          className={clsx(
+          className={cn(
             className,
             "relative overflow-y-hidden flex items-center border border-default-200 dark:border-default-100 px-2 py-4 rounded-lg overflow-hidden",
           )}
           color={gradientColor}
           to="top-right"
         >
-          <div className="max-w-full py-4 px-2 w-full h-full scrollbar-hide overflow-x-scroll">
+          <div className="group/code-demo max-w-full py-4 px-2 w-full h-full scrollbar-hide overflow-x-scroll">
             {content}
           </div>
         </GradientBox>
       ) : (
-        <BgGridContainer className={className}>{content}</BgGridContainer>
+        <BgGridContainer className={cn(className, "group/code-demo")}>{content}</BgGridContainer>
       )}
     </LiveProvider>
   );

apps/docs/components/docs/components/code-demo/use-code-demo.ts

@@ -1,9 +1,9 @@
-import {FileCode} from "./types";
+import type {FileCode} from "./types";
+import type {SandpackProps} from "@/components/sandpack";
+
 import {scope} from "./react-live-demo";
 import {transformCode, joinCode, getFileName} from "./utils";
 
-import {SandpackProps} from "@/components/sandpack";
-
 export interface UseCodeDemoProps extends SandpackProps {
   code?: string;
 }

apps/docs/components/docs/components/code-demo/utils.ts

@@ -1,17 +1,19 @@
-import {get} from "lodash";
+import type {FileCode} from "./types";
 
-import {FileCode} from "./types";
-
-const importRegex = /^(import)\s(?!type(of\s|\s)(?!from)).*?$/gm;
+const importRegex = /^(import\s+(?!type\s+\{)[\s\S]*?;)/gm;
 
 const exportDefaultRegex = /export\s+default\s+function\s+\w+\s*\(\s*\)\s*\{/;
 
-export const transformCode = (code: string, imports = {}, compName = "App") => {
+export const transformCode = (
+  code: string,
+  imports: {[key: string]: any} = {},
+  compName = "App",
+) => {
   let cleanedCode = code
     .replace(importRegex, (match) => {
-      // get component name from the match ex. "import { Table } from '@nextui-org/react'"
+      // get component name from the match ex. "import { Table } from '@heroui/react'"
       const componentName = match.match(/\w+/g)?.[1] || "";
-      const matchingImport = get(imports, componentName);
+      const matchingImport = imports[componentName];
 
       if (matchingImport) {
         // remove the matching import
@@ -29,7 +31,7 @@ export const transformCode = (code: string, imports = {}, compName = "App") => {
       // replace match with const Name = () => (
       return `const ${compName} = () => {`;
     })
-    .replace("export", "");
+    .replace(/export/g, "");
 
   // add render(<App/>) to cleanedCode if has const App = () => {
   if (cleanedCode.includes(`const App = () => {`)) {
@@ -53,3 +55,20 @@ export const joinCode = (filesCode: FileCode[]) => {
 export const getFileName = (filePath: string) => {
   return filePath?.split(".")?.[0]?.replace(/\W/g, "");
 };
+
+export const toPascalCase = (str: string) => {
+  const cleanStr = str.replace(/[^a-zA-Z0-9\s]/g, "");
+
+  return cleanStr
+    .split(/\s+/)
+    .map((word) => {
+      return word.charAt(0).toUpperCase() + word.slice(1).toLowerCase();
+    })
+    .join("");
+};
+
+export const toKebabCase = (str: string) => {
+  const cleanStr = str.replace(/[^a-zA-Z0-9\s]/g, "");
+
+  return cleanStr.toLowerCase().split(/\s+/).join("-");
+};

apps/docs/components/docs/components/code-demo/window-resizer.tsx

@@ -49,6 +49,7 @@ const resizer = tv({
 
 export interface WindowResizerProps {
   resizeEnabled?: boolean;
+  hideWindowActions?: boolean;
   iframeHeight?: string | number;
   iframeMinWidth?: number;
   iframeSrc?: string;
@@ -70,6 +71,7 @@ const WindowResizer: React.FC<WindowResizerProps> = (props) => {
     iframeSrc,
     iframeTitle,
     resizeEnabled,
+    hideWindowActions = false,
     iframeHeight: height = "420px",
     iframeInitialWidth,
     iframeMinWidth: minWidth = MIN_WIDTH,
@@ -120,7 +122,7 @@ const WindowResizer: React.FC<WindowResizerProps> = (props) => {
           width: isMobile ? "100%" : browserWidth,
         }}
       >
-        <WindowActions className="bg-default-100 dark:bg-default-50" />
+        {!hideWindowActions && <WindowActions className="bg-default-100 dark:bg-default-50" />}
         <motion.iframe ref={iframeRef} className={iframe()} src={iframeSrc} title={iframeTitle} />
       </motion.div>
       {resizeEnabled && (

apps/docs/components/docs/components/codeblock.tsx

@@ -1,6 +1,13 @@
-import React, {forwardRef} from "react";
-import {clsx, getUniqueID} from "@nextui-org/shared-utils";
-import BaseHighlight, {Language, PrismTheme, defaultProps} from "prism-react-renderer";
+"use client";
+
+import type {Language, PrismTheme} from "prism-react-renderer";
+
+import {useIntersectionObserver} from "usehooks-ts";
+import React, {forwardRef, useEffect} from "react";
+import {dataAttr, getUniqueID} from "@heroui/shared-utils";
+import BaseHighlight, {defaultProps} from "prism-react-renderer";
+import {debounce, omit} from "@heroui/shared-utils";
+import {cn} from "@heroui/react";
 
 import defaultTheme from "@/libs/prism-theme";
 
@@ -9,13 +16,26 @@ interface CodeblockProps {
   codeString: string;
   metastring?: string;
   theme?: PrismTheme;
+  children?: React.ReactNode;
   showLines?: boolean;
   removeIndent?: boolean;
   hideScrollBar?: boolean;
   className?: string;
-  children?: (props: any) => React.ReactNode;
 }
 
+type HighlightStyle = "inserted" | "deleted" | undefined;
+
+const cliCommands = [/^init$/, /^add$/, /^upgrade$/, /^remove$/, /^list$/, /^env$/, /^doctor$/];
+
+const highlightStyleToken = [
+  "bun",
+  /nextui\s\w+(?=\s?)/,
+  /^nextui$/,
+  /heroui\s\w+(?=\s?)/,
+  /^heroui$/,
+  "Usage",
+  ...cliCommands,
+];
 const RE = /{([\d,-]+)}/;
 
 const calculateLinesToHighlight = (meta?: string) => {
@@ -41,6 +61,147 @@ const calculateLinesToHighlight = (meta?: string) => {
   };
 };
 
+const calculateHeight = (codeString: string) => {
+  const lines = codeString.split("\n").length;
+
+  return lines * 24;
+};
+
+const CodeBlockHighlight = ({
+  codeString,
+  language,
+  codeLang,
+  theme,
+  showLines,
+  removeIndent,
+  hideScrollBar,
+  preRef,
+  isMultiLine,
+  shouldHighlightLine,
+  highlightStyle,
+  className: classNameProp,
+  ...props
+}: CodeblockProps & {
+  codeLang: Language;
+  isMultiLine: boolean;
+  shouldHighlightLine: (index: number) => boolean;
+  highlightStyle: HighlightStyle[];
+  preRef: React.Ref<HTMLElement>;
+}) => {
+  const height = calculateHeight(codeString);
+
+  const [intersectionRef, isVisible] = useIntersectionObserver({
+    threshold: 0,
+  });
+
+  return (
+    <div
+      ref={intersectionRef}
+      style={{
+        height: isVisible ? "auto" : `${height}px`,
+        // due to display: contents on the scrollable child element, this div will also scroll
+        // this causes the intersection observer to trigger if scrolled far enough horizontally
+        // set the width to fit-content to prevent this div from going off screen
+        width: "w-full",
+      }}
+    >
+      {isVisible ? (
+        <BaseHighlight
+          {...defaultProps}
+          code={codeString}
+          language={codeLang}
+          theme={theme}
+          {...props}
+        >
+          {({className, style, tokens, getLineProps, getTokenProps}) => (
+            <pre
+              ref={(element) => {
+                // Merge the refs
+                if (typeof preRef === "function") {
+                  preRef(element);
+                } else if (preRef) {
+                  // @ts-ignore
+                  preRef.current = element;
+                }
+              }}
+              className={cn(className, classNameProp, `language-${codeLang}`, "max-w-full", {
+                "flex-col": isMultiLine,
+                "overflow-x-scroll scrollbar-hide": hideScrollBar,
+              })}
+              data-language={language}
+              style={style}
+            >
+              {tokens.map((line, i) => {
+                const lineProps = getLineProps({line, key: i});
+
+                return (
+                  <div
+                    {...omit(lineProps, ["key"])}
+                    key={`${i}-${getUniqueID("line-wrapper")}`}
+                    className={cn(
+                      lineProps.className,
+                      removeIndent ? "pr-4" : "px-4",
+                      "relative [&>span]:relative [&>span]:z-10",
+                      {
+                        "px-2": showLines,
+                      },
+                      {
+                        "before:to-code-background before:absolute before:left-0 before:z-0 before:h-full before:w-full before:bg-linear-to-r before:from-white/10 before:content-[''] before:pointer-events-none":
+                          shouldHighlightLine(i),
+                      },
+                    )}
+                    data-deleted={dataAttr(highlightStyle?.[i] === "deleted")}
+                    data-inserted={dataAttr(highlightStyle?.[i] === "inserted")}
+                  >
+                    {showLines && (
+                      <span
+                        className={cn(
+                          "mr-6 select-none text-xs opacity-30",
+                          i + 1 >= 10 ? "mr-4" : "",
+                          i + 1 >= 100 ? "mr-2" : "",
+                          i + 1 >= 1000 ? "mr-0" : "",
+                        )}
+                      >
+                        {i + 1}
+                      </span>
+                    )}
+
+                    {line.map((token, key) => {
+                      const props = getTokenProps({token, key}) || {};
+
+                      return (
+                        <span
+                          {...omit(props, ["key"])}
+                          key={`${key}-${getUniqueID("line")}`}
+                          className={className}
+                          style={{
+                            ...props.style,
+                            ...(highlightStyleToken.some((t) => {
+                              const content = token.content.trim();
+
+                              const regex = t instanceof RegExp ? t : new RegExp(t);
+
+                              return regex.test(content);
+                            })
+                              ? {color: "rgb(var(--code-function))"}
+                              : {}),
+                          }}
+                        />
+                      );
+                    })}
+                  </div>
+                );
+              })}
+            </pre>
+          )}
+        </BaseHighlight>
+      ) : (
+        <div className={cn(classNameProp, "w-full bg-code-background rounded-lg")} />
+      )}
+    </div>
+  );
+};
+
 const Codeblock = forwardRef<HTMLPreElement, CodeblockProps>(
   (
     {
@@ -60,61 +221,81 @@ const Codeblock = forwardRef<HTMLPreElement, CodeblockProps>(
     const shouldHighlightLine = calculateLinesToHighlight(metastring);
     const isMultiLine = codeString.split("\n").length > 2;
 
+    const lastSelectionText = React.useRef<string | null>(null);
+
+    const isDiff = language.includes("diff");
+
+    const codeLang = isDiff ? (language.split("-")[1] as Language) : language;
+
+    let highlightStyle: HighlightStyle[] = [];
+
+    if (isDiff) {
+      let code: string[] = [];
+
+      highlightStyle = codeString.split?.("\n").map((line) => {
+        if (line.startsWith("+")) {
+          code.push(line.substr(1));
+
+          return "inserted";
+        }
+        if (line.startsWith("-")) {
+          code.push(line.substr(1));
+
+          return "deleted";
+        }
+        code.push(line);
+      });
+
+      codeString = code.join("\n");
+    }
+
+    useEffect(() => {
+      const handleSelectionChange = () => {
+        if (!window.getSelection) return;
+
+        const el = window.getSelection()?.anchorNode?.parentNode;
+
+        if (!el) return;
+
+        const selectionText = window.getSelection()?.toString();
+
+        if (!selectionText) return;
+
+        if (
+          !selectionText ||
+          selectionText === lastSelectionText.current ||
+          !codeString.includes(selectionText)
+        )
+          return;
+
+        lastSelectionText.current = selectionText;
+      };
+
+      const debouncedHandleSelectionChange = debounce(handleSelectionChange, 1000);
+
+      document.addEventListener("selectionchange", debouncedHandleSelectionChange);
+
+      return () => {
+        document.removeEventListener("selectionchange", debouncedHandleSelectionChange);
+      };
+    }, []);
+
     return (
-      <BaseHighlight
-        {...defaultProps}
-        code={codeString}
+      <CodeBlockHighlight
+        className={classNameProp}
+        codeLang={codeLang}
+        codeString={codeString}
+        hideScrollBar={hideScrollBar}
+        highlightStyle={highlightStyle}
+        isMultiLine={isMultiLine}
         language={language}
+        preRef={ref}
+        removeIndent={removeIndent}
+        shouldHighlightLine={shouldHighlightLine}
+        showLines={showLines}
         theme={theme}
         {...props}
-      >
-        {({className, style, tokens, getLineProps, getTokenProps}) => (
-          <div className="w-full" data-language={language}>
-            <pre
-              ref={ref}
-              className={clsx(className, classNameProp, "flex max-w-full", {
-                "flex-col": isMultiLine,
-                "scrollbar-hide overflow-x-scroll": hideScrollBar,
-              })}
-              style={style}
-            >
-              {tokens.map((line, i) => {
-                const lineProps = getLineProps({line, key: i});
-
-                return (
-                  <div
-                    key={`${i}-${getUniqueID("line-wrapper")}`}
-                    {...lineProps}
-                    className={clsx(
-                      lineProps.className,
-                      removeIndent ? "pr-4" : "px-4",
-                      "relative [&>span]:relative [&>span]:z-10",
-                      {
-                        "px-2": showLines,
-                      },
-                      {
-                        "before:content-[''] before:w-full before:h-full before:absolute before:z-0 before:left-0 before:bg-gradient-to-r before:from-white/10 before:to-code-background":
-                          shouldHighlightLine(i),
-                      },
-                    )}
-                  >
-                    {showLines && (
-                      <span className="select-none text-xs mr-6 opacity-30">{i + 1}</span>
-                    )}
-                    {line.map((token, key) => (
-                      <span
-                        key={`${key}-${getUniqueID("line")}`}
-                        {...getTokenProps({token, key})}
-                        className={className}
-                      />
-                    ))}
-                  </div>
-                );
-              })}
-            </pre>
-          </div>
-        )}
-      </BaseHighlight>
+      />
     );
   },
 );

apps/docs/components/docs/components/component-links.tsx

@@ -1,12 +1,17 @@
-import {Button, ButtonProps, Code, Link, Tooltip} from "@nextui-org/react";
-import {ReactNode} from "react";
+import type {ButtonProps} from "@heroui/react";
+import type {ReactNode} from "react";
+
+import {Button, Code, Link, Tooltip} from "@heroui/react";
 import Balancer from "react-wrap-balancer";
+import {usePostHog} from "posthog-js/react";
 
 import {GithubIcon, NpmIcon, AdobeIcon, StorybookIcon, NextJsIcon} from "@/components/icons";
 import {COMPONENT_PATH, COMPONENT_THEME_PATH} from "@/libs/github/constants";
 
 export interface ComponentLinksProps {
   component: string;
+  npm?: string;
+  source?: string;
   styles?: string;
   storybook?: string;
   rscCompatible?: boolean;
@@ -23,14 +28,27 @@ const ButtonLink = ({
   href: string;
   tooltip?: string | ReactNode;
 }) => {
+  const posthog = usePostHog();
+
+  const handlePress = () => {
+    if (!href) return;
+
+    posthog.capture("ComponentLinks - Click", {
+      category: "docs",
+      action: "click",
+      data: href || "",
+    });
+  };
+
   const button = (
     <Button
       isExternal
       as={Link}
-      className="!text-small py-4 bg-default-100 dark:bg-default-50 text-default-700"
+      className="text-small! py-4 bg-default-100 dark:bg-default-50 text-default-700"
       href={href}
       size="sm"
       startContent={startContent}
+      onPress={handlePress}
       {...props}
     >
       {children}
@@ -48,6 +66,8 @@ const ButtonLink = ({
 
 export const ComponentLinks = ({
   component,
+  npm,
+  source,
   storybook,
   styles,
   rscCompatible,
@@ -60,16 +80,18 @@ export const ComponentLinks = ({
   return (
     <div className="flex flex-wrap gap-3 mt-6">
       <ButtonLink
-        href={`https://storybook.nextui.org/?path=/story/components-${storybook || component}`}
+        href={`https://storybook.heroui.com/?path=/story/components-${
+          storybook || component
+        }--default`}
         startContent={<StorybookIcon className="text-lg text-[#ff4785]" />}
       >
         Storybook
       </ButtonLink>
       <ButtonLink
-        href={`https://www.npmjs.com/package/@nextui-org/${component}`}
+        href={`https://www.npmjs.com/package/@heroui/${npm || component}`}
         startContent={<NpmIcon className="text-2xl text-[#E53E3E]" />}
       >
-        {`@nextui-org/${component}`}
+        {`@heroui/${npm || component}`}
       </ButtonLink>
       {reactAriaHook && (
         <ButtonLink
@@ -81,7 +103,7 @@ export const ComponentLinks = ({
       )}
       {rscCompatible && (
         <ButtonLink
-          href="https://nextjs.org/docs/getting-started/react-essentials#server-components"
+          href="https://nextjs.org/docs/app/building-your-application/rendering/server-components"
           startContent={<NextJsIcon size={18} />}
           tooltip={
             <p>
@@ -99,7 +121,10 @@ export const ComponentLinks = ({
         </ButtonLink>
       )}
 
-      <ButtonLink href={`${COMPONENT_PATH}/${component}`} startContent={<GithubIcon size={20} />}>
+      <ButtonLink
+        href={`${COMPONENT_PATH}/${source || component}`}
+        startContent={<GithubIcon size={20} />}
+      >
         Source
       </ButtonLink>
       <ButtonLink