Add Chips component

src/lib/components/Button.svelte

@@ -22,19 +22,19 @@
 </script>
 
 {#if as === 'button'}
-    <button class={className} {disabled}>
+    <button class={className} {disabled} on:click>
         <slot/>
     </button>
 {:else if as === 'a'}
-    <a class={className} {href} {disabled}>
+    <a class={className} {href} {disabled} on:click>
         <slot/>
     </a>
 {:else if as === 'summary'}
-    <summary class={className} {disabled}>
+    <summary class={className} {disabled} on:click>
         <slot/>
     </summary>
 {:else if as === 'input'}
-    <input class={className} {value} {disabled}/>
+    <input class={className} {value} {disabled} on:click/>
 {/if}
 
 <style lang="postcss">

src/lib/components/Chips.svelte

@@ -0,0 +1,49 @@
+<script lang="ts">
+  import Button from "./Button.svelte";
+  import IconCheck from 'virtual:icons/heroicons-outline/check'
+
+  interface Option {
+    label: string;
+    value: string | number;
+  }
+
+  export let options: Option[] = [];
+  export let value: string | number;
+  // If set to true, one chip is always selected
+  export let neverEmpty = false;
+
+  let selected: Option | null = options.find((option) => option.value === (value || ''));
+
+  $: if (selected) {
+    value = selected.value;
+  } else {
+    value = ''
+  }
+</script>
+
+<div class="chips">
+  {#each options as option}
+    {@const isSelected = selected?.value === option.value}
+    <Button
+      color={isSelected ? 'primary-light' : undefined}
+      on:click={() => {
+        console.log(option)
+        isSelected && !neverEmpty
+          ? selected = null
+          : selected = option
+      }}
+    >
+      {#if isSelected}
+        <IconCheck />
+      {/if}
+      {option.label}
+    </Button>
+  {/each}
+</div>
+
+<style lang="postcss">
+  .chips {
+    display: flex;
+    grid-gap: 0.5rem;
+  }
+</style>