F1 component kit/Search and pickers/Swatch picker (PT colours)Phone

Swatch picker (PT colours)

F1 variant22 · swatch-picker

PT colour tiles from the one backend matrix (Q23): code search, the selected tile, retired colours hidden by default (struck when shown).

Covers: swatch-picker primitive. Exports: SwatchPicker.

Whole page:CompactComfortableLaravel · navyDTC · midnight green
AnatomyStatesDensityEN · 中文Edge casesContract

Anatomy

The component as it sits in the product: English, compact, real data shapes.

Search code or colour
PT-0101NavyPT-0102BlackPT-0103Mid greyPT-0104TanPT-0105BurgundyPT-0106EcruPT-0107OlivePT-0108SkyPT-0109OxbloodPT-0110StonePT-0111BottlePT-0112Silver
Codes and colour names are example values (dotted rule); the matrix comes from admin.pt-colors.matrix.

States

5 states, left to right, top to bottom. A mock poll never finishes, so each state is drawn on purpose.

selected
Search code or colour
PT-0101NavyPT-0102BlackPT-0103Mid greyPT-0104TanPT-0105BurgundyPT-0106EcruPT-0107OlivePT-0108SkyPT-0109OxbloodPT-0110StonePT-0111BottlePT-0112Silver
Codes and colour names are example values (dotted rule); the matrix comes from admin.pt-colors.matrix.
search
PT-01
PT-0101NavyPT-0102BlackPT-0103Mid greyPT-0104TanPT-0105BurgundyPT-0106EcruPT-0107OlivePT-0108SkyPT-0109OxbloodPT-0110StonePT-0111BottlePT-0112Silver
Codes and colour names are example values (dotted rule); the matrix comes from admin.pt-colors.matrix.
retired shown
Search code or colour
PT-0101NavyPT-0102BlackPT-0103Mid greyPT-0104TanPT-0105BurgundyPT-0106EcruPT-0107OlivePT-0108SkyPT-0109OxbloodPT-0110StonePT-0111BottlePT-0112Silver
Codes and colour names are example values (dotted rule); the matrix comes from admin.pt-colors.matrix.
no match
Search code or colour

No PT colour matches “PT-09”

Retired colours are hidden; switch them on to search them too.

Codes and colour names are example values (dotted rule); the matrix comes from admin.pt-colors.matrix.
loading
Search code or colour
Codes and colour names are example values (dotted rule); the matrix comes from admin.pt-colors.matrix.

Density

Compact (2b ultra, the default) and comfortable, side by side. Same markup, only the density tokens change.

compact · default · data-density=compact
Search code or colour
PT-0101NavyPT-0102BlackPT-0103Mid greyPT-0104TanPT-0105BurgundyPT-0106EcruPT-0107OlivePT-0108SkyPT-0109OxbloodPT-0110StonePT-0111BottlePT-0112Silver
Codes and colour names are example values (dotted rule); the matrix comes from admin.pt-colors.matrix.
comfortable · data-density=comfortable
Search code or colour
PT-0101NavyPT-0102BlackPT-0103Mid greyPT-0104TanPT-0105BurgundyPT-0106EcruPT-0107OlivePT-0108SkyPT-0109OxbloodPT-0110StonePT-0111BottlePT-0112Silver
Codes and colour names are example values (dotted rule); the matrix comes from admin.pt-colors.matrix.

English · 中文

Staff pick en or cn (T001 Q25). Labels arrive localised; CJK falls back to PingFang SC / Noto Sans SC.

en
Search code or colour
PT-0101NavyPT-0102BlackPT-0103Mid greyPT-0104TanPT-0105BurgundyPT-0106EcruPT-0107OlivePT-0108SkyPT-0109OxbloodPT-0110StonePT-0111BottlePT-0112Silver
Codes and colour names are example values (dotted rule); the matrix comes from admin.pt-colors.matrix.
中文 · lang=zh-Hans
搜索编码或颜色
PT-0101藏青PT-0102黑PT-0103中灰PT-0104棕褐PT-0105酒红PT-0106米白PT-0107橄榄PT-0108天蓝PT-0109牛血红PT-0110石色PT-0111墨绿PT-0112银灰
编码和颜色名为示例值；矩阵来自 admin.pt-colors.matrix。

Long string · permission denied

The long-string case (PL-063) and what a role without the permission sees (the server decides; T003).

long string
Search code or colour
PT-0101Navy (thread + buttons + lining, primary binding at VBC)PT-0102BlackPT-0103Mid greyPT-0104TanPT-0105BurgundyPT-0106EcruPT-0107OlivePT-0108SkyPT-0109OxbloodPT-0110StonePT-0111BottlePT-0112Silver
Codes and colour names are example values (dotted rule); the matrix comes from admin.pt-colors.matrix.
permission denied
Search code or colour
PT-0101NavyPT-0102BlackPT-0103Mid greyPT-0104TanPT-0105BurgundyPT-0106EcruPT-0107OlivePT-0108SkyPT-0109OxbloodPT-0110StonePT-0111BottlePT-0112Silver
Pick only · editing bindings needs pt-colors:write
Codes and colour names are example values (dotted rule); the matrix comes from admin.pt-colors.matrix.

Both apps

One @rj/admin-kit component, two themes: the Laravel admin (navy pinned) and the DTC admin (kit v4 Midnight green), by token swap only.

Laravel admin · :root
Search code or colour
PT-0101NavyPT-0102BlackPT-0103Mid greyPT-0104TanPT-0105BurgundyPT-0106EcruPT-0107OlivePT-0108SkyPT-0109OxbloodPT-0110StonePT-0111BottlePT-0112Silver
Codes and colour names are example values (dotted rule); the matrix comes from admin.pt-colors.matrix.
DTC admin · data-theme=dtc
Search code or colour
PT-0101NavyPT-0102BlackPT-0103Mid greyPT-0104TanPT-0105BurgundyPT-0106EcruPT-0107OlivePT-0108SkyPT-0109OxbloodPT-0110StonePT-0111BottlePT-0112Silver
Codes and colour names are example values (dotted rule); the matrix comes from admin.pt-colors.matrix.

Contract

The @rj/admin-kit API for this family. Mirrored in CONTRACT.md.

Export
SwatchPicker · @rj/admin-kit
Props
colours · value · excludeRetired · search
States
selected · retired · empty · loading · read-only
shadcn / Radix
RadioGroup (tiles)
Accessibility
radiogroup; each tile names code + colour
API operations
admin.pt-colors.matrix (exclude_retired) · admin.pt-colors.index
Phone variant
3-column grid