ColorPicker

<script lang="ts">
  import { ColorPicker } from 'sv5ui';

  let color = $state('#3b82f6');
</script>

<ColorPicker bind:value={color} />

<!-- Any of these are accepted on the way in, plus transparent.
     An unparseable string is ignored and leaves the color untouched. -->
<ColorPicker value="#3b82f6" />
<ColorPicker value="#3b82f6cc" />
<ColorPicker value="rgb(59, 130, 246)" />
<ColorPicker value="hsl(217, 91%, 60%)" />
<ColorPicker value="transparent" />

<!-- format decides how the value is serialized back out -->
<ColorPicker bind:value={color} format="rgb" />
<ColorPicker bind:value={color} format="hsl" />

<!-- formatSelect adds a button that cycles hex -> rgb -> hsl.
     Bind format to follow along. It requires input. -->
<script lang="ts">
  let color = $state('#3b82f6');
  let format = $state<ColorFormat>('hex');
</script>

<ColorPicker bind:value={color} bind:format formatSelect />

<!-- The incoming string is kept verbatim until the first edit, so a
     value written in one notation is not rewritten in format until
     the color actually changes. This starts as rgb(...) even though
     format is hex, and becomes hex the moment you touch it. -->
<ColorPicker value="rgb(59, 130, 246)" format="hex" />

<!-- format decides how the value is serialized back out -->
<ColorPicker bind:value={color} format="rgb" />
<ColorPicker bind:value={color} format="hsl" />

<!-- formatSelect adds a button that cycles hex -> rgb -> hsl.
     Bind format to follow along. It requires input. -->
<script lang="ts">
  let color = $state('#3b82f6');
  let format = $state<ColorFormat>('hex');
</script>

<ColorPicker bind:value={color} bind:format formatSelect />

<!-- The incoming string is kept verbatim until the first edit, so a
     value written in one notation is not rewritten in format until
     the color actually changes. This starts as rgb(...) even though
     format is hex, and becomes hex the moment you touch it. -->
<ColorPicker value="rgb(59, 130, 246)" format="hex" />

<!-- alpha adds the transparency slider and puts the channel
     into the emitted value -->
<ColorPicker bind:value={color} alpha />

<!-- The channel is only appended when it means something: a fully
     opaque color stays #3b82f6 rather than becoming #3b82f6ff.
       a = 1    -> '#3b82f6'
       a = 0.5  -> '#3b82f680'
     The same applies to rgb() vs rgba() and hsl() vs hsla(). -->

<!-- Without alpha the channel is dropped entirely, so an incoming
     translucent value is read as opaque. -->
<ColorPicker value="#3b82f680" />

<script lang="ts">
  const brand = [
    '#0f172a', '#1e40af', '#3b82f6', '#0ea5e9',
    '#10b981', '#eab308', '#ef4444'
  ];

  // The swatch row wraps, so a palette wider than the picker
  // spills onto a second line: seven fit at the default md size.
</script>

<ColorPicker bind:value={color} swatches={brand} />

<!-- A swatch shows as selected when it serializes to the current
     value, so with alpha on it has to match transparency too.
     Entries that do not parse are skipped rather than throwing. -->

<!-- Everything below the saturation area is optional -->
<ColorPicker bind:value={color} preview={false} />
<ColorPicker bind:value={color} input={false} />
<ColorPicker bind:value={color} eyeDropper={false} />

<!-- Down to the area and the hue slider alone -->
<ColorPicker
  bind:value={color}
  preview={false}
  input={false}
  eyeDropper={false}
/>

<!-- The eyedropper uses the browser EyeDropper API. Support is
     checked on mount, so the button is absent rather than disabled
     in browsers without it, and it needs a secure context. -->
<ColorPicker bind:value={color} eyeDropperIcon="lucide:crosshair" />

<ColorPicker
  bind:value={color}
  onValueChange={(value) => {
    // Every frame of a drag. Keep this cheap.
    preview = value;
  }}
  onValueCommit={(value) => {
    // Once per interaction: pointer release, each keyboard step,
    // a swatch, the eyedropper, or the text field losing focus.
    history.push(value);
    save(value);
  }}
/>

<script lang="ts">
  import { ColorPicker, Popover, Button } from 'sv5ui';

  let color = $state('#3b82f6');
</script>

<!-- The default slot is the trigger, the content snippet is the panel.
     The picker sizes itself, so the panel needs no width of its own. -->
<Popover>
  <Button variant="outline" class="gap-2">
    <span
      class="size-4 rounded-full ring-1 ring-inset ring-outline-variant"
      style="background-color: {color}"
    ></span>
    <span class="font-mono text-sm">{color}</span>
  </Button>

  {#snippet content()}
    <div class="p-3">
      <ColorPicker bind:value={color} {swatches} alpha />
    </div>
  {/snippet}
</Popover>

<script lang="ts">
  import { ColorPicker, Form, FormField, Button } from 'sv5ui';
  import { z } from 'zod';

  const schema = z.object({
    brand: z.string().regex(/^#[0-9a-f]{6}$/i, 'Pick a solid hex color')
  });

  let state = $state({ brand: '#3b82f6' });
</script>

<Form {schema} bind:state>
  <!-- FormField hands down name, size and error state. id lands on
       the saturation handle, so the label points at it. -->
  <FormField label="Brand color" name="brand" required>
    <ColorPicker bind:value={state.brand} />
  </FormField>
  <Button type="submit" label="Save" />
</Form>

<!-- An error in the field flips color to error and sets aria-invalid.
     onInput fires while dragging and onChange on commit, so
     validate-on-blur and validate-on-change both behave. -->

<!-- For a plain POST with no Form wrapper, name renders a hidden
     input carrying the serialized value. -->
<form method="POST">
  <ColorPicker name="brand" value="#3b82f6" />
</form>

<!-- Dims the picker, drops pointer interaction on the area and
     the sliders, and disables every button and the text field. -->
<ColorPicker value="#3b82f6" disabled />

<!-- color drives the focus rings and the selected swatch outline,
     not the swatch being edited -->
<ColorPicker bind:value={color} color="success" />

<!-- size sets the width of the whole picker and the height of the
     saturation area: xs w-44, sm w-48, md w-56, lg w-64, xl w-72 -->
<ColorPicker bind:value={color} size="xs" />
<ColorPicker bind:value={color} size="xl" />

<!-- Slot classes. root carries the width, so override it there to
     break out of the fixed size. -->
<ColorPicker
  bind:value={color}
  size="lg"
  ui={{ area: 'rounded-xl', input: 'font-mono' }}
/>

<ColorPicker bind:value={color} ui={{ root: 'w-full', area: 'h-56' }} />

import { defineConfig } from 'sv5ui';

defineConfig({
  colorPicker: {
    defaultVariants: { color: 'tertiary', size: 'lg' },
    slots: { area: 'rounded-xl' }
  },
  icons: {
    // Used by the eyedropper button
    eyeDropper: 'lucide:pipette'
  }
});