Colour picker

npm install react-aria-components

"use client";

import {
  ColorArea,
  ColorField,
  ColorPicker as AriaColorPicker,
  ColorSlider,
  ColorSwatch,
  ColorSwatchPicker,
  ColorSwatchPickerItem,
  ColorThumb,
  Input,
  Label,
  SliderTrack,
  type ColorPickerProps as AriaColorPickerProps,
} from "react-aria-components";

const thumb =
  "size-(--tui-color-picker-thumb-size) rounded-full border-solid border-(length:--tui-color-picker-thumb-border-width) border-(--tui-color-picker-thumb-border) shadow-(--tui-color-picker-thumb-shadow) transition-[scale] duration-(--tui-duration) ease-out data-dragging:scale-115 data-focus-visible:scale-115";

const styles = {
  panel: "flex w-(--tui-color-picker-width) max-w-full flex-col gap-(--tui-color-picker-gap) rounded-(--tui-color-picker-radius) bg-(--tui-color-picker-bg) p-(--tui-color-picker-padding) font-(family-name:--tui-font) shadow-(--tui-color-picker-shadow)",
  area: "h-(--tui-color-picker-area-height) w-full shrink-0 rounded-(--tui-color-picker-area-radius)",
  track: "h-(--tui-color-picker-track-height) w-full rounded-full",
  swatches: "flex flex-wrap gap-(--tui-color-picker-swatch-gap)",
  // The chosen swatch keeps its colour and gains a ring a step away from it.
  swatch:
    "flex cursor-default rounded-full outline-none transition-[scale] duration-(--tui-duration) ease-out data-focus-visible:[outline:2px_solid_var(--tui-color-picker-ring)] data-focus-visible:[outline-offset:2px] data-hovered:scale-108 data-selected:[box-shadow:0_0_0_2px_var(--tui-color-picker-bg),0_0_0_4px_var(--tui-color-picker-selected-ring)]",
  chip: "size-(--tui-color-picker-swatch-size) rounded-full [box-shadow:inset_0_0_0_1px_rgb(0_0_0_/_0.08)]",
  field: "flex h-(--tui-color-picker-field-height) items-center justify-between gap-3 rounded-(--tui-color-picker-field-radius) bg-(--tui-color-picker-field-bg) px-(--tui-color-picker-field-padding-x) text-(length:--tui-color-picker-font-size) focus-within:[box-shadow:0_0_0_2px_var(--tui-color-picker-ring)]",
  label: "leading-none text-(--tui-color-picker-muted)",
  input: "w-24 min-w-0 border-none bg-transparent p-0 text-right font-(family-name:--tui-font) text-(length:--tui-color-picker-font-size) leading-none text-(--tui-color-picker-fg) uppercase tabular-nums outline-none",
};

export interface ColorPickerProps extends Omit<AriaColorPickerProps, "children"> {
  /** Colours offered as one press each, under the sliders. */
  swatches?: string[];
  /** The name beside the hex value. */
  label?: string;
  className?: string;
}

/**
 * A panel for choosing a colour: drag in the square for how strong and how
 * bright, along the bar for which colour, press a swatch, or type a value.
 * All four edit the same colour.
 */
export function ColorPicker({ swatches, label = "Hex", className, ...props }: ColorPickerProps) {
  return (
    <AriaColorPicker {...props}>
      <div data-slot="color-picker" className={[styles.panel, className].filter(Boolean).join(" ")}>
        <ColorArea data-slot="color-picker-area" colorSpace="hsb" xChannel="saturation" yChannel="brightness" className={styles.area}>
          <ColorThumb className={thumb} />
        </ColorArea>
        <ColorSlider colorSpace="hsb" channel="hue" className="w-full">
          <SliderTrack data-slot="color-picker-track" className={styles.track}>
            <ColorThumb className={`top-1/2 ${thumb}`} />
          </SliderTrack>
        </ColorSlider>
        {swatches && swatches.length > 0 && (
          <ColorSwatchPicker aria-label="Swatches" className={styles.swatches}>
            {swatches.map((color) => (
              <ColorSwatchPickerItem key={color} color={color} className={styles.swatch}>
                <ColorSwatch className={styles.chip} />
              </ColorSwatchPickerItem>
            ))}
          </ColorSwatchPicker>
        )}
        <ColorField className={styles.field}>
          <Label className={styles.label}>{label}</Label>
          <Input className={styles.input} />
        </ColorField>
      </div>
    </AriaColorPicker>
  );
}

