ColorSelector

<script lang="ts">
  import 'portal-bits/styles.css';
  import 'portal-bits/tokens.css';
  import type { Snippet } from 'svelte';

  let { children }: { children: Snippet } = $props();
</script>

{@render children()}

<script lang="ts">
  import ColorSelectorExample from './ColorSelectorExample.svelte';
</script>

<ColorSelectorExample />

<script lang="ts">
  import { ColorSelector } from 'portal-bits';
  let accent = $state('#19e783');
</script>

<div class="row">
  <ColorSelector bind:value={accent} />
  <span>{accent.toUpperCase()}</span>
</div>

<style>
  .row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
  }
</style>