Add TagGroup

Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>

packages/ui/css/styles.css

@@ -10260,6 +10260,76 @@
   padding-top: var(--bui-space-4);
 }
 
+.bui-TagList {
+  gap: var(--bui-space-2);
+  flex-wrap: wrap;
+  display: flex;
+}
+
+.bui-Tag {
+  color: var(--bui-fg-primary);
+  background-color: var(--bui-gray-2);
+  border-radius: var(--bui-radius-full);
+  font-weight: var(--bui-font-weight-regular);
+  justify-content: center;
+  align-items: center;
+  gap: var(--bui-space-1);
+  box-sizing: border-box;
+  transition-property: background-color, box-shadow, color;
+  transition-duration: .2s;
+  transition-timing-function: ease-in-out;
+  display: flex;
+}
+
+.bui-Tag[data-size="small"] {
+  height: 26px;
+  padding: 0 var(--bui-space-2);
+  font-size: var(--bui-font-size-1);
+}
+
+.bui-Tag[data-size="medium"] {
+  height: 32px;
+  padding: 0 var(--bui-space-2);
+  font-size: var(--bui-font-size-2);
+}
+
+.bui-Tag[data-hovered] {
+  background-color: var(--bui-gray-3);
+  cursor: pointer;
+}
+
+.bui-Tag[data-focus-visible] {
+  outline: 2px solid var(--bui-ring);
+  outline-offset: 1px;
+}
+
+.bui-Tag[data-selected] {
+  box-shadow: inset 0 0 0 1px var(--bui-gray-8);
+}
+
+.bui-TagRemoveButton {
+  cursor: pointer;
+  color: var(--bui-fg-primary);
+  background-color: #0000;
+  border: none;
+  width: 1rem;
+  height: 1rem;
+  margin: 0;
+  padding: 0;
+}
+
+.bui-TagIcon {
+  justify-content: center;
+  align-items: center;
+  transition: color .2s ease-in-out;
+  display: flex;
+
+  & svg {
+    width: 1rem;
+    height: 1rem;
+  }
+}
+
 .bui-Text {
   font-family: var(--bui-font-regular);
   margin: 0;