Re-creating Tailwind color radiobuttons

radiobuttongroup.svelte

<script lang="ts">
  import { createRadioGroup, melt } from '@melt-ui/svelte';
 
  const {
    elements: { root, item, hiddenInput },
    helpers: { isChecked },
  } = createRadioGroup({
    defaultValue: 'default',
  });

  type Color = {
    red: number;
    green: number;
    blue: number;
  };

  let colors: Color[] = [
    { red: 255, green: 255, blue: 255 },
    { red: 0, green: 0, blue: 0 },
    { red: 255, green: 0, blue: 0 },
    { red: 0, green: 255, blue: 0 },
    { red: 0, green: 0, blue: 255 },
    { red: 255, green: 255, blue: 0 },
    { red: 255, green: 0, blue: 255 },
    { red: 0, green: 255, blue: 255 }
  ];

  function colorToCssBackground(color: Color) {
    return `rgb(${color.red}, ${color.green}, ${color.blue})`;
  }

  function colorToStringHash(color: Color) {
    return `${color.red}-${color.green}-${color.blue}`;
  }
 

</script>
 
<fieldset>
  <legend class="block text-sm font-medium leading-6 text-gray-900">Choose a label color</legend>
<div
  {...$root} use:root
  class="mt-4 flex items-center space-x-3 data-[orientation=horizontal]:flex-row"
  aria-label="View density"
>
  {#each colors as option}
    <div class="flex items-center gap-3 bg-magnum-500">
      
      <label
        class="relative -m-0.5 flex cursor-pointer items-center justify-center rounded-full p-0.5 focus:outline-none ring-pink-500"
        for={colorToStringHash(option)}
        id="{colorToStringHash(option)}-label"
      >
      <button
        {...$item(colorToStringHash(option))} use:item
        class="sr-only"
        id={colorToStringHash(option)}
        aria-labelledby="color-choice-{colorToStringHash(option)}-label"
      >
        {#if $isChecked(colorToStringHash(option))}
          <div class="ring ring-offset-1" />
        {/if}
      </button>
      <span id="color-choice-{colorToStringHash(option)}-label" class="sr-only">{colorToStringHash(option)}</span>
      <span 
      aria-hidden="true"
      style="background-color: {colorToCssBackground(option)}"
      class="h-8 w-8 
      { $isChecked(colorToStringHash(option)) ? 'ring ring-offset-1' : ' '}
       rounded-full border border-black border-opacity-10"></span>
        
      </label>
    </div>
  {/each}
  <input name="line-height" {...$hiddenInput} use:hiddenInput />
</div>
</fieldset>

  function colorToCssBackground(color: Color) {
    return `rgb(${color.red}, ${color.green}, ${color.blue})`;
  }

  function colorToStringHash(color: Color) {
    return `${color.red}-${color.green}-${color.blue}`;
  }
 

</script>
 
<fieldset>
  <legend class="block text-sm font-medium leading-6 text-gray-900">Choose a label color</legend>
<div
  {...$root} use:root
  class="mt-4 flex items-center space-x-3 data-[orientation=horizontal]:flex-row"
  aria-label="View density"
>
  {#each colors as option}
    <div class="flex items-center gap-3 bg-magnum-500">
      
      <label
        class="relative -m-0.5 flex cursor-pointer items-center justify-center rounded-full p-0.5 focus:outline-none ring-pink-500"
        for={colorToStringHash(option)}
        id="{colorToStringHash(option)}-label"
      >
      <button
        {...$item(colorToStringHash(option))} use:item
        class="sr-only"
        id={colorToStringHash(option)}
        aria-labelledby="color-choice-{colorToStringHash(option)}-label"
      >
        {#if $isChecked(colorToStringHash(option))}
          <div class="ring ring-offset-1" />
        {/if}
      </button>
      <span id="color-choice-{colorToStringHash(option)}-label" class="sr-only">{colorToStringHash(option)}</span>
      <span aria-hidden="true" 
      style="background-color: {colorToCssBackground(option)}"
      class="h-8 w-8 
       rounded-full border border-black border-opacity-10"></span>
        
      </label>
    </div>
  {/each}
  <input name="line-height" {...$hiddenInput} use:hiddenInput />
</div>
</fieldset>