refactor: add radio and checkbox component

[essenmitsosse]

This adds a button and checkbox component and replaces all things I could find that were button before but should be a radio or checkbox. It doesn't touch the SettingsToggle component, which is also a checkbox.

The radio button also replaces the previous TagRadioButton

For the checkboxes I added a variant, that looks like a toggable button. For the radio buttons I didn't. I am going to leave this PR as a draft, because I am sure there is some discussion to be had.

The goal of this PR should be to move all things that should be radio/checkboxes to an abstract component. I don't think these components need to be functionally or visually perfect just now. Having only one place to maintain them should be a benefit in itself. So I think we should try not to get lost in detailed "how round should the focus be" discussions. I also think surfacing that something is a radio/checkbox in the UI by actually displaying it can be good intermediate step to make everybody think more consciously about UX dicisions. What I mean by that: 'Maybe if too many radio buttons look to crowded, the problem is not showing them, but having so many of them' — maybe.

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
npmx.dev	Ready	Preview, Comment	Feb 13, 2026 7:39pm

2 Skipped Deployments

Project	Deployment	Actions	Updated (UTC)
docs.npmx.dev	Ignored	Preview	Feb 13, 2026 7:39pm
npmx-lunaria	Ignored		Feb 13, 2026 7:39pm

[essenmitsosse]

@knowler @alexdln could you take a look if you like the general direction of this or have any remarks, especially regarding regressions? This would move the majority of inputs and buttons into a few abstract components. If you think this generally looks fine I can fix the tests and rebase.

[alexdln]

The checkbox in the columns is currently 14x14 and looks a bit small. Maybe let's make it 1.2em

Also, let's make the color accent-accent, otherwise the blue looks too default

Regarding the facets logic - I like it and wanted to talk about this too. But it seems like the logic is broken somewhere now. Also, I'm a bit worry that this is a very complex logic, maybe we should postpone it until post-launch (or at least to separate PR)?

Based on the tag style, making them brightly colored looks better, but it's a bit too bright when there are a lot of them, and when active, it requires a different hover effect (at the end of the video, when you hover over a tag, it's unclear whether it's activated or not)

Screen.Recording.2026-02-26.111332.mp4

Regarding the versions, I think this version of toggle is very specific for us. They've already been updated into a unified look in production, but I'm in favor of a redesigning it anyway, but to something like for filters toggle (PR, discord). Maybe the design of the active tag can also be taken from here

Preview/prod/mentioned toggle

I like the idea of ​​radio filters, but not for the search category. It's like the search category is more like a select or a toggle-group. It also seems better to reduce the indents to gap-6 instead of gap-8. And let's use accent-accent as well

[coderabbitai]

Important

Review skipped

Auto reviews are limited based on label configuration.

🚫 Review skipped — only excluded labels are configured. (1)

• release

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: ffd363df-52cd-49e8-9957-35466816082d

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• 🔍 Trigger review

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

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