:root {
  color-scheme: light;
  --tui-bg: #ffffff;
  --tui-fg: #0a0a0a;
  --tui-muted: #f5f5f5;
  --tui-muted-fg: #737373;
  --tui-border: #e5e5e5;
  --tui-primary: #171717;
  --tui-primary-fg: #fafafa;
  --tui-ring: #a3a3a3;
  --tui-success: #16a34a;
  --tui-warning: #d97706;
  --tui-danger: #dc2626;
  --tui-radius: 8px;
  --tui-border-width: 1px;
  --tui-space: 4px;
  --tui-shadow: none;
  --tui-font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --tui-text: 14px;
  --tui-duration: 150ms;

  /* Colour picker */
  --tui-color-picker-width: 264px;
  --tui-color-picker-padding: calc(var(--tui-space) * 4);
  --tui-color-picker-gap: calc(var(--tui-space) * 4);
  --tui-color-picker-area-height: 168px;
  --tui-color-picker-track-height: 14px;
  --tui-color-picker-thumb-size: 22px;
  --tui-color-picker-swatch-size: 24px;
  --tui-color-picker-swatch-gap: calc(var(--tui-space) * 2);
  --tui-color-picker-field-height: calc(var(--tui-space) * 11);
  --tui-color-picker-field-padding-x: calc(var(--tui-space) * 4);
  --tui-color-picker-radius: calc(var(--tui-radius) * 3.5);
  --tui-color-picker-area-radius: calc(var(--tui-radius) * 2);
  --tui-color-picker-field-radius: calc(var(--tui-radius) * 1.75);
  --tui-color-picker-thumb-border-width: 3px;
  --tui-color-picker-shadow: 0 0 0 1px color-mix(in srgb, var(--tui-fg) 5%, transparent), 0 2px 6px rgb(0 0 0 / 0.04), 0 16px 40px rgb(0 0 0 / 0.1);
  --tui-color-picker-thumb-shadow: 0 0 0 1px color-mix(in srgb, var(--tui-fg) 5%, transparent), 0 1px 3px rgb(0 0 0 / 0.08);
  --tui-color-picker-font-size: var(--tui-text);
  --tui-color-picker-bg: light-dark(var(--tui-bg), color-mix(in oklab, var(--tui-bg) 90%, var(--tui-fg)));
  --tui-color-picker-fg: var(--tui-fg);
  --tui-color-picker-muted: var(--tui-muted-fg);
  --tui-color-picker-field-bg: color-mix(in srgb, light-dark(var(--tui-bg), color-mix(in oklab, var(--tui-bg) 90%, var(--tui-fg))) 95%, var(--tui-fg));
  --tui-color-picker-thumb-border: #ffffff;
  --tui-color-picker-selected-ring: var(--tui-fg);
  --tui-color-picker-ring: var(--tui-ring);
}

.dark,
[data-theme="dark"] {
  color-scheme: dark;
  --tui-bg: #0a0a0a;
  --tui-fg: #fafafa;
  --tui-muted: #1c1c1c;
  --tui-muted-fg: #a3a3a3;
  --tui-border: #2a2a2a;
  --tui-primary: #fafafa;
  --tui-primary-fg: #171717;
  --tui-ring: #737373;
  --tui-success: #22c55e;
  --tui-warning: #f59e0b;
  --tui-danger: #ef4444;
}