@adecore/ui 0.27.0 → 0.27.1

package/dist/ColorSwatch.d.ts

@@ -8,7 +8,8 @@ export interface ColorSwatchProps extends ComponentProps<'button'> {
     color?: string;
     picked?: boolean;
     on?: keyof typeof PICKED_RING;
+    tick?: boolean;
     render?: useRender.RenderProp;
 }
-export declare function ColorSwatch({ color, picked, on, render, className, style, ref, children, ...props }: ColorSwatchProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export declare function ColorSwatch({ color, picked, on, tick, render, className, style, ref, children, ...props }: ColorSwatchProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 export {};

package/dist/ColorSwatch.js

@@ -14,7 +14,7 @@ const PICKED_RING = {
  * One color, drawn as the color itself. Its name belongs in a tooltip, so the circle carries a tick
  * alone when it is picked. Children replace the tick, such as the ellipsis of a "more colors" swatch.
  */
-export function ColorSwatch({ color, picked = false, on = 'surface', render, className, style, ref, children, ...props }) {
+export function ColorSwatch({ color, picked = false, on = 'surface', tick = true, render, className, style, ref, children, ...props }) {
     return useRender({
         render: render ?? _jsx("button", { type: "button" }),
         ref,
@@ -22,7 +22,7 @@ export function ColorSwatch({ color, picked = false, on = 'surface', render, cla
             ...props,
             className: clsx(SWATCH, color === undefined ? 'border border-border-strong text-text-muted' : picked && PICKED_RING[on], className),
             style: color === undefined ? style : { ...style, background: color },
-            children: children ?? (picked && _jsx(Icon, { icon: Check, size: 12 }))
+            children: children ?? (picked && tick && _jsx(Icon, { icon: Check, size: 12 }))
         }
     });
 }

package/dist/ColorWheelPicker.d.ts

@@ -0,0 +1,16 @@
+import { type Ref } from 'react';
+export interface ColorWheelPickerProps<Id extends string> {
+    value: Id;
+    onValueChange(id: Id): void;
+    onPreviewChange?(id: Id | null): void;
+    label: string;
+    rings: readonly (readonly Id[])[];
+    center?: Id;
+    colorOf(id: Id): string;
+    labelOf(id: Id): string;
+    disabled?: boolean;
+    align?: 'start' | 'end';
+    className?: string;
+    ref?: Ref<HTMLButtonElement>;
+}
+export declare function ColorWheelPicker<Id extends string>({ value, onValueChange, onPreviewChange, label, rings, center, colorOf, labelOf, disabled, align, className, ref }: ColorWheelPickerProps<Id>): import("react").JSX.Element;

package/dist/ColorWheelPicker.js

@@ -0,0 +1,97 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useId, useRef, useState } from 'react';
+import { ChevronDown } from 'lucide-react';
+import { ColorSwatch } from './ColorSwatch.js';
+import { Icon } from './Icon.js';
+import { PopoverPopup, PopoverRoot, PopoverTrigger } from './popover/parts.js';
+import { triggerClassName } from './select-shared.js';
+const SWATCH_SIZE = 24;
+/* The outer ring stands this far from the middle, further when its swatches would not keep a gap between them otherwise. */
+const MIN_RADIUS = 97;
+const MIN_GAP = 8;
+/* Room past the outer ring for the ring a picked swatch wears. */
+const EDGE = 7;
+/* Every swatch's top left corner in whole pixels, the rings evenly apart from the outer one to the middle, and the size of the wheel. */
+function layout(rings, center) {
+    const outer = rings[0]?.length ?? 0;
+    const radius = Math.max(MIN_RADIUS, outer > 1 ? Math.ceil((SWATCH_SIZE + MIN_GAP) / (2 * Math.sin(Math.PI / outer))) : 0);
+    const size = 2 * (radius + SWATCH_SIZE / 2 + EDGE);
+    const middle = (size - SWATCH_SIZE) / 2;
+    const spot = (id, turn, distance) => {
+        const angle = turn * 2 * Math.PI - Math.PI / 2;
+        return { id, left: Math.round(middle + distance * Math.cos(angle)), top: Math.round(middle + distance * Math.sin(angle)) };
+    };
+    const spots = rings.flatMap((ring, depth) => ring.map((id, i) => spot(id, i / ring.length, (radius * (rings.length - depth)) / rings.length)));
+    return { size, spots: center === undefined ? spots : [...spots, spot(center, 0, 0)] };
+}
+const STEPS = {
+    ArrowRight: (index, count) => (index + 1) % count,
+    ArrowDown: (index, count) => (index + 1) % count,
+    ArrowLeft: (index, count) => (index - 1 + count) % count,
+    ArrowUp: (index, count) => (index - 1 + count) % count,
+    Home: () => 0,
+    End: (_, count) => count - 1
+};
+/*
+ * A color picked from a wheel behind a trigger that holds the one in use and lines up with a select.
+ * While the wheel is open the swatch under the pointer or the focus is reported as a preview, so the
+ * caller can show it in place; its name stands under the wheel, which is why a swatch carries no
+ * tooltip. The wheel is one tab stop: the arrows walk it in its order and only Enter, Space or a click
+ * picks. Every preview ends with null, after a pick as well as on closing without one or on going away while open.
+ */
+export function ColorWheelPicker({ value, onValueChange, onPreviewChange, label, rings, center, colorOf, labelOf, disabled, align = 'start', className, ref }) {
+    const labelId = useId();
+    const valueId = useId();
+    const [open, setOpen] = useState(false);
+    const [looking, setLooking] = useState(null);
+    const [focused, setFocused] = useState(null);
+    const wheel = useRef(null);
+    const { size, spots } = layout(rings, center);
+    const tabStop = spots.find((spot) => spot.id === (focused ?? value))?.id ?? spots[0]?.id;
+    // Read by the cleanup below, which runs after the state and the props of its render are gone.
+    const preview = useRef({ looking: false, onPreviewChange });
+    useEffect(() => {
+        preview.current.onPreviewChange = onPreviewChange;
+    });
+    const look = (id) => {
+        setLooking(id);
+        preview.current.looking = id !== null;
+        onPreviewChange?.(id);
+    };
+    // A picker taken away while a color is previewed (its dialog closed under it) gets no close of its
+    // popover, so it ends the preview itself rather than leave the caller showing a color nobody picked.
+    useEffect(() => () => {
+        if (preview.current.looking) {
+            preview.current.onPreviewChange?.(null);
+        }
+    }, []);
+    const close = () => {
+        setOpen(false);
+        setFocused(null);
+        look(null);
+    };
+    const step = (event) => {
+        const next = STEPS[event.key];
+        const swatches = [...(wheel.current?.querySelectorAll('[role="radio"]') ?? [])];
+        const index = swatches.indexOf(event.target);
+        if (next === undefined || index < 0) {
+            return;
+        }
+        event.preventDefault();
+        swatches[next(index, swatches.length)]?.focus();
+    };
+    return (_jsxs(PopoverRoot, { open: open, onOpenChange: (next) => {
+            if (next) {
+                setOpen(true);
+            }
+            else {
+                close();
+            }
+        }, children: [_jsx("span", { id: labelId, hidden: true, children: label }), _jsxs(PopoverTrigger, { ref: ref, disabled: disabled, "aria-labelledby": `${labelId} ${valueId}`, className: triggerClassName('md', 'outlined', className), children: [_jsx("span", { className: "h-3.5 w-3.5 shrink-0 rounded-full", style: { background: colorOf(value) }, "aria-hidden": true }), _jsx("span", { id: valueId, className: "truncate", children: labelOf(value) }), _jsx("span", { className: "ml-auto flex shrink-0 pl-1", children: _jsx(Icon, { icon: ChevronDown, size: 14 }) })] }), _jsx(PopoverPopup, { align: align, initialFocus: () => wheel.current?.querySelector('[aria-checked="true"]') ?? false, children: _jsxs("div", { className: "flex flex-col items-center gap-3 p-3", children: [_jsx("div", { ref: wheel, role: "radiogroup", "aria-label": label, className: "relative", style: { width: size, height: size }, onPointerLeave: () => look(null), onKeyDown: step, children: spots.map(({ id, left, top }) => (_jsx(ColorSwatch, { role: "radio", "aria-checked": value === id, "aria-label": labelOf(id), tabIndex: id === tabStop ? 0 : -1, color: colorOf(id), picked: value === id, tick: false, on: "popup", className: "absolute", style: { left, top }, onPointerEnter: () => look(id), onFocus: () => {
+                                    setFocused(id);
+                                    look(id);
+                                }, onClick: () => {
+                                    onValueChange(id);
+                                    close();
+                                } }, id))) }), _jsx("span", { className: "text-xs text-text-muted", children: labelOf(looking ?? value) })] }) })] }));
+}

package/dist/Select.js

@@ -7,7 +7,7 @@ import { Icon } from './Icon.js';
 import { MENU_LABEL } from './menu/parts.js';
 import { renderPositioner } from './popup-layer.js';
 import { RowContent } from './select-row.js';
-import { isGroup, rowClassName, TRIGGER_DISABLED, TRIGGER_SIZE, TRIGGER_VARIANT } from './select-shared.js';
+import { isGroup, rowClassName, triggerClassName } from './select-shared.js';
 import { SelectSearch } from './SelectSearch.js';
 function Row({ item, picked }) {
     return (_jsx(BaseSelect.Item, { className: rowClassName(item), value: item.value, label: item.label, disabled: item.disabled, children: _jsx(RowContent, { item: item, picked: picked, text: _jsx(BaseSelect.ItemText, { children: item.label }) }) }));
@@ -27,7 +27,7 @@ function PlainSelect({ value, onValueChange, items, label, placeholder, size = '
     const groups = items.length > 0 && isGroup(items[0]) ? items : null;
     const flat = groups ? groups.flatMap((group) => group.items) : items;
     const selected = flat.find((item) => item.value === value) ?? null;
-    return (_jsxs(BaseSelect.Root, { items: flat.map((item) => ({ value: item.value, label: item.label })), value: value, disabled: disabled, onValueChange: (next) => onValueChange(next), children: [_jsxs(BaseSelect.Trigger, { ref: ref, "aria-label": label, className: clsx('flex shrink-0 items-center whitespace-nowrap text-xs', TRIGGER_SIZE[size], TRIGGER_VARIANT[variant], TRIGGER_DISABLED, className), children: [selected?.icon, _jsx(BaseSelect.Value, { className: clsx(truncateValue && 'truncate'), children: () => selected?.label ?? placeholder ?? t('action.select') }), _jsx(BaseSelect.Icon, { className: "ml-auto flex shrink-0 pl-1", children: _jsx(Icon, { icon: ChevronDown, size: 14 }) })] }), _jsx(BaseSelect.Portal, { children: _jsx(BaseSelect.Positioner, { className: "popup-positioner", render: renderPositioner, side: "bottom", align: align, sideOffset: 6, alignItemWithTrigger: false, children: _jsx(BaseSelect.Popup, { className: "menu-popup", children: _jsx(BaseSelect.List, { className: "max-h-80 overflow-auto", children: groups
+    return (_jsxs(BaseSelect.Root, { items: flat.map((item) => ({ value: item.value, label: item.label })), value: value, disabled: disabled, onValueChange: (next) => onValueChange(next), children: [_jsxs(BaseSelect.Trigger, { ref: ref, "aria-label": label, className: triggerClassName(size, variant, className), children: [selected?.icon, _jsx(BaseSelect.Value, { className: clsx(truncateValue && 'truncate'), children: () => selected?.label ?? placeholder ?? t('action.select') }), _jsx(BaseSelect.Icon, { className: "ml-auto flex shrink-0 pl-1", children: _jsx(Icon, { icon: ChevronDown, size: 14 }) })] }), _jsx(BaseSelect.Portal, { children: _jsx(BaseSelect.Positioner, { className: "popup-positioner", render: renderPositioner, side: "bottom", align: align, sideOffset: 6, alignItemWithTrigger: false, children: _jsx(BaseSelect.Popup, { className: "menu-popup", children: _jsx(BaseSelect.List, { className: "max-h-80 overflow-auto", children: groups
                                 ? groups.map((group) => (_jsxs(BaseSelect.Group, { children: [_jsx(BaseSelect.GroupLabel, { className: MENU_LABEL, children: group.label }), group.items.map((item) => (_jsx(Row, { item: item, picked: item.value === value }, item.value)))] }, group.label)))
                                 : flat.map((item) => _jsx(Row, { item: item, picked: item.value === value }, item.value)) }) }) }) })] }));
 }

package/dist/SelectSearch.js

@@ -8,7 +8,7 @@ import { Icon } from './Icon.js';
 import { MENU_LABEL } from './menu/parts.js';
 import { renderPositioner } from './popup-layer.js';
 import { RowContent } from './select-row.js';
-import { isGroup, rowClassName, TRIGGER_DISABLED, TRIGGER_SIZE, TRIGGER_VARIANT } from './select-shared.js';
+import { isGroup, rowClassName, triggerClassName } from './select-shared.js';
 /* The `Select` with a search field on top of its options, for lists too long to scan. A combobox of Base UI brings the filtering and the keyboard. */
 export function SelectSearch({ value, onValueChange, items, label, placeholder, searchPlaceholder, size = 'md', variant = 'outlined', disabled, align = 'start', truncateValue = true, className, ref }) {
     const { t } = useTranslation('ui');
@@ -33,7 +33,7 @@ export function SelectSearch({ value, onValueChange, items, label, placeholder,
             if (!open) {
                 setQuery('');
             }
-        }, children: [_jsxs(Combobox.Trigger, { ref: ref, "aria-label": label, className: clsx('flex shrink-0 items-center whitespace-nowrap text-xs', TRIGGER_SIZE[size], TRIGGER_VARIANT[variant], TRIGGER_DISABLED, className), children: [selected?.icon, _jsx("span", { className: clsx(truncateValue && 'truncate'), children: selected?.label ?? placeholder ?? t('action.select') }), _jsx("span", { className: "ml-auto flex shrink-0 pl-1", children: _jsx(Icon, { icon: ChevronDown, size: 14 }) })] }), _jsx(Combobox.Portal, { children: _jsx(Combobox.Positioner, { className: "popup-positioner", render: renderPositioner, side: "bottom", align: align, sideOffset: 6, children: _jsxs(Combobox.Popup, { className: "menu-popup flex max-h-96 flex-col", children: [_jsxs("label", { className: "flex shrink-0 items-center gap-2 border-b border-border px-3", children: [_jsx(Icon, { icon: Search, size: 14, className: "shrink-0 text-text-faint" }), _jsx(Combobox.Input, { "aria-label": searchLabel, placeholder: searchLabel, className: "h-9 min-w-0 flex-1 bg-transparent text-sm text-text outline-none placeholder:text-text-faint" })] }), _jsx(Combobox.Empty, { className: "px-3 py-4 text-center text-xs text-text-faint empty:hidden", children: t('select.noMatch', { query }) }), _jsx(Combobox.List, { className: "min-h-0 overflow-auto", children: groups
+        }, children: [_jsxs(Combobox.Trigger, { ref: ref, "aria-label": label, className: triggerClassName(size, variant, className), children: [selected?.icon, _jsx("span", { className: clsx(truncateValue && 'truncate'), children: selected?.label ?? placeholder ?? t('action.select') }), _jsx("span", { className: "ml-auto flex shrink-0 pl-1", children: _jsx(Icon, { icon: ChevronDown, size: 14 }) })] }), _jsx(Combobox.Portal, { children: _jsx(Combobox.Positioner, { className: "popup-positioner", render: renderPositioner, side: "bottom", align: align, sideOffset: 6, children: _jsxs(Combobox.Popup, { className: "menu-popup flex max-h-96 flex-col", children: [_jsxs("label", { className: "flex shrink-0 items-center gap-2 border-b border-border px-3", children: [_jsx(Icon, { icon: Search, size: 14, className: "shrink-0 text-text-faint" }), _jsx(Combobox.Input, { "aria-label": searchLabel, placeholder: searchLabel, className: "h-9 min-w-0 flex-1 bg-transparent text-sm text-text outline-none placeholder:text-text-faint" })] }), _jsx(Combobox.Empty, { className: "px-3 py-4 text-center text-xs text-text-faint empty:hidden", children: t('select.noMatch', { query }) }), _jsx(Combobox.List, { className: "min-h-0 overflow-auto", children: groups
                                     ? (group) => (_jsxs(Combobox.Group, { items: group.items, children: [_jsx(Combobox.GroupLabel, { className: MENU_LABEL, children: group.value }), _jsx(Combobox.Collection, { children: renderRow })] }, group.value))
                                     : renderRow })] }) }) })] }));
 }

package/dist/index.d.ts

@@ -20,6 +20,7 @@ export { Checkbox, type CheckboxProps } from './Checkbox.tsx';
 export { ChoiceCards, type Choice, type ChoiceCardsProps } from './ChoiceCards.tsx';
 export { CloseButton, type CloseButtonProps } from './CloseButton.tsx';
 export { ColorSwatch, type ColorSwatchProps } from './ColorSwatch.tsx';
+export { ColorWheelPicker, type ColorWheelPickerProps } from './ColorWheelPicker.tsx';
 export { ColumnResizeHandle, type ColumnResizeHandleProps } from './ColumnResizeHandle.tsx';
 export { DisabledReason, type DisabledReasonProps } from './DisabledReason.tsx';
 export { DockShell, type DockShellProps } from './DockShell.tsx';

package/dist/index.js

@@ -19,6 +19,7 @@ export { Checkbox } from './Checkbox.js';
 export { ChoiceCards } from './ChoiceCards.js';
 export { CloseButton } from './CloseButton.js';
 export { ColorSwatch } from './ColorSwatch.js';
+export { ColorWheelPicker } from './ColorWheelPicker.js';
 export { ColumnResizeHandle } from './ColumnResizeHandle.js';
 export { DisabledReason } from './DisabledReason.js';
 export { DockShell } from './DockShell.js';

package/dist/select-shared.d.ts

@@ -20,4 +20,5 @@ export declare const TRIGGER_VARIANT: {
     readonly ghost: 'rounded-md text-text-muted hover:bg-surface-hover hover:text-text data-[popup-open]:bg-surface-active data-[popup-open]:text-text data-disabled:hover:bg-transparent data-disabled:hover:text-text-muted';
 };
 export declare const TRIGGER_DISABLED = "data-disabled:cursor-default data-disabled:opacity-50";
+export declare const triggerClassName: (size: keyof typeof TRIGGER_SIZE, variant: keyof typeof TRIGGER_VARIANT, className?: string) => string;
 export declare const rowClassName: (item: SelectItem<string>) => string;

package/dist/select-shared.js

@@ -10,5 +10,7 @@ export const TRIGGER_VARIANT = {
 };
 /* The dimmed look `Switch` and `Button` wear when disabled, so a select that cannot open reads as such. */
 export const TRIGGER_DISABLED = 'data-disabled:cursor-default data-disabled:opacity-50';
+/* The trigger of every select, and of any other picker that stands in a row of selects and has to line up with them. */
+export const triggerClassName = (size, variant, className) => clsx('flex shrink-0 items-center whitespace-nowrap text-xs', TRIGGER_SIZE[size], TRIGGER_VARIANT[variant], TRIGGER_DISABLED, className);
 /* A description makes the row two lines high; the box keeps the icon on the label's line. */
 export const rowClassName = (item) => clsx('menu-item', item.description && 'items-start');

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adecore/ui",
-  "version": "0.27.0",
+  "version": "0.27.1",
   "description": "React components, a theme, formatters and a settings dialog for desktop-grade apps on React 19, Base UI and Tailwind 4.",
   "license": "FSL-1.1-MIT",
   "author": "Bas Milius",

package/src/ColorSwatch.tsx

@@ -19,6 +19,8 @@ export interface ColorSwatchProps extends ComponentProps<'button'> {
     picked?: boolean;
     /* On the surface behind a popup, or inside the popup itself. */
     on?: keyof typeof PICKED_RING;
+    /* Whether a picked swatch draws its tick. Off where the ring alone marks it, such as on a swatch of two tones, where a tick reads as a glitch. */
+    tick?: boolean;
     /* Another element to be the swatch, such as a menu trigger, or `<Menu.Item unstyled />` so the row's padding and highlight stay off it. */
     render?: useRender.RenderProp;
 }
@@ -27,7 +29,7 @@ export interface ColorSwatchProps extends ComponentProps<'button'> {
  * One color, drawn as the color itself. Its name belongs in a tooltip, so the circle carries a tick
  * alone when it is picked. Children replace the tick, such as the ellipsis of a "more colors" swatch.
  */
-export function ColorSwatch({ color, picked = false, on = 'surface', render, className, style, ref, children, ...props }: ColorSwatchProps) {
+export function ColorSwatch({ color, picked = false, on = 'surface', tick = true, render, className, style, ref, children, ...props }: ColorSwatchProps) {
     return useRender({
         render: render ?? <button type="button" />,
         ref,
@@ -35,7 +37,7 @@ export function ColorSwatch({ color, picked = false, on = 'surface', render, cla
             ...props,
             className: clsx(SWATCH, color === undefined ? 'border border-border-strong text-text-muted' : picked && PICKED_RING[on], className),
             style: color === undefined ? style : { ...style, background: color },
-            children: children ?? (picked && <Icon icon={Check} size={12} />)
+            children: children ?? (picked && tick && <Icon icon={Check} size={12} />)
         }
     });
 }

package/src/ColorWheelPicker.tsx

@@ -0,0 +1,193 @@
+import { useEffect, useId, useRef, useState, type KeyboardEvent, type Ref } from 'react';
+import { ChevronDown } from 'lucide-react';
+import { ColorSwatch } from './ColorSwatch.tsx';
+import { Icon } from './Icon.tsx';
+import { PopoverPopup, PopoverRoot, PopoverTrigger } from './popover/parts.tsx';
+import { triggerClassName } from './select-shared.ts';
+
+const SWATCH_SIZE = 24;
+/* The outer ring stands this far from the middle, further when its swatches would not keep a gap between them otherwise. */
+const MIN_RADIUS = 97;
+const MIN_GAP = 8;
+/* Room past the outer ring for the ring a picked swatch wears. */
+const EDGE = 7;
+
+export interface ColorWheelPickerProps<Id extends string> {
+    value: Id;
+    onValueChange(id: Id): void;
+    /* The one under the pointer or the focus while the wheel is open, so the caller can show it before it is picked; null once none is looked at. */
+    onPreviewChange?(id: Id | null): void;
+    /* The accessible name of the trigger and of the wheel; the row the picker stands in usually carries the visible one. */
+    label: string;
+    /* The swatches round the wheel, a ring at a time from the outside in, each in its own order from the top. */
+    rings: readonly (readonly Id[])[];
+    /* The one in the middle, if any. */
+    center?: Id;
+    /* Any CSS background, a gradient too. */
+    colorOf(id: Id): string;
+    labelOf(id: Id): string;
+    disabled?: boolean;
+    align?: 'start' | 'end';
+    className?: string;
+    ref?: Ref<HTMLButtonElement>;
+}
+
+interface Spot<Id> {
+    id: Id;
+    left: number;
+    top: number;
+}
+
+/* Every swatch's top left corner in whole pixels, the rings evenly apart from the outer one to the middle, and the size of the wheel. */
+function layout<Id>(rings: readonly (readonly Id[])[], center: Id | undefined): { size: number; spots: Spot<Id>[] } {
+    const outer = rings[0]?.length ?? 0;
+    const radius = Math.max(MIN_RADIUS, outer > 1 ? Math.ceil((SWATCH_SIZE + MIN_GAP) / (2 * Math.sin(Math.PI / outer))) : 0);
+    const size = 2 * (radius + SWATCH_SIZE / 2 + EDGE);
+    const middle = (size - SWATCH_SIZE) / 2;
+    const spot = (id: Id, turn: number, distance: number): Spot<Id> => {
+        const angle = turn * 2 * Math.PI - Math.PI / 2;
+        return { id, left: Math.round(middle + distance * Math.cos(angle)), top: Math.round(middle + distance * Math.sin(angle)) };
+    };
+    const spots = rings.flatMap((ring, depth) => ring.map((id, i) => spot(id, i / ring.length, (radius * (rings.length - depth)) / rings.length)));
+    return { size, spots: center === undefined ? spots : [...spots, spot(center, 0, 0)] };
+}
+
+const STEPS: Record<string, (index: number, count: number) => number> = {
+    ArrowRight: (index, count) => (index + 1) % count,
+    ArrowDown: (index, count) => (index + 1) % count,
+    ArrowLeft: (index, count) => (index - 1 + count) % count,
+    ArrowUp: (index, count) => (index - 1 + count) % count,
+    Home: () => 0,
+    End: (_, count) => count - 1
+};
+
+/*
+ * A color picked from a wheel behind a trigger that holds the one in use and lines up with a select.
+ * While the wheel is open the swatch under the pointer or the focus is reported as a preview, so the
+ * caller can show it in place; its name stands under the wheel, which is why a swatch carries no
+ * tooltip. The wheel is one tab stop: the arrows walk it in its order and only Enter, Space or a click
+ * picks. Every preview ends with null, after a pick as well as on closing without one or on going away while open.
+ */
+export function ColorWheelPicker<Id extends string>({
+    value,
+    onValueChange,
+    onPreviewChange,
+    label,
+    rings,
+    center,
+    colorOf,
+    labelOf,
+    disabled,
+    align = 'start',
+    className,
+    ref
+}: ColorWheelPickerProps<Id>) {
+    const labelId = useId();
+    const valueId = useId();
+    const [open, setOpen] = useState(false);
+    const [looking, setLooking] = useState<Id | null>(null);
+    const [focused, setFocused] = useState<Id | null>(null);
+    const wheel = useRef<HTMLDivElement>(null);
+    const { size, spots } = layout(rings, center);
+    const tabStop = spots.find((spot) => spot.id === (focused ?? value))?.id ?? spots[0]?.id;
+    // Read by the cleanup below, which runs after the state and the props of its render are gone.
+    const preview = useRef({ looking: false, onPreviewChange });
+    useEffect(() => {
+        preview.current.onPreviewChange = onPreviewChange;
+    });
+    const look = (id: Id | null): void => {
+        setLooking(id);
+        preview.current.looking = id !== null;
+        onPreviewChange?.(id);
+    };
+    // A picker taken away while a color is previewed (its dialog closed under it) gets no close of its
+    // popover, so it ends the preview itself rather than leave the caller showing a color nobody picked.
+    useEffect(
+        () => () => {
+            if (preview.current.looking) {
+                preview.current.onPreviewChange?.(null);
+            }
+        },
+        []
+    );
+    const close = (): void => {
+        setOpen(false);
+        setFocused(null);
+        look(null);
+    };
+    const step = (event: KeyboardEvent<HTMLDivElement>): void => {
+        const next = STEPS[event.key];
+        const swatches = [...(wheel.current?.querySelectorAll<HTMLElement>('[role="radio"]') ?? [])];
+        const index = swatches.indexOf(event.target as HTMLElement);
+        if (next === undefined || index < 0) {
+            return;
+        }
+        event.preventDefault();
+        swatches[next(index, swatches.length)]?.focus();
+    };
+    return (
+        <PopoverRoot
+            open={open}
+            onOpenChange={(next) => {
+                if (next) {
+                    setOpen(true);
+                } else {
+                    close();
+                }
+            }}
+        >
+            <span id={labelId} hidden>
+                {label}
+            </span>
+            <PopoverTrigger ref={ref} disabled={disabled} aria-labelledby={`${labelId} ${valueId}`} className={triggerClassName('md', 'outlined', className)}>
+                <span className="h-3.5 w-3.5 shrink-0 rounded-full" style={{ background: colorOf(value) }} aria-hidden />
+                <span id={valueId} className="truncate">
+                    {labelOf(value)}
+                </span>
+                <span className="ml-auto flex shrink-0 pl-1">
+                    <Icon icon={ChevronDown} size={14} />
+                </span>
+            </PopoverTrigger>
+            {/* The swatch in use takes the focus: the first would otherwise, and a swatch with the focus is previewed, so the caller would show a color nobody asked for. */}
+            <PopoverPopup align={align} initialFocus={() => wheel.current?.querySelector<HTMLElement>('[aria-checked="true"]') ?? false}>
+                <div className="flex flex-col items-center gap-3 p-3">
+                    <div
+                        ref={wheel}
+                        role="radiogroup"
+                        aria-label={label}
+                        className="relative"
+                        style={{ width: size, height: size }}
+                        onPointerLeave={() => look(null)}
+                        onKeyDown={step}
+                    >
+                        {spots.map(({ id, left, top }) => (
+                            <ColorSwatch
+                                key={id}
+                                role="radio"
+                                aria-checked={value === id}
+                                aria-label={labelOf(id)}
+                                tabIndex={id === tabStop ? 0 : -1}
+                                color={colorOf(id)}
+                                picked={value === id}
+                                tick={false}
+                                on="popup"
+                                className="absolute"
+                                style={{ left, top }}
+                                onPointerEnter={() => look(id)}
+                                onFocus={() => {
+                                    setFocused(id);
+                                    look(id);
+                                }}
+                                onClick={() => {
+                                    onValueChange(id);
+                                    close();
+                                }}
+                            />
+                        ))}
+                    </div>
+                    <span className="text-xs text-text-muted">{labelOf(looking ?? value)}</span>
+                </div>
+            </PopoverPopup>
+        </PopoverRoot>
+    );
+}

package/src/Select.tsx

@@ -7,7 +7,7 @@ import { Icon } from './Icon.tsx';
 import { MENU_LABEL } from './menu/parts.tsx';
 import { renderPositioner } from './popup-layer.ts';
 import { RowContent } from './select-row.tsx';
-import { isGroup, rowClassName, TRIGGER_DISABLED, TRIGGER_SIZE, TRIGGER_VARIANT, type SelectGroup, type SelectItem } from './select-shared.ts';
+import { isGroup, rowClassName, triggerClassName, type SelectGroup, type SelectItem } from './select-shared.ts';
 import { SelectSearch } from './SelectSearch.tsx';
 
 export type { SelectGroup, SelectItem };
@@ -79,17 +79,7 @@ function PlainSelect<T extends string>({
             disabled={disabled}
             onValueChange={(next) => onValueChange(next as T)}
         >
-            <BaseSelect.Trigger
-                ref={ref}
-                aria-label={label}
-                className={clsx(
-                    'flex shrink-0 items-center whitespace-nowrap text-xs',
-                    TRIGGER_SIZE[size],
-                    TRIGGER_VARIANT[variant],
-                    TRIGGER_DISABLED,
-                    className
-                )}
-            >
+            <BaseSelect.Trigger ref={ref} aria-label={label} className={triggerClassName(size, variant, className)}>
                 {selected?.icon}
                 <BaseSelect.Value className={clsx(truncateValue && 'truncate')}>{() => selected?.label ?? placeholder ?? t('action.select')}</BaseSelect.Value>
                 <BaseSelect.Icon className="ml-auto flex shrink-0 pl-1">

package/src/SelectSearch.tsx

@@ -8,7 +8,7 @@ import { MENU_LABEL } from './menu/parts.tsx';
 import { renderPositioner } from './popup-layer.ts';
 import type { SelectProps } from './Select.tsx';
 import { RowContent } from './select-row.tsx';
-import { isGroup, rowClassName, TRIGGER_DISABLED, TRIGGER_SIZE, TRIGGER_VARIANT, type SelectGroup, type SelectItem } from './select-shared.ts';
+import { isGroup, rowClassName, triggerClassName, type SelectGroup, type SelectItem } from './select-shared.ts';
 
 /* The `Select` with a search field on top of its options, for lists too long to scan. A combobox of Base UI brings the filtering and the keyboard. */
 export function SelectSearch<T extends string>({
@@ -65,17 +65,7 @@ export function SelectSearch<T extends string>({
                 }
             }}
         >
-            <Combobox.Trigger
-                ref={ref}
-                aria-label={label}
-                className={clsx(
-                    'flex shrink-0 items-center whitespace-nowrap text-xs',
-                    TRIGGER_SIZE[size],
-                    TRIGGER_VARIANT[variant],
-                    TRIGGER_DISABLED,
-                    className
-                )}
-            >
+            <Combobox.Trigger ref={ref} aria-label={label} className={triggerClassName(size, variant, className)}>
                 {selected?.icon}
                 <span className={clsx(truncateValue && 'truncate')}>{selected?.label ?? placeholder ?? t('action.select')}</span>
                 <span className="ml-auto flex shrink-0 pl-1">

package/src/index.ts

@@ -35,6 +35,7 @@ export { Checkbox, type CheckboxProps } from './Checkbox.tsx';
 export { ChoiceCards, type Choice, type ChoiceCardsProps } from './ChoiceCards.tsx';
 export { CloseButton, type CloseButtonProps } from './CloseButton.tsx';
 export { ColorSwatch, type ColorSwatchProps } from './ColorSwatch.tsx';
+export { ColorWheelPicker, type ColorWheelPickerProps } from './ColorWheelPicker.tsx';
 export { ColumnResizeHandle, type ColumnResizeHandleProps } from './ColumnResizeHandle.tsx';
 export { DisabledReason, type DisabledReasonProps } from './DisabledReason.tsx';
 export { DockShell, type DockShellProps } from './DockShell.tsx';

package/src/select-shared.ts

@@ -30,5 +30,9 @@ export const TRIGGER_VARIANT = {
 /* The dimmed look `Switch` and `Button` wear when disabled, so a select that cannot open reads as such. */
 export const TRIGGER_DISABLED = 'data-disabled:cursor-default data-disabled:opacity-50';
 
+/* The trigger of every select, and of any other picker that stands in a row of selects and has to line up with them. */
+export const triggerClassName = (size: keyof typeof TRIGGER_SIZE, variant: keyof typeof TRIGGER_VARIANT, className?: string): string =>
+    clsx('flex shrink-0 items-center whitespace-nowrap text-xs', TRIGGER_SIZE[size], TRIGGER_VARIANT[variant], TRIGGER_DISABLED, className);
+
 /* A description makes the row two lines high; the box keeps the icon on the label's line. */
 export const rowClassName = (item: SelectItem<string>): string => clsx('menu-item', item.description && 'items-start');