@panneau/fields 5.0.0-alpha.14 → 5.0.0-alpha.16

package/dist/color/ColorField.js

@@ -3,8 +3,9 @@ import { getFieldProps, isString } from "../shared/entry.js";
 import { messages } from "../shared/messages.js";
 import { TextField } from "../text/TextField.js";
 import ColorField_module_default from "./ColorField.module.js";
+import { getColorPalette, getSwatchColor } from "./palette.js";
 import { c } from "react/compiler-runtime";
-import { usePanneauIntl } from "@panneau/ui";
+import { Select, usePanneauIntl } from "@panneau/ui";
 import { jsx } from "react/jsx-runtime";
 //#region src/color/ColorField.tsx
 /**
@@ -23,49 +24,75 @@ function normalizeColor(value) {
 * The value is normalized on blur.
 */
 function ColorField(t0) {
-	const $ = c(42);
+	const $ = c(51);
 	let disabled;
 	let inputClassName;
 	let onBlur;
 	let onChange;
+	let palette;
 	let props;
 	let readOnly;
 	let value;
 	if ($[0] !== t0) {
-		({value, onChange, onBlur, disabled, readOnly, inputClassName, ...props} = t0);
+		({value, onChange, onBlur, disabled, readOnly, inputClassName, palette, ...props} = t0);
 		$[0] = t0;
 		$[1] = disabled;
 		$[2] = inputClassName;
 		$[3] = onBlur;
 		$[4] = onChange;
-		$[5] = props;
-		$[6] = readOnly;
-		$[7] = value;
+		$[5] = palette;
+		$[6] = props;
+		$[7] = readOnly;
+		$[8] = value;
 	} else {
 		disabled = $[1];
 		inputClassName = $[2];
 		onBlur = $[3];
 		onChange = $[4];
-		props = $[5];
-		readOnly = $[6];
-		value = $[7];
+		palette = $[5];
+		props = $[6];
+		readOnly = $[7];
+		value = $[8];
 	}
 	const intl = usePanneauIntl();
+	if (palette !== void 0 && palette !== null && palette.length > 0) {
+		let t1;
+		if ($[9] !== disabled || $[10] !== onBlur || $[11] !== onChange || $[12] !== palette || $[13] !== props || $[14] !== readOnly || $[15] !== value) {
+			t1 = /* @__PURE__ */ jsx(PaletteSelect, {
+				...props,
+				palette,
+				value,
+				onChange,
+				onBlur,
+				disabled,
+				readOnly
+			});
+			$[9] = disabled;
+			$[10] = onBlur;
+			$[11] = onChange;
+			$[12] = palette;
+			$[13] = props;
+			$[14] = readOnly;
+			$[15] = value;
+			$[16] = t1;
+		} else t1 = $[16];
+		return t1;
+	}
 	let t1;
-	if ($[8] !== value) {
+	if ($[17] !== value) {
 		t1 = value !== null && value !== void 0 && /^#[0-9a-f]{6}$/i.test(value);
-		$[8] = value;
-		$[9] = t1;
-	} else t1 = $[9];
+		$[17] = value;
+		$[18] = t1;
+	} else t1 = $[18];
 	const valid = t1;
 	let t2;
-	if ($[10] !== inputClassName) {
+	if ($[19] !== inputClassName) {
 		t2 = cx(ColorField_module_default.input, inputClassName);
-		$[10] = inputClassName;
-		$[11] = t2;
-	} else t2 = $[11];
+		$[19] = inputClassName;
+		$[20] = t2;
+	} else t2 = $[20];
 	let t3;
-	if ($[12] !== onBlur || $[13] !== onChange || $[14] !== value) {
+	if ($[21] !== onBlur || $[22] !== onChange || $[23] !== value) {
 		t3 = () => {
 			if (value !== null && value !== void 0) {
 				const next = normalizeColor(value);
@@ -73,40 +100,40 @@ function ColorField(t0) {
 			}
 			onBlur?.();
 		};
-		$[12] = onBlur;
-		$[13] = onChange;
-		$[14] = value;
-		$[15] = t3;
-	} else t3 = $[15];
+		$[21] = onBlur;
+		$[22] = onChange;
+		$[23] = value;
+		$[24] = t3;
+	} else t3 = $[24];
 	const t4 = valid ? value : "transparent";
 	let t5;
-	if ($[16] !== t4) {
+	if ($[25] !== t4) {
 		t5 = { backgroundColor: t4 };
-		$[16] = t4;
-		$[17] = t5;
-	} else t5 = $[17];
+		$[25] = t4;
+		$[26] = t5;
+	} else t5 = $[26];
 	let t6;
-	if ($[18] !== valid || $[19] !== value) {
+	if ($[27] !== valid || $[28] !== value) {
 		t6 = valid ? value.toLowerCase() : "#000000";
-		$[18] = valid;
-		$[19] = value;
-		$[20] = t6;
-	} else t6 = $[20];
+		$[27] = valid;
+		$[28] = value;
+		$[29] = t6;
+	} else t6 = $[29];
 	let t7;
-	if ($[21] !== onChange) {
+	if ($[30] !== onChange) {
 		t7 = (event) => onChange?.(event.target.value);
-		$[21] = onChange;
-		$[22] = t7;
-	} else t7 = $[22];
+		$[30] = onChange;
+		$[31] = t7;
+	} else t7 = $[31];
 	const t8 = disabled === true || readOnly === true;
 	let t9;
-	if ($[23] !== intl) {
+	if ($[32] !== intl) {
 		t9 = intl.formatMessage(messages.pickColor);
-		$[23] = intl;
-		$[24] = t9;
-	} else t9 = $[24];
+		$[32] = intl;
+		$[33] = t9;
+	} else t9 = $[33];
 	let t10;
-	if ($[25] !== t6 || $[26] !== t7 || $[27] !== t8 || $[28] !== t9) {
+	if ($[34] !== t6 || $[35] !== t7 || $[36] !== t8 || $[37] !== t9) {
 		t10 = /* @__PURE__ */ jsx("input", {
 			type: "color",
 			className: ColorField_module_default.picker,
@@ -115,25 +142,25 @@ function ColorField(t0) {
 			disabled: t8,
 			"aria-label": t9
 		});
-		$[25] = t6;
-		$[26] = t7;
-		$[27] = t8;
-		$[28] = t9;
-		$[29] = t10;
-	} else t10 = $[29];
+		$[34] = t6;
+		$[35] = t7;
+		$[36] = t8;
+		$[37] = t9;
+		$[38] = t10;
+	} else t10 = $[38];
 	let t11;
-	if ($[30] !== t10 || $[31] !== t5) {
+	if ($[39] !== t10 || $[40] !== t5) {
 		t11 = /* @__PURE__ */ jsx("span", {
 			className: ColorField_module_default.swatch,
 			style: t5,
 			children: t10
 		});
-		$[30] = t10;
-		$[31] = t5;
-		$[32] = t11;
-	} else t11 = $[32];
+		$[39] = t10;
+		$[40] = t5;
+		$[41] = t11;
+	} else t11 = $[41];
 	let t12;
-	if ($[33] !== disabled || $[34] !== onChange || $[35] !== props || $[36] !== readOnly || $[37] !== t11 || $[38] !== t2 || $[39] !== t3 || $[40] !== value) {
+	if ($[42] !== disabled || $[43] !== onChange || $[44] !== props || $[45] !== readOnly || $[46] !== t11 || $[47] !== t2 || $[48] !== t3 || $[49] !== value) {
 		t12 = /* @__PURE__ */ jsx(TextField, {
 			autoComplete: "off",
 			...props,
@@ -145,41 +172,274 @@ function ColorField(t0) {
 			onBlur: t3,
 			prefix: t11
 		});
-		$[33] = disabled;
-		$[34] = onChange;
-		$[35] = props;
-		$[36] = readOnly;
-		$[37] = t11;
-		$[38] = t2;
-		$[39] = t3;
-		$[40] = value;
-		$[41] = t12;
-	} else t12 = $[41];
+		$[42] = disabled;
+		$[43] = onChange;
+		$[44] = props;
+		$[45] = readOnly;
+		$[46] = t11;
+		$[47] = t2;
+		$[48] = t3;
+		$[49] = value;
+		$[50] = t12;
+	} else t12 = $[50];
 	return t12;
 }
-/** The `color` type. */
+/** The swatch of a color, decorative: an empty box when it has no color to draw. */
+function Swatch(t0) {
+	const $ = c(4);
+	const { color } = t0;
+	let t1;
+	if ($[0] !== color) {
+		t1 = color !== null ? { backgroundColor: color } : void 0;
+		$[0] = color;
+		$[1] = t1;
+	} else t1 = $[1];
+	let t2;
+	if ($[2] !== t1) {
+		t2 = /* @__PURE__ */ jsx("span", {
+			className: ColorField_module_default.paletteSwatch,
+			style: t1
+		});
+		$[2] = t1;
+		$[3] = t2;
+	} else t2 = $[3];
+	return t2;
+}
+/**
+* The colors of a palette, as a select whose options show their swatches. It can be emptied
+* unless the field is required. A value outside the palette, kept from before, shows as it is.
+*/
+function PaletteSelect(t0) {
+	const $ = c(65);
+	let autoFocus;
+	let className;
+	let controlClassName;
+	let description;
+	let descriptionClassName;
+	let disabled;
+	let errors;
+	let errorsClassName;
+	let id;
+	let label;
+	let labelClassName;
+	let name;
+	let onBlur;
+	let onChange;
+	let palette;
+	let placeholder;
+	let props;
+	let readOnly;
+	let required;
+	let value;
+	if ($[0] !== t0) {
+		({palette, value, onChange, onBlur, disabled, readOnly, required, label, description, errors, name, id, autoFocus, placeholder, className, labelClassName, descriptionClassName, errorsClassName, controlClassName, ...props} = t0);
+		$[0] = t0;
+		$[1] = autoFocus;
+		$[2] = className;
+		$[3] = controlClassName;
+		$[4] = description;
+		$[5] = descriptionClassName;
+		$[6] = disabled;
+		$[7] = errors;
+		$[8] = errorsClassName;
+		$[9] = id;
+		$[10] = label;
+		$[11] = labelClassName;
+		$[12] = name;
+		$[13] = onBlur;
+		$[14] = onChange;
+		$[15] = palette;
+		$[16] = placeholder;
+		$[17] = props;
+		$[18] = readOnly;
+		$[19] = required;
+		$[20] = value;
+	} else {
+		autoFocus = $[1];
+		className = $[2];
+		controlClassName = $[3];
+		description = $[4];
+		descriptionClassName = $[5];
+		disabled = $[6];
+		errors = $[7];
+		errorsClassName = $[8];
+		id = $[9];
+		label = $[10];
+		labelClassName = $[11];
+		name = $[12];
+		onBlur = $[13];
+		onChange = $[14];
+		palette = $[15];
+		placeholder = $[16];
+		props = $[17];
+		readOnly = $[18];
+		required = $[19];
+		value = $[20];
+	}
+	const intl = usePanneauIntl();
+	const current = value !== null && value !== void 0 && value !== "" ? value : null;
+	let t1;
+	if ($[21] !== current || $[22] !== palette) {
+		t1 = current !== null && !palette.some((entry) => entry.value === current) ? [...palette, { value: current }] : palette;
+		$[21] = current;
+		$[22] = palette;
+		$[23] = t1;
+	} else t1 = $[23];
+	const entries = t1;
+	let t2;
+	if ($[24] !== entries) {
+		t2 = entries.map(_temp);
+		$[24] = entries;
+		$[25] = t2;
+	} else t2 = $[25];
+	const options = t2;
+	let t3;
+	if ($[26] !== onChange) {
+		t3 = (next) => onChange?.(typeof next === "string" ? next : null);
+		$[26] = onChange;
+		$[27] = t3;
+	} else t3 = $[27];
+	let t4;
+	if ($[28] !== errors) {
+		t4 = errors ?? [];
+		$[28] = errors;
+		$[29] = t4;
+	} else t4 = $[29];
+	const t5 = disabled === true || readOnly === true;
+	let t6;
+	if ($[30] !== intl || $[31] !== placeholder) {
+		t6 = placeholder ?? intl.formatMessage(messages.pickColor);
+		$[30] = intl;
+		$[31] = placeholder;
+		$[32] = t6;
+	} else t6 = $[32];
+	let t7;
+	if ($[33] !== props) {
+		t7 = props["aria-label"] !== void 0 ? { "aria-label": props["aria-label"] } : {};
+		$[33] = props;
+		$[34] = t7;
+	} else t7 = $[34];
+	let t8;
+	if ($[35] !== name) {
+		t8 = name !== void 0 ? { name } : {};
+		$[35] = name;
+		$[36] = t8;
+	} else t8 = $[36];
+	let t9;
+	if ($[37] !== id) {
+		t9 = id !== void 0 ? { id } : {};
+		$[37] = id;
+		$[38] = t9;
+	} else t9 = $[38];
+	let t10;
+	if ($[39] !== autoFocus) {
+		t10 = autoFocus !== void 0 ? { autoFocus } : {};
+		$[39] = autoFocus;
+		$[40] = t10;
+	} else t10 = $[40];
+	let t11;
+	if ($[41] !== onBlur) {
+		t11 = onBlur !== void 0 ? { onBlur } : {};
+		$[41] = onBlur;
+		$[42] = t11;
+	} else t11 = $[42];
+	let t12;
+	if ($[43] !== controlClassName) {
+		t12 = controlClassName !== void 0 ? { triggerClassName: controlClassName } : {};
+		$[43] = controlClassName;
+		$[44] = t12;
+	} else t12 = $[44];
+	let t13;
+	if ($[45] !== className || $[46] !== current || $[47] !== description || $[48] !== descriptionClassName || $[49] !== errorsClassName || $[50] !== label || $[51] !== labelClassName || $[52] !== options || $[53] !== required || $[54] !== t10 || $[55] !== t11 || $[56] !== t12 || $[57] !== t3 || $[58] !== t4 || $[59] !== t5 || $[60] !== t6 || $[61] !== t7 || $[62] !== t8 || $[63] !== t9) {
+		t13 = /* @__PURE__ */ jsx(Select, {
+			options,
+			value: current,
+			onChange: t3,
+			label,
+			description,
+			errors: t4,
+			isRequired: required,
+			isDisabled: t5,
+			placeholder: t6,
+			className,
+			labelClassName,
+			descriptionClassName,
+			errorsClassName,
+			...t7,
+			...t8,
+			...t9,
+			...t10,
+			...t11,
+			...t12
+		});
+		$[45] = className;
+		$[46] = current;
+		$[47] = description;
+		$[48] = descriptionClassName;
+		$[49] = errorsClassName;
+		$[50] = label;
+		$[51] = labelClassName;
+		$[52] = options;
+		$[53] = required;
+		$[54] = t10;
+		$[55] = t11;
+		$[56] = t12;
+		$[57] = t3;
+		$[58] = t4;
+		$[59] = t5;
+		$[60] = t6;
+		$[61] = t7;
+		$[62] = t8;
+		$[63] = t9;
+		$[64] = t13;
+	} else t13 = $[64];
+	return t13;
+}
+/** The `color` type: `settings.palette`, the colors to pick from. */
+function _temp(entry_0) {
+	return {
+		value: entry_0.value,
+		label: entry_0.label ?? entry_0.value,
+		prefix: /* @__PURE__ */ jsx(Swatch, { color: getSwatchColor(entry_0) })
+	};
+}
 function ColorFieldEntry(props) {
-	const $ = c(6);
+	const $ = c(11);
 	let t0;
-	if ($[0] !== props) {
-		t0 = getFieldProps(props);
-		$[0] = props;
+	if ($[0] !== props.field) {
+		t0 = getColorPalette(props.field);
+		$[0] = props.field;
 		$[1] = t0;
 	} else t0 = $[1];
-	const t1 = isString(props.value) ? props.value : null;
-	let t2;
-	if ($[2] !== props.onChange || $[3] !== t0 || $[4] !== t1) {
-		t2 = /* @__PURE__ */ jsx(ColorField, {
-			...t0,
-			value: t1,
-			onChange: props.onChange
+	const palette = t0;
+	let t1;
+	if ($[2] !== props) {
+		t1 = getFieldProps(props);
+		$[2] = props;
+		$[3] = t1;
+	} else t1 = $[3];
+	const t2 = isString(props.value) ? props.value : null;
+	let t3;
+	if ($[4] !== palette) {
+		t3 = palette !== null ? { palette } : {};
+		$[4] = palette;
+		$[5] = t3;
+	} else t3 = $[5];
+	let t4;
+	if ($[6] !== props.onChange || $[7] !== t1 || $[8] !== t2 || $[9] !== t3) {
+		t4 = /* @__PURE__ */ jsx(ColorField, {
+			...t1,
+			value: t2,
+			onChange: props.onChange,
+			...t3
 		});
-		$[2] = props.onChange;
-		$[3] = t0;
-		$[4] = t1;
-		$[5] = t2;
-	} else t2 = $[5];
-	return t2;
+		$[6] = props.onChange;
+		$[7] = t1;
+		$[8] = t2;
+		$[9] = t3;
+		$[10] = t4;
+	} else t4 = $[10];
+	return t4;
 }
 //#endregion
 export { ColorField, ColorFieldEntry, normalizeColor };

package/dist/color/ColorField.js.map

@@ -1 +1 @@
-{"version":3,"file":"ColorField.js","names":["usePanneauIntl","cx","getFieldProps","isString","messages","FieldEntryProps","TextField","TextFieldProps","styles","ColorFieldProps","Omit","normalizeColor","value","trimmed","trim","toLowerCase","digits","replace","test","map","digit","join","ColorField","t0","$","_c","disabled","inputClassName","onBlur","onChange","props","readOnly","intl","t1","undefined","valid","t2","input","t3","next","t4","t5","backgroundColor","t6","t7","event","target","t8","t9","formatMessage","pickColor","t10","picker","t11","swatch","t12","ColorFieldEntry","_c","styles"],"sources":["../../src/color/ColorField.tsx"],"sourcesContent":["import { usePanneauIntl } from '@panneau/ui';\n\nimport { cx } from '../shared/cx';\nimport { getFieldProps, isString } from '../shared/entry';\nimport { messages } from '../shared/messages';\nimport type { FieldEntryProps } from '../shared/types';\nimport { TextField, type TextFieldProps } from '../text/TextField';\nimport styles from './ColorField.module.css';\n\nexport type ColorFieldProps = Omit<TextFieldProps, 'type' | 'prefix' | 'maxLength'>;\n\n/**\n * Normalizes a hexadecimal color: `#` prefix, lowercase, and 3 digits expanded to 6. Returns the\n * text as is when it isn't a hexadecimal color.\n */\nexport function normalizeColor(value: string): string {\n    const trimmed = value.trim().toLowerCase();\n    const digits = trimmed.replace(/^#/, '');\n    if (/^[0-9a-f]{3}$/.test(digits)) {\n        return `#${[...digits].map((digit) => digit + digit).join('')}`;\n    }\n    if (/^[0-9a-f]{6}$/.test(digits) || /^[0-9a-f]{8}$/.test(digits)) {\n        return `#${digits}`;\n    }\n    return trimmed;\n}\n\n/**\n * A color as a hexadecimal value (`#1d4ed8`): typed, or picked with the browser's color picker.\n * The value is normalized on blur.\n */\nexport function ColorField({\n    value,\n    onChange,\n    onBlur,\n    disabled,\n    readOnly,\n    inputClassName,\n    ...props\n}: ColorFieldProps) {\n    const intl = usePanneauIntl();\n    const valid = value !== null && value !== undefined && /^#[0-9a-f]{6}$/i.test(value);\n    return (\n        <TextField\n            autoComplete=\"off\"\n            {...props}\n            value={value}\n            onChange={onChange}\n            disabled={disabled}\n            readOnly={readOnly}\n            inputClassName={cx(styles.input, inputClassName)}\n            onBlur={() => {\n                if (value !== null && value !== undefined) {\n                    const next = normalizeColor(value);\n                    if (next !== value) {\n                        onChange?.(next === '' ? null : next);\n                    }\n                }\n                onBlur?.();\n            }}\n            prefix={\n                <span\n                    className={styles.swatch}\n                    style={{ backgroundColor: valid ? value : 'transparent' }}\n                >\n                    <input\n                        type=\"color\"\n                        className={styles.picker}\n                        value={valid ? value.toLowerCase() : '#000000'}\n                        onChange={(event) => onChange?.(event.target.value)}\n                        disabled={disabled === true || readOnly === true}\n                        aria-label={intl.formatMessage(messages.pickColor)}\n                    />\n                </span>\n            }\n        />\n    );\n}\n\n/** The `color` type. */\nexport function ColorFieldEntry(props: FieldEntryProps) {\n    return (\n        <ColorField\n            {...getFieldProps(props)}\n            value={isString(props.value) ? props.value : null}\n            onChange={props.onChange}\n        />\n    );\n}\n"],"mappings":"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"}
+{"version":3,"file":"ColorField.js","names":["Select","SelectOption","usePanneauIntl","cx","getFieldProps","isString","messages","FieldEntryProps","TextField","TextFieldProps","styles","ColorPaletteEntry","getColorPalette","getSwatchColor","ColorFieldProps","Omit","palette","normalizeColor","value","trimmed","trim","toLowerCase","digits","replace","test","map","digit","join","ColorField","t0","$","_c","disabled","inputClassName","onBlur","onChange","props","readOnly","intl","undefined","length","t1","valid","t2","input","t3","next","t4","t5","backgroundColor","t6","t7","event","target","t8","t9","formatMessage","pickColor","t10","picker","t11","swatch","t12","Swatch","color","paletteSwatch","PaletteSelect","autoFocus","className","controlClassName","description","descriptionClassName","errors","errorsClassName","id","label","labelClassName","name","placeholder","required","current","some","entry","entries","_temp","options","triggerClassName","t13","entry_0","prefix","ColorFieldEntry","field","_c","styles"],"sources":["../../src/color/ColorField.tsx"],"sourcesContent":["import { Select, type SelectOption, usePanneauIntl } from '@panneau/ui';\n\nimport { cx } from '../shared/cx';\nimport { getFieldProps, isString } from '../shared/entry';\nimport { messages } from '../shared/messages';\nimport type { FieldEntryProps } from '../shared/types';\nimport { TextField, type TextFieldProps } from '../text/TextField';\nimport styles from './ColorField.module.css';\nimport { type ColorPaletteEntry, getColorPalette, getSwatchColor } from './palette';\n\nexport interface ColorFieldProps extends Omit<TextFieldProps, 'type' | 'prefix' | 'maxLength'> {\n    /**\n     * The colors to pick from (decision 0058). With a palette, the field only offers its colors,\n     * and the value is the `value` of one of them.\n     */\n    palette?: readonly ColorPaletteEntry[] | null;\n}\n\n/**\n * Normalizes a hexadecimal color: `#` prefix, lowercase, and 3 digits expanded to 6. Returns the\n * text as is when it isn't a hexadecimal color.\n */\nexport function normalizeColor(value: string): string {\n    const trimmed = value.trim().toLowerCase();\n    const digits = trimmed.replace(/^#/, '');\n    if (/^[0-9a-f]{3}$/.test(digits)) {\n        return `#${[...digits].map((digit) => digit + digit).join('')}`;\n    }\n    if (/^[0-9a-f]{6}$/.test(digits) || /^[0-9a-f]{8}$/.test(digits)) {\n        return `#${digits}`;\n    }\n    return trimmed;\n}\n\n/**\n * A color as a hexadecimal value (`#1d4ed8`): typed, or picked with the browser's color picker.\n * The value is normalized on blur.\n */\nexport function ColorField({\n    value,\n    onChange,\n    onBlur,\n    disabled,\n    readOnly,\n    inputClassName,\n    palette,\n    ...props\n}: ColorFieldProps) {\n    const intl = usePanneauIntl();\n    if (palette !== undefined && palette !== null && palette.length > 0) {\n        return (\n            <PaletteSelect\n                {...props}\n                palette={palette}\n                value={value}\n                onChange={onChange}\n                onBlur={onBlur}\n                disabled={disabled}\n                readOnly={readOnly}\n            />\n        );\n    }\n    const valid = value !== null && value !== undefined && /^#[0-9a-f]{6}$/i.test(value);\n    return (\n        <TextField\n            autoComplete=\"off\"\n            {...props}\n            value={value}\n            onChange={onChange}\n            disabled={disabled}\n            readOnly={readOnly}\n            inputClassName={cx(styles.input, inputClassName)}\n            onBlur={() => {\n                if (value !== null && value !== undefined) {\n                    const next = normalizeColor(value);\n                    if (next !== value) {\n                        onChange?.(next === '' ? null : next);\n                    }\n                }\n                onBlur?.();\n            }}\n            prefix={\n                <span\n                    className={styles.swatch}\n                    style={{ backgroundColor: valid ? value : 'transparent' }}\n                >\n                    <input\n                        type=\"color\"\n                        className={styles.picker}\n                        value={valid ? value.toLowerCase() : '#000000'}\n                        onChange={(event) => onChange?.(event.target.value)}\n                        disabled={disabled === true || readOnly === true}\n                        aria-label={intl.formatMessage(messages.pickColor)}\n                    />\n                </span>\n            }\n        />\n    );\n}\n\n/** The swatch of a color, decorative: an empty box when it has no color to draw. */\nfunction Swatch({ color }: { color: string | null }) {\n    return (\n        <span\n            className={styles.paletteSwatch}\n            style={color !== null ? { backgroundColor: color } : undefined}\n        />\n    );\n}\n\n/**\n * The colors of a palette, as a select whose options show their swatches. It can be emptied\n * unless the field is required. A value outside the palette, kept from before, shows as it is.\n */\nfunction PaletteSelect({\n    palette,\n    value,\n    onChange,\n    onBlur,\n    disabled,\n    readOnly,\n    required,\n    label,\n    description,\n    errors,\n    name,\n    id,\n    autoFocus,\n    placeholder,\n    className,\n    labelClassName,\n    descriptionClassName,\n    errorsClassName,\n    controlClassName,\n    ...props\n}: Omit<ColorFieldProps, 'palette' | 'inputClassName'> & {\n    palette: readonly ColorPaletteEntry[];\n}) {\n    const intl = usePanneauIntl();\n    const current = value !== null && value !== undefined && value !== '' ? value : null;\n    const entries =\n        current !== null && !palette.some((entry) => entry.value === current)\n            ? [...palette, { value: current }]\n            : palette;\n    const options = entries.map((entry): SelectOption => ({\n        value: entry.value,\n        label: entry.label ?? entry.value,\n        prefix: <Swatch color={getSwatchColor(entry)} />,\n    }));\n    return (\n        <Select\n            options={options}\n            value={current}\n            onChange={(next) => onChange?.(typeof next === 'string' ? next : null)}\n            label={label}\n            description={description}\n            errors={errors ?? []}\n            isRequired={required}\n            isDisabled={disabled === true || readOnly === true}\n            placeholder={placeholder ?? intl.formatMessage(messages.pickColor)}\n            className={className}\n            labelClassName={labelClassName}\n            descriptionClassName={descriptionClassName}\n            errorsClassName={errorsClassName}\n            {...(props['aria-label'] !== undefined ? { 'aria-label': props['aria-label'] } : {})}\n            {...(name !== undefined ? { name } : {})}\n            {...(id !== undefined ? { id } : {})}\n            {...(autoFocus !== undefined ? { autoFocus } : {})}\n            {...(onBlur !== undefined ? { onBlur } : {})}\n            {...(controlClassName !== undefined ? { triggerClassName: controlClassName } : {})}\n        />\n    );\n}\n\n/** The `color` type: `settings.palette`, the colors to pick from. */\nexport function ColorFieldEntry(props: FieldEntryProps) {\n    const palette = getColorPalette(props.field);\n    return (\n        <ColorField\n            {...getFieldProps(props)}\n            value={isString(props.value) ? props.value : null}\n            onChange={props.onChange}\n            {...(palette !== null ? { palette } : {})}\n        />\n    );\n}\n"],"mappings":"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"}

package/dist/color/ColorField.module.js

@@ -3,12 +3,14 @@ import "./ColorField.css";
 var swatch = "panneau-color-field-swatch";
 var picker = "panneau-color-field-picker";
 var input = "panneau-color-field-input";
+var paletteSwatch = "panneau-color-field-palette-swatch";
 var ColorField_module_default = {
 	swatch,
 	picker,
-	input
+	input,
+	paletteSwatch
 };
 //#endregion
-export { ColorField_module_default as default, input, picker, swatch };
+export { ColorField_module_default as default, input, paletteSwatch, picker, swatch };
 
 //# sourceMappingURL=ColorField.module.js.map

package/dist/color/ColorField.module.js.map

@@ -1 +1 @@
-{"version":3,"file":"ColorField.module.js","names":[],"sources":["../../src/color/ColorField.module.css"],"sourcesContent":[".swatch {\n    position: relative;\n    display: inline-flex;\n    width: 1.5rem;\n    height: 1.5rem;\n    overflow: hidden;\n    border: var(--panneau-border-width) solid var(--panneau-color-border-control);\n    border-radius: var(--panneau-radius-sm);\n}\n\n.swatch:focus-within {\n    outline: var(--panneau-focus-width) solid var(--panneau-color-focus);\n    outline-offset: 2px;\n}\n\n.picker {\n    position: absolute;\n    inset: -0.5rem;\n    width: calc(100% + 1rem);\n    height: calc(100% + 1rem);\n    padding: 0;\n    cursor: pointer;\n    background: none;\n    border: 0;\n}\n\n.picker:disabled {\n    cursor: not-allowed;\n}\n\n.input {\n    font-family: var(--panneau-font-family-mono);\n}\n"],"mappings":""}
+{"version":3,"file":"ColorField.module.js","names":[],"sources":["../../src/color/ColorField.module.css"],"sourcesContent":[".swatch {\n    position: relative;\n    display: inline-flex;\n    width: 1.5rem;\n    height: 1.5rem;\n    overflow: hidden;\n    border: var(--panneau-border-width) solid var(--panneau-color-border-control);\n    border-radius: var(--panneau-radius-sm);\n}\n\n.swatch:focus-within {\n    outline: var(--panneau-focus-width) solid var(--panneau-color-focus);\n    outline-offset: 2px;\n}\n\n.picker {\n    position: absolute;\n    inset: -0.5rem;\n    width: calc(100% + 1rem);\n    height: calc(100% + 1rem);\n    padding: 0;\n    cursor: pointer;\n    background: none;\n    border: 0;\n}\n\n.picker:disabled {\n    cursor: not-allowed;\n}\n\n.input {\n    font-family: var(--panneau-font-family-mono);\n}\n\n.paletteSwatch {\n    display: inline-block;\n    width: 1rem;\n    height: 1rem;\n    vertical-align: middle;\n    border: var(--panneau-border-width) solid var(--panneau-color-border-control);\n    border-radius: var(--panneau-radius-sm);\n}\n"],"mappings":""}

package/dist/color/index.d.ts

@@ -1,2 +1,3 @@
 export { ColorField, ColorFieldEntry, type ColorFieldProps, normalizeColor } from './ColorField.js';
+export { type ColorPaletteEntry, getColorPalette, getSwatchColor, isHexColor, toColorPalette, } from './palette.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/color/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/color/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,eAAe,EAAE,KAAK,eAAe,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/color/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,eAAe,EAAE,KAAK,eAAe,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AACjG,OAAO,EACH,KAAK,iBAAiB,EACtB,eAAe,EACf,cAAc,EACd,UAAU,EACV,cAAc,GACjB,MAAM,WAAW,CAAC"}

package/dist/color/index.js

@@ -1 +1,3 @@
-export { ColorField, ColorFieldEntry, normalizeColor } from "./ColorField.js";
+import { getColorPalette, getSwatchColor, isHexColor, toColorPalette } from "./palette.js";
+import { ColorField, ColorFieldEntry, normalizeColor } from "./ColorField.js";
+export { ColorField, ColorFieldEntry, getColorPalette, getSwatchColor, isHexColor, normalizeColor, toColorPalette };

package/dist/color/palette.d.ts

@@ -0,0 +1,23 @@
+import type { Field } from '@panneau/protocol';
+/**
+ * A color of a palette (`settings.palette` of a `color` field, decision 0058): `value` is what the
+ * field stores, `color` (hexadecimal) draws its swatch, and `label` names it. Without `color`,
+ * `value` is a hexadecimal color, which draws itself.
+ */
+export interface ColorPaletteEntry {
+    value: string;
+    label?: string;
+    color?: string;
+}
+/** Whether a value is a hexadecimal color: `#1d4ed8`, `#fff` or `#1d4ed880`. */
+export declare function isHexColor(value: unknown): value is string;
+/**
+ * The colors of a palette, from a field's `settings.palette`: entries with a `value`, and the
+ * `label` and `color` they have. `null` when it has none.
+ */
+export declare function toColorPalette(value: unknown): ColorPaletteEntry[] | null;
+/** The palette of a `color` field (`settings.palette`), or `null` when it has none. */
+export declare function getColorPalette(field: Field | null | undefined): ColorPaletteEntry[] | null;
+/** The color that draws an entry's swatch: its `color`, or its value when it is hexadecimal. */
+export declare function getSwatchColor(entry: ColorPaletteEntry): string | null;
+//# sourceMappingURL=palette.d.ts.map

package/dist/color/palette.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"palette.d.ts","sourceRoot":"","sources":["../../src/color/palette.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAE/C;;;;GAIG;AACH,MAAM,WAAW,iBAAiB;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;CAClB;AAID,gFAAgF;AAChF,wBAAgB,UAAU,CAAC,KAAK,EAAE,OAAO,GAAG,KAAK,IAAI,MAAM,CAE1D;AAMD;;;GAGG;AACH,wBAAgB,cAAc,CAAC,KAAK,EAAE,OAAO,GAAG,iBAAiB,EAAE,GAAG,IAAI,CAgBzE;AAED,uFAAuF;AACvF,wBAAgB,eAAe,CAAC,KAAK,EAAE,KAAK,GAAG,IAAI,GAAG,SAAS,GAAG,iBAAiB,EAAE,GAAG,IAAI,CAE3F;AAED,gGAAgG;AAChG,wBAAgB,cAAc,CAAC,KAAK,EAAE,iBAAiB,GAAG,MAAM,GAAG,IAAI,CAEtE"}

package/dist/color/palette.js

@@ -0,0 +1,34 @@
+//#region src/color/palette.ts
+var HEX = /^#(?:[0-9a-f]{3}|[0-9a-f]{6}|[0-9a-f]{8})$/i;
+/** Whether a value is a hexadecimal color: `#1d4ed8`, `#fff` or `#1d4ed880`. */
+function isHexColor(value) {
+	return typeof value === "string" && HEX.test(value);
+}
+function isRecord(value) {
+	return typeof value === "object" && value !== null && !Array.isArray(value);
+}
+/**
+* The colors of a palette, from a field's `settings.palette`: entries with a `value`, and the
+* `label` and `color` they have. `null` when it has none.
+*/
+function toColorPalette(value) {
+	if (!Array.isArray(value)) return null;
+	const palette = value.flatMap((entry) => isRecord(entry) && typeof entry.value === "string" && entry.value !== "" ? [{
+		value: entry.value,
+		...typeof entry.label === "string" ? { label: entry.label } : {},
+		...isHexColor(entry.color) ? { color: entry.color } : {}
+	}] : []);
+	return palette.length > 0 ? palette : null;
+}
+/** The palette of a `color` field (`settings.palette`), or `null` when it has none. */
+function getColorPalette(field) {
+	return toColorPalette(field?.settings?.palette);
+}
+/** The color that draws an entry's swatch: its `color`, or its value when it is hexadecimal. */
+function getSwatchColor(entry) {
+	return entry.color ?? (isHexColor(entry.value) ? entry.value : null);
+}
+//#endregion
+export { getColorPalette, getSwatchColor, isHexColor, toColorPalette };
+
+//# sourceMappingURL=palette.js.map