AccentSwatches

An accent picker, a few colors at a time. A full palette is more than a settings row can carry, so a handful stand in the open and a menu behind them holds every color, the featured ones included.

import { AccentSwatches } from '@basmilius/react-ui';

import { useState } from 'react';
import { AccentSwatches } from '@basmilius/react-ui';

type Accent = 'blue' | 'violet' | 'rose' | 'amber' | 'green' | 'teal' | 'slate';

const ACCENTS: { id: Accent; color: string }[] = [
    { id: 'blue', color: '#2563eb' },
    { id: 'violet', color: '#7c3aed' },
    { id: 'rose', color: '#e11d48' },
    { id: 'amber', color: '#d97706' },
    { id: 'green', color: '#16a34a' },
    { id: 'teal', color: '#0d9488' },
    { id: 'slate', color: '#475569' }
];

const NAMES: Record<Accent, string> = {
    blue: 'Blue',
    violet: 'Violet',
    rose: 'Rose',
    amber: 'Amber',
    green: 'Green',
    teal: 'Teal',
    slate: 'Slate'
};

export default function AccentSwatchesDemo() {
    const [accent, setAccent] = useState<Accent>('teal');

    return (
        <AccentSwatches<Accent>
            label="Accent color"
            value={accent}
            onValueChange={setAccent}
            accents={ACCENTS}
            featured={['blue', 'violet', 'rose', 'green']}
            labelOf={(id) => NAMES[id]}
        />
    );
}

Teal is picked above but not featured, so the "more colors" swatch wears it. A value that is no accent at all picks nothing.

Props

AccentSwatches is generic over the accent's id, a string type.

Prop	Type
value	string | undefined	Required.
onValueChange	(id: Id) => void	Required.
label	string	Required. The name of the group.
accents	readonly { id: Id; color: string }[]	Required. Every color on offer, in the order of the menu.
featured	readonly Id[]	Required. The few drawn in the open, in the order they stand.
labelOf	(id: Id) => string	Required. The name of a color, for its tooltip and its menu row.
className	string
ref	Ref<HTMLDivElement>

AccentSwatchesProps is an exported type.