feature: add 'disable' functionality

[YoonHan]

Changes

• <MultiSelect /> component can have disabled item(s)
  • Disabled item has different UI than normal item. (I just used the 'secondary' style variant! If you have better option, please let me know)
  • Disabled and default item's badge takes precedence in sort order.
  • User cannot click disabled option. there is also no 'x' button on the disabled option badge.
• Add new component(<CardStyled />) for reuse in root page UI.
• I just added another example card UI on root page for newly added usecase.

Working video

working-video.mov

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
shadcn-multi-select-component	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Aug 10, 2024 9:37am

[sersavan]

Thank you for your PR. Could you please provide examples of how disabled options would be used in different projects? I would like to understand the potential benefits of this approach.

[YoonHan]

Yes, sure!

In my project, I have a multi-select UI which a user can select assignee(s) of a task(like GitHub's PR).
In that UI, I want to show the default selected assignee(s) but not want to allow any interaction with it like below screenshot.

I think it will be quite useful especially when I need to explicitly show some options selected by default but not want to allow a user to change checked state of these options.

[dbjpanda]

+1. I also need this feature where I wanted to show some features list where few features are premium i.e disabled for free users