Color Picker

---
import { ColorPicker } from "@/components/starwind/color-picker";

const swatches = [
  { value: "#ef4444", label: "Red" },
  { value: "#f59e0b", label: "Amber" },
  { value: "#10b981", label: "Emerald" },
  { value: "#0ea5e9", label: "Sky" },
  { value: "#8b5cf6", label: "Violet" },
];
---

<ColorPicker
  label="Brand color"
  name="brand-color"
  defaultValue="#ff000080"
  alpha
  swatches={swatches}
/>

import { ColorPicker } from "@/components/starwind/color-picker";

const swatches = [
  { value: "#ef4444", label: "Red" },
  { value: "#f59e0b", label: "Amber" },
  { value: "#10b981", label: "Emerald" },
  { value: "#0ea5e9", label: "Sky" },
  { value: "#8b5cf6", label: "Violet" },
];

export function Example() {
  return (
    <ColorPicker
      label="Brand color"
      name="brand-color"
      defaultValue="#ff000080"
      alpha
      swatches={swatches}
    />
  );
}

---
import {
  ColorPicker,
  ColorPickerContent,
  ColorPickerTrigger,
} from "@/components/starwind/color-picker";
---

<div class="space-y-10">
  <section class="mx-auto max-w-md space-y-3">
    <h3 class="text-sm font-medium">Small</h3>
    <ColorPicker size="sm" label="Compact brand color" defaultValue="#ef4444" />
  </section>

  <section class="mx-auto max-w-md space-y-3">
    <h3 class="text-sm font-medium">Large</h3>
    <ColorPicker size="lg" label="Large accent color" defaultValue="#0ea5e9" />
  </section>

  <section class="mx-auto max-w-md space-y-3">
    <h3 class="text-sm font-medium">Independent popup size</h3>
    <ColorPicker size="sm" defaultValue="#8b5cf6">
      <ColorPickerTrigger>Compact trigger</ColorPickerTrigger>
      <ColorPickerContent size="lg" aria-label="Large color editor" />
    </ColorPicker>
  </section>
</div>

import {
  ColorPicker,
  ColorPickerContent,
  ColorPickerTrigger,
} from "@/components/starwind/color-picker";

export function Example() {
  return (
    <div className="space-y-10">
      <section className="mx-auto max-w-md space-y-3">
        <h3 className="text-sm font-medium">Small</h3>
        <ColorPicker size="sm" label="Compact brand color" defaultValue="#ef4444" />
      </section>

      <section className="mx-auto max-w-md space-y-3">
        <h3 className="text-sm font-medium">Large</h3>
        <ColorPicker size="lg" label="Large accent color" defaultValue="#0ea5e9" />
      </section>

      <section className="mx-auto max-w-md space-y-3">
        <h3 className="text-sm font-medium">Independent popup size</h3>
        <ColorPicker size="sm" defaultValue="#8b5cf6">
          <ColorPickerTrigger>Compact trigger</ColorPickerTrigger>
          <ColorPickerContent size="lg" aria-label="Large color editor" />
        </ColorPicker>
      </section>
    </div>
  );
}

---
import type { ColorPickerValueChangeDetails } from "@starwind-ui/astro/color-picker";
import { ColorPicker } from "@/components/starwind/color-picker";

const swatches = [
  { value: "#10b981", label: "Emerald" },
  { value: "#0ea5e9", label: "Sky" },
  { value: "#8b5cf6", label: "Violet" },
];
---

<div class="grid gap-5 rounded-lg border p-5 sm:grid-cols-[8rem_1fr]">
  <div
    class="aspect-square rounded-md border shadow-sm"
    style="background-color: #4f46e5"
    data-color-preview
    aria-hidden="true"
  />
  <div class="space-y-3">
    <ColorPicker
      inline
      id="preview-color"
      label="Preview color"
      defaultValue="#4f46e5"
      alpha={false}
      formatControl="native"
      showEyeDropper={false}
      swatches={swatches}
    />
    <output class="text-muted-foreground block text-sm tabular-nums" data-color-value>
      #4f46e5
    </output>
  </div>
</div>

<script>
  const root = document.querySelector("#preview-color");
  const preview = document.querySelector<HTMLElement>("[data-color-preview]");
  const value = document.querySelector<HTMLOutputElement>("[data-color-value]");

  root?.addEventListener("starwind:value-change", (event) => {
    const { valueAsString } = (event as CustomEvent<ColorPickerValueChangeDetails>).detail;
    if (preview) preview.style.backgroundColor = valueAsString;
    if (value) value.value = valueAsString;
  });
</script>

import {
  parseColor,
  type ColorPickerColor,
  type ColorPickerFormat,
} from "@starwind-ui/react/color-picker";
import { useState } from "react";
import { ColorPicker } from "@/components/starwind/color-picker";

