fix(extendVariants): return component type error

[IsDyh01]

Closes #5778

📝 Description

Only the types related to the attributes of the returned component have been modified.

⛳️ Current behavior (updates)

incorrect variant type

🚀 New behavior

💣 Is this a breaking change (Yes/No):

no

📝 Additional Information

Summary by CodeRabbit

• Bug Fixes
  • Fixed a TypeScript typing issue in extendVariants that could cause return type errors (issue #5778), improving IDE IntelliSense and reducing compile-time warnings. No runtime behavior changes.
• Chores
  • Applied a patch update to the @heroui/system-rsc dependency.
  • Added a changeset entry documenting the fix and release impact.
• Documentation
  • Clarified the typing adjustments to ensure more accurate prop inference for extended variants, without altering the public API.

[changeset-bot[bot]]

🦋 Changeset detected

Latest commit: e5cad93a48b904bf1bca70954a9f5f336c9b3a2c

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 37 packages

Name	Type
@heroui/system-rsc	Patch
@heroui/code	Patch
@heroui/divider	Patch
@heroui/kbd	Patch
@heroui/spacer	Patch
@heroui/spinner	Patch
@heroui/system	Patch
@heroui/react	Patch
@heroui/accordion	Patch
@heroui/listbox	Patch
@heroui/menu	Patch
@heroui/table	Patch
@heroui/button	Patch
@heroui/select	Patch
@heroui/toast	Patch
@heroui/alert	Patch
@heroui/autocomplete	Patch
@heroui/calendar	Patch
@heroui/checkbox	Patch
@heroui/date-input	Patch
@heroui/date-picker	Patch
@heroui/drawer	Patch
@heroui/dropdown	Patch
@heroui/form	Patch
@heroui/input-otp	Patch
@heroui/input	Patch
@heroui/modal	Patch
@heroui/navbar	Patch
@heroui/number-input	Patch
@heroui/popover	Patch
@heroui/radio	Patch
@heroui/slider	Patch
@heroui/snippet	Patch
@heroui/tabs	Patch
@heroui/tooltip	Patch
@heroui/aria-utils	Patch
@heroui/framer-utils	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[vercel[bot]]

@IsDyh01 is attempting to deploy a commit to the HeroUI Inc Team on Vercel.

A member of the Team first needs to authorize it.

[coderabbitai[bot]]

Walkthrough

Updates the ExtendVariants type signature in packages/core/system-rsc/src/extend-variants.d.ts to unify props mapping across CP and V keys, affecting type-level props resolution only. Adds a changeset entry documenting a patch for @heroui/system-rsc and the extendVariants return type fix (issue #5778).

Changes

Cohort / File(s)	Summary
Changeset entry /.changeset/rich-horses-dress.md	Adds a patch changeset for @heroui/system-rsc noting a fix for extendVariants return type (refs #5778).
Type definition refactor packages/core/system-rsc/src/extend-variants.d.ts	Refactors ExtendVariants parameter props: from CP & {[key in keyof V]?...} to a unified mapped type over `keyof CP

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Possibly related PRs

• heroui-inc/heroui#5765 — Also modifies the exported ExtendVariants type in the same file, adjusting component props/ref typing; closely related to this refactor.

Suggested reviewers

• jrgarciadev

Pre-merge checks and finishing touches

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Description Check	⚠️ Warning	The pull request description includes the required template headings and references the issue number, but the “New behavior” section is left blank and no details are provided under “Additional Information,” leaving critical template fields unfilled.	Please add a concise summary of the new functionality or type changes under the “🚀 New behavior” heading and include any relevant context or migration notes under “📝 Additional Information” to fully comply with the repository’s PR template.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Title Check	✅ Passed	The title concisely identifies that the PR fixes a return component type error in extendVariants, directly reflecting the primary change to TypeScript definitions. It follows the conventional commit format, is clear, and contains no unrelated details.
Docstring Coverage	✅ Passed	No functions found in the changes. Docstring coverage check skipped.

✨ Finishing touches

• [ ] 📝 Generate docstrings

🧪 Generate unit tests (beta)

• [ ] Create PR with unit tests
• [ ] Post copyable unit tests in a comment

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[pkg-pr-new[bot]]

Open in StackBlitz

@heroui/accordion

npm i https://pkg.pr.new/@heroui/accordion@5795

@heroui/alert

npm i https://pkg.pr.new/@heroui/alert@5795

@heroui/autocomplete

npm i https://pkg.pr.new/@heroui/autocomplete@5795

@heroui/avatar

npm i https://pkg.pr.new/@heroui/avatar@5795

@heroui/badge

npm i https://pkg.pr.new/@heroui/badge@5795

@heroui/breadcrumbs

npm i https://pkg.pr.new/@heroui/breadcrumbs@5795

@heroui/button

npm i https://pkg.pr.new/@heroui/button@5795

@heroui/calendar

npm i https://pkg.pr.new/@heroui/calendar@5795

@heroui/card

npm i https://pkg.pr.new/@heroui/card@5795

@heroui/checkbox

npm i https://pkg.pr.new/@heroui/checkbox@5795

@heroui/chip

npm i https://pkg.pr.new/@heroui/chip@5795

@heroui/code

npm i https://pkg.pr.new/@heroui/code@5795

@heroui/date-input

npm i https://pkg.pr.new/@heroui/date-input@5795

@heroui/date-picker

npm i https://pkg.pr.new/@heroui/date-picker@5795

@heroui/divider

npm i https://pkg.pr.new/@heroui/divider@5795

@heroui/drawer

npm i https://pkg.pr.new/@heroui/drawer@5795

@heroui/dropdown

npm i https://pkg.pr.new/@heroui/dropdown@5795

@heroui/form

npm i https://pkg.pr.new/@heroui/form@5795

@heroui/image

npm i https://pkg.pr.new/@heroui/image@5795

@heroui/input

npm i https://pkg.pr.new/@heroui/input@5795

@heroui/input-otp

npm i https://pkg.pr.new/@heroui/input-otp@5795

@heroui/kbd

npm i https://pkg.pr.new/@heroui/kbd@5795

@heroui/link

npm i https://pkg.pr.new/@heroui/link@5795

@heroui/listbox

npm i https://pkg.pr.new/@heroui/listbox@5795

@heroui/menu

npm i https://pkg.pr.new/@heroui/menu@5795

@heroui/modal

npm i https://pkg.pr.new/@heroui/modal@5795

@heroui/navbar

npm i https://pkg.pr.new/@heroui/navbar@5795

@heroui/number-input

npm i https://pkg.pr.new/@heroui/number-input@5795

@heroui/pagination

npm i https://pkg.pr.new/@heroui/pagination@5795

@heroui/popover

npm i https://pkg.pr.new/@heroui/popover@5795

@heroui/progress

npm i https://pkg.pr.new/@heroui/progress@5795

@heroui/radio

npm i https://pkg.pr.new/@heroui/radio@5795

@heroui/ripple

npm i https://pkg.pr.new/@heroui/ripple@5795

@heroui/scroll-shadow

npm i https://pkg.pr.new/@heroui/scroll-shadow@5795

@heroui/select

npm i https://pkg.pr.new/@heroui/select@5795

@heroui/skeleton

npm i https://pkg.pr.new/@heroui/skeleton@5795

@heroui/slider

npm i https://pkg.pr.new/@heroui/slider@5795

@heroui/snippet

npm i https://pkg.pr.new/@heroui/snippet@5795

@heroui/spacer

npm i https://pkg.pr.new/@heroui/spacer@5795

@heroui/spinner

npm i https://pkg.pr.new/@heroui/spinner@5795

@heroui/switch

npm i https://pkg.pr.new/@heroui/switch@5795

@heroui/table

npm i https://pkg.pr.new/@heroui/table@5795

@heroui/tabs

npm i https://pkg.pr.new/@heroui/tabs@5795

@heroui/toast

npm i https://pkg.pr.new/@heroui/toast@5795

@heroui/tooltip

npm i https://pkg.pr.new/@heroui/tooltip@5795

@heroui/user

npm i https://pkg.pr.new/@heroui/user@5795

@heroui/react

npm i https://pkg.pr.new/@heroui/react@5795

@heroui/system

npm i https://pkg.pr.new/@heroui/system@5795

@heroui/system-rsc

npm i https://pkg.pr.new/@heroui/system-rsc@5795

@heroui/theme

npm i https://pkg.pr.new/@heroui/theme@5795

@heroui/use-aria-accordion

npm i https://pkg.pr.new/@heroui/use-aria-accordion@5795

@heroui/use-aria-accordion-item

npm i https://pkg.pr.new/@heroui/use-aria-accordion-item@5795

@heroui/use-aria-button

npm i https://pkg.pr.new/@heroui/use-aria-button@5795

@heroui/use-aria-link

npm i https://pkg.pr.new/@heroui/use-aria-link@5795

@heroui/use-aria-modal-overlay

npm i https://pkg.pr.new/@heroui/use-aria-modal-overlay@5795

@heroui/use-aria-multiselect

npm i https://pkg.pr.new/@heroui/use-aria-multiselect@5795

@heroui/use-aria-overlay

npm i https://pkg.pr.new/@heroui/use-aria-overlay@5795

@heroui/use-callback-ref

npm i https://pkg.pr.new/@heroui/use-callback-ref@5795

@heroui/use-clipboard

npm i https://pkg.pr.new/@heroui/use-clipboard@5795

@heroui/use-data-scroll-overflow

npm i https://pkg.pr.new/@heroui/use-data-scroll-overflow@5795

@heroui/use-disclosure

npm i https://pkg.pr.new/@heroui/use-disclosure@5795

@heroui/use-draggable

npm i https://pkg.pr.new/@heroui/use-draggable@5795

@heroui/use-form-reset

npm i https://pkg.pr.new/@heroui/use-form-reset@5795

@heroui/use-image

npm i https://pkg.pr.new/@heroui/use-image@5795

@heroui/use-infinite-scroll

npm i https://pkg.pr.new/@heroui/use-infinite-scroll@5795

@heroui/use-intersection-observer

npm i https://pkg.pr.new/@heroui/use-intersection-observer@5795

@heroui/use-is-mobile

npm i https://pkg.pr.new/@heroui/use-is-mobile@5795

@heroui/use-is-mounted

npm i https://pkg.pr.new/@heroui/use-is-mounted@5795

@heroui/use-measure

npm i https://pkg.pr.new/@heroui/use-measure@5795

@heroui/use-pagination

npm i https://pkg.pr.new/@heroui/use-pagination@5795

@heroui/use-real-shape

npm i https://pkg.pr.new/@heroui/use-real-shape@5795

@heroui/use-ref-state

npm i https://pkg.pr.new/@heroui/use-ref-state@5795

@heroui/use-resize

npm i https://pkg.pr.new/@heroui/use-resize@5795

@heroui/use-safe-layout-effect

npm i https://pkg.pr.new/@heroui/use-safe-layout-effect@5795

@heroui/use-scroll-position

npm i https://pkg.pr.new/@heroui/use-scroll-position@5795

@heroui/use-ssr

npm i https://pkg.pr.new/@heroui/use-ssr@5795

@heroui/use-theme

npm i https://pkg.pr.new/@heroui/use-theme@5795

@heroui/use-update-effect

npm i https://pkg.pr.new/@heroui/use-update-effect@5795

@heroui/use-viewport-size

npm i https://pkg.pr.new/@heroui/use-viewport-size@5795

@heroui/aria-utils

npm i https://pkg.pr.new/@heroui/aria-utils@5795

@heroui/dom-animation

npm i https://pkg.pr.new/@heroui/dom-animation@5795

@heroui/framer-utils

npm i https://pkg.pr.new/@heroui/framer-utils@5795

@heroui/react-rsc-utils

npm i https://pkg.pr.new/@heroui/react-rsc-utils@5795

@heroui/react-utils

npm i https://pkg.pr.new/@heroui/react-utils@5795

@heroui/shared-icons

npm i https://pkg.pr.new/@heroui/shared-icons@5795

@heroui/shared-utils

npm i https://pkg.pr.new/@heroui/shared-utils@5795

@heroui/stories-utils

npm i https://pkg.pr.new/@heroui/stories-utils@5795

@heroui/test-utils

npm i https://pkg.pr.new/@heroui/test-utils@5795

commit: e5cad93

[ITBoomBKStudio]

@IsDyh01 Hey! I’ve been exploring this issue too and noticed your PR. I took the changes suggested by @coderabbitai, refined them a bit, and also fixed the long-standing CompoundVariants type issue - it’s something that’s been around since the early NextUI days (probably for 2 years or more).

Would you be okay if I opened a new PR that builds on this one and includes these improvements? I’ll make sure to credit you and link back to this PR.

[coderabbitai[bot]]

[!TIP] For best results, initiate chat on the files or code changes.

@ITBoomBKStudio, it's great to see community collaboration on this fix!

While the decision is ultimately between you and @IsDyh01, here are a couple of approaches you might consider:

Option 1: Collaborate on this PR

• @IsDyh01 could add you as a co-author
• You could push additional commits to this branch (if given access)
• Keeps the discussion and history in one place

Option 2: New PR

• Open a new PR that references this one
• Credit @IsDyh01 and link back to #5795
• Allows for separate review of the additional changes (CompoundVariants fix)

Since you're adding significant improvements beyond the original scope (the CompoundVariants issue), Option 2 might be cleaner for reviewers to assess both fixes independently. However, if the changes are tightly coupled, Option 1 could work well.

Either way, crediting the original work and maintaining clear communication (as you're doing) is the right approach. I'm looking forward to seeing the CompoundVariants issue resolved—that sounds like it will be a valuable improvement!