Feat/select multi option

[RATIU5]

This PR will add multi-select functionality to the select component. It's currently in draft mode and it not ready to be merged yet.

• Render badges via Astro
• Select accepts multiple attribute and an array for defaultValue
• Position badges wither within or under select button
• Badge SVG de-selects the option and updates UI
• Search select component with multi-select functionality
• Keyboard interactions

Example

<Select
  label='Select Element'
  multiple // add this attribute to enable multi-select mode
  defaultValue={['opt-1-1', 'opt-2-1']}
  options={[
    { label: "Option 1", value: "opt-1-1" },
    { label: "Option 2", value: "opt-2-1" },
    { label: "Option 3", value: "opt-3-1" },
  ]}
/>

[changeset-bot]

🦋 Changeset detected

Latest commit: ea25433

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

This PR includes changesets to release 1 package

Name	Type
@studiocms/ui	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

[withstudiocms-deployments]

The preview deployment is ready. 🟢

Open Preview | Open Build Logs

Last updated at: 2025-02-20 21:14:30 CET

[studiocms-no-reply]

Hello @RATIU5, and thank you for opening your first pull request to StudioCMS! 🎉
Please make sure to review the project's Contributing Guide to ensure your pull request meets our quality standards.
We're excited to have you here and appreciate your contribution. If you have not already, please make sure to include the following information in your pull request: - A clear description of the changes - Steps to reproduce the issue (if applicable) - Any relevant screenshots or logs
Our team will review your pull request as soon as possible. If you have any questions or need help, feel free to ask. We're here to help you! 🚀
In the meantime, you will notice that a few checks will run on your pull request. These checks are automated and help us ensure that your changes meet our quality standards. If you see any errors or warnings, don't worry! Our team will help you address them. 😊

[pkg-pr-new]

Open in Stackblitz

npm i https://pkg.pr.new/@studiocms/ui@67

commit: b6ce6bf

[Adammatthiesen]

The Icon component does automatically append the viewBox attribute, since there is different size icons included in the packs