export function Example() {
  const [value, setValue] = useState<ColorPickerColor | null>(parseColor("#4f46e5"));
  const [format, setFormat] = useState<ColorPickerFormat>("hex");
  const color = value?.toString("hex") ?? "transparent";

  return (
    <div className="grid gap-5 rounded-lg border p-5 sm:grid-cols-[8rem_1fr]">
      <div
        className="aspect-square rounded-md border shadow-sm"
        style={{ backgroundColor: color }}
        aria-hidden="true"
      />
      <div className="space-y-3">
        <ColorPicker
          inline
          label="Preview color"
          value={value}
          onValueChange={setValue}
          format={format}
          onFormatChange={setFormat}
          alpha={false}
          formatControl="native"
          showEyeDropper={false}
          swatches={[
            { value: "#10b981", label: "Emerald" },
            { value: "#0ea5e9", label: "Sky" },
            { value: "#8b5cf6", label: "Violet" },
          ]}
        />
        <output className="text-muted-foreground block text-sm tabular-nums">
          {color}
        </output>
      </div>
    </div>
  );
}

---
import { ColorPicker } from "@/components/starwind/color-picker";
---

<section class="space-y-4 rounded-lg border p-5">
  <div>
    <h3 class="font-medium">Theme accent</h3>
    <p class="text-muted-foreground text-sm">
      Used for links, focus rings, and primary actions.
    </p>
  </div>
  <ColorPicker
    inline
    label="Accent color"
    defaultValue="#7c3aed"
    alpha={false}
    showEyeDropper={false}
    swatches={[
      { value: "#10b981", label: "Emerald" },
      { value: "#0ea5e9", label: "Sky" },
      { value: "#8b5cf6", label: "Violet" },
    ]}
  />
</section>

import { ColorPicker } from "@/components/starwind/color-picker";

export function Example() {
  return (
    <section className="space-y-4 rounded-lg border p-5">
      <div>
        <h3 className="font-medium">Theme accent</h3>
        <p className="text-muted-foreground text-sm">
          Used for links, focus rings, and primary actions.
        </p>
      </div>
      <ColorPicker
        inline
        label="Accent color"
        defaultValue="#7c3aed"
        alpha={false}
        showEyeDropper={false}
        swatches={[
          { value: "#10b981", label: "Emerald" },
          { value: "#0ea5e9", label: "Sky" },
          { value: "#8b5cf6", label: "Violet" },
        ]}
      />
    </section>
  );
}

---
import { Button } from "@/components/starwind/button";
import { ColorPicker } from "@/components/starwind/color-picker";

const swatches = [
  { value: "#10b981", label: "Emerald" },
  { value: "#0ea5e9", label: "Sky" },
  { value: "#8b5cf6", label: "Violet" },
];
---

<form class="space-y-5" data-color-picker-form>
  <ColorPicker
    label="Accent color"
    name="accent"
    defaultValue="#2563eb"
    required
    swatches={swatches}
  />

  <div class="flex flex-wrap items-center gap-3">
    <Button type="submit">Save settings</Button>
    <Button type="reset" variant="outline">Reset</Button>
    <output class="text-muted-foreground text-sm" aria-live="polite">
      Not submitted
    </output>
  </div>
</form>

<script>
  const form = document.querySelector<HTMLFormElement>("[data-color-picker-form]");
  const result = form?.querySelector<HTMLOutputElement>("output");

  form?.addEventListener("submit", (event) => {
    event.preventDefault();
    if (!form.reportValidity()) return;
    if (result) {
      result.value = `Saved accent: ${String(new FormData(form).get("accent") ?? "")}`;
    }
  });
  form?.addEventListener("reset", () => {
    window.setTimeout(() => {
      if (result) result.value = "Reset to default";
    }, 0);
  });
</script>

import { useState } from "react";
import { Button } from "@/components/starwind/button";
import { ColorPicker } from "@/components/starwind/color-picker";

export function Example() {
  const [result, setResult] = useState("Not submitted");

  return (
    <form
      className="space-y-5"
      onSubmit={(event) => {
        event.preventDefault();
        if (!event.currentTarget.reportValidity()) return;
        const value = new FormData(event.currentTarget).get("accent");
        setResult(`Saved accent: ${String(value ?? "")}`);
      }}
      onReset={() => setResult("Reset to default")}
    >
      <ColorPicker
        label="Accent color"
        name="accent"
        defaultValue="#2563eb"
        required
        swatches={[
          { value: "#10b981", label: "Emerald" },
          { value: "#0ea5e9", label: "Sky" },
          { value: "#8b5cf6", label: "Violet" },
        ]}
      />

      <div className="flex flex-wrap items-center gap-3">
        <Button type="submit">Save settings</Button>
        <Button type="reset" variant="outline">Reset</Button>
        <output className="text-muted-foreground text-sm" aria-live="polite">
          {result}
        </output>
      </div>
    </form>
  );
}