refactor: standardize className merging with cx

[paanSinghCoder]

Summary

• replace template-literal className concatenation with cx() in Button, Callout, and MenuTrigger
• add missing cx imports from class-variance-authority where needed

Test plan

• Run pre-commit checks (lefthook/biome)
• Verify no lint errors in edited files
• Spot-check Button loading/icon, Callout custom className, and menubar MenuTrigger styles in UI

Made with Cursor

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
apsara	Ready	Preview, Comment	Apr 7, 2026 9:56am

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: ca777ff3-a441-43df-b1af-d5225f015f6b

📥 Commits

Reviewing files that changed from the base of the PR and between 08530b8 and 05880e6.

📒 Files selected for processing (1)

• packages/raystack/components/callout/callout.tsx

✅ Files skipped from review due to trivial changes (1)

• packages/raystack/components/callout/callout.tsx

---

📝 Walkthrough

Walkthrough

The pull request refactors CSS class composition across three components in the Raystack package. The Button, Callout, and MenuTrigger components have been updated to use the cx utility function for merging CSS classes instead of template-string concatenation. These changes maintain existing functionality while standardizing the approach to class name construction across the component library. The updates affect the internal implementation of how classes are computed and applied to elements.

Sequence Diagram(s)

(omitted — changes are localized class-name composition updates without multi-component sequential flows)

Possibly related issues

• Consistent className merging using cx()/cn() #683 — Matches this PR's switch from template-string concatenation to cx for className merging; could be linked as it appears to aim at standardizing class composition across components.

Suggested reviewers

• rsbh
• rohanchkrabrty

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately summarizes the main refactoring goal of standardizing className merging with the cx utility across multiple components.
Description check	✅ Passed	The description clearly outlines the changes made, components affected, and includes a test plan that aligns with the actual code modifications.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

---

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.}