@aglyn/shared-ui-jsx-forms 1.0.0-beta.143

package/src/lib/mapper/preset-choice.d.ts

@@ -0,0 +1,106 @@
+/**
+ * @license
+ * Copyright 2026 Aglyn LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { type FormFieldGridProps } from './form-field-grid';
+import type { BaseFieldProps } from './types';
+/**
+ * PresetChoice (AGL-2486): a named-preset picker with a raw escape hatch, for
+ * the properties whose honest answer is "pick one of these five" but whose CSS
+ * is a grammar.
+ *
+ * Three fields in the styles panel have that shape. Corner Radius as a text
+ * box can only offer `8px, 50%, or a theme spacing number` — three value
+ * systems in one helper line. A Shadow select with no escape hatch has to send
+ * the author to the custom-CSS section for anything off the list. Font Family
+ * as free text can advise "prefer theme typography" and give no way to act
+ * on it.
+ *
+ * All three are built here as: **the theme's own answers first, then a short
+ * list of plain-English presets, then Custom…** — and the preset shows what it
+ * looks like rather than what to type.
+ *
+ * **The persisted value is whatever the property already stored** — a
+ * number for the theme-multiple properties, a CSS string otherwise. This is
+ * an input affordance, not a shape change.
+ *
+ * **A stored value that matches no preset opens the field in its custom
+ * state showing that value**, so a hand-authored `box-shadow` or font stack
+ * round-trips and keeps rendering. That is the rule for every editor in
+ * this panel: the mode is DERIVED from the value, never remembered in a
+ * flag, so an author who typed raw CSS last month is never told their value
+ * is gone.
+ */
+/** One offered preset. */
+export interface PresetChoiceOption {
+    /**
+     * The value STORED.
+     *
+     * A NUMBER where the property's bare number is a theme multiple —
+     * `borderRadius: 2` renders 8px through `shape.borderRadius`, and the
+     * string `'2'` would reach CSS as `border-radius: 2` and be dropped. The
+     * panel's own `normalizeStyleValue` enforces the same rule one level up;
+     * emitting the number here means it never has to rescue this field.
+     */
+    value: string | number;
+    /** The author's name for it (`Rounded`, `Soft shadow`, `Sans-serif`). */
+    label: string;
+    /** What it resolves to in this theme today (`8px`, `system default`). */
+    hint?: string;
+    /**
+     * CSS the menu row renders ITSELF with, so the choice is made by looking
+     * rather than by reading. See {@link PresetChoiceProps.previewKind}.
+     */
+    preview?: string;
+}
+/** How a menu row shows what the preset does. */
+export type PresetChoicePreview = 'none' | 'shadow' | 'radius' | 'font';
+export interface PresetChoiceProps extends BaseFieldProps {
+    choices?: PresetChoiceOption[];
+    /**
+     * What the preview swatch on each row demonstrates. `font` renders the
+     * option's own label in that face — the only preview that tells a
+     * non-developer anything about a font stack. `shadow` and `radius` draw a
+     * small tile carrying the value.
+     */
+    previewKind?: PresetChoicePreview;
+    /** Label of the escape-hatch entry; defaults to `Custom…`. */
+    customLabel?: string;
+    /** Helper shown while the raw text box is open. */
+    customHelperText?: string;
+    placeholder?: string;
+    /** Offer the reset-to-unset affordance (AGL-2486). */
+    clearable?: boolean;
+    FormFieldGridProps?: FormFieldGridProps;
+}
+/** Sentinel for the escape-hatch entry. Never a stored value. */
+export declare const PRESET_CHOICE_CUSTOM = "__custom__";
+/** The text a stored value shows in the raw box. */
+export declare const presetChoiceValueToText: (value: unknown) => string;
+/**
+ * The preset a stored value names, compared as TEXT.
+ *
+ * A stored `2` and an option whose value is the number `2` are the same
+ * choice, and so are a stored `'50%'` and the string option — but the form
+ * value round-trips through controls that can only hand back strings, so
+ * comparing by identity would show "Custom" for a value the author picked
+ * from this very menu one render ago.
+ */
+export declare const findPresetChoice: (choices: PresetChoiceOption[], value: unknown) => PresetChoiceOption | undefined;
+export declare const PresetChoiceField: {
+    (props: PresetChoiceProps): import("react").JSX.Element;
+    displayName: string;
+};
+export default PresetChoiceField;

package/src/lib/mapper/preset-choice.js

@@ -0,0 +1,267 @@
+import { _ as _extends } from "@swc/helpers/_/_extends";
+import { _ as _object_without_properties_loose } from "@swc/helpers/_/_object_without_properties_loose";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * @license
+ * Copyright 2026 Aglyn LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */ import { Box, MenuItem, TextField as MuiTextField, Typography } from "@mui/material";
+import { useCallback, useState } from "react";
+import { useFieldApi } from "../vendor/data-driven-forms.js";
+import FormFieldGrid, { buildFieldClear } from "./form-field-grid.js";
+import { validationError } from "./validation-error.js";
+/** Sentinel for the escape-hatch entry. Never a stored value. */ export const PRESET_CHOICE_CUSTOM = '__custom__';
+/** The text a stored value shows in the raw box. */ export const presetChoiceValueToText = (value)=>{
+    if (value === undefined || value === null) return '';
+    if (typeof value === 'number') return Number.isFinite(value) ? `${value}` : '';
+    return `${value}`;
+};
+/**
+ * The preset a stored value names, compared as TEXT.
+ *
+ * A stored `2` and an option whose value is the number `2` are the same
+ * choice, and so are a stored `'50%'` and the string option — but the form
+ * value round-trips through controls that can only hand back strings, so
+ * comparing by identity would show "Custom" for a value the author picked
+ * from this very menu one render ago.
+ */ export const findPresetChoice = (choices, value)=>{
+    const text = presetChoiceValueToText(value);
+    if (text === '') return undefined;
+    return choices.find((choice)=>presetChoiceValueToText(choice.value) === text);
+};
+/** The swatch that shows what a preset does, or null when it shows nothing. */ const PresetPreview = (props)=>{
+    var _option_preview;
+    const { kind, option } = props;
+    const preview = (_option_preview = option.preview) != null ? _option_preview : presetChoiceValueToText(option.value);
+    if (kind === 'none' || kind === 'font' || preview === '') return null;
+    return /*#__PURE__*/ _jsx(Box, {
+        "aria-hidden": true,
+        sx: _extends({
+            width: 26,
+            height: 18,
+            flexShrink: 0,
+            // A neutral tile the effect is applied TO. `background.paper`
+            // rather than a literal so the swatch stays legible in both
+            // schemes — the console chrome is theme-aware here.
+            backgroundColor: 'background.paper',
+            border: 1,
+            borderColor: 'divider'
+        }, kind === 'shadow' ? {
+            boxShadow: preview === 'none' ? 'none' : preview
+        } : {
+            borderRadius: preview
+        })
+    });
+};
+export const PresetChoiceField = (props)=>{
+    const _useFieldApi = useFieldApi(props), { input, isReadOnly, isDisabled, isRequired, label, placeholder, helperText, description, validateOnMount, meta, help, choices = [], previewKind = 'none', customLabel = 'Custom…', customHelperText, clearable, FormFieldGridProps = {}, // Schema leftovers from the TEXT_FIELD/SELECT these were authored as.
+    inputProps: _inputProps, InputProps: _InputProps, multiline: _multiline, type: _type, options: _options } = _useFieldApi, rest = _object_without_properties_loose(_useFieldApi, [
+        "input",
+        "isReadOnly",
+        "isDisabled",
+        "isRequired",
+        "label",
+        "placeholder",
+        "helperText",
+        "description",
+        "validateOnMount",
+        "meta",
+        "help",
+        "choices",
+        "previewKind",
+        "customLabel",
+        "customHelperText",
+        "clearable",
+        "FormFieldGridProps",
+        "inputProps",
+        "InputProps",
+        "multiline",
+        "type",
+        "options"
+    ]);
+    const invalid = validationError(meta, validateOnMount);
+    const text = presetChoiceValueToText(input.value);
+    const matched = findPresetChoice(choices, input.value);
+    /**
+   * The raw box is open because the AUTHOR asked for it.
+   *
+   * The other reason it opens — a stored value that matches no preset — is
+   * DERIVED below rather than mirrored into this flag, and that distinction
+   * is load-bearing. `choices` come from the site theme, which resolves
+   * ASYNCHRONOUSLY: the styles panel mounts before `useHostThemeDocument`
+   * answers, so on first render every preset list is empty and every stored
+   * value "matches no preset". A remembered flag would latch that and every
+   * preset field would sit in its custom state showing a raw `2` for the
+   * rest of the session, with the real menu one render away and unreachable
+   * — a mutation test caught exactly this.
+   *
+   * Deriving instead makes the control self-healing: the moment the theme
+   * arrives and the value matches, the preset menu takes over on its own.
+   * The flag is only ever set by a click on Custom…, and cleared by
+   * choosing a preset or by clearing the field, so it can never disagree
+   * with a value it did not cause.
+   */ const [customPicked, setCustomPicked] = useState(false);
+    const custom = customPicked || text !== '' && !matched;
+    const commit = useCallback((next)=>{
+        input.onChange(next);
+    }, [
+        input
+    ]);
+    const clear = buildFieldClear({
+        clearable,
+        label,
+        hasValue: text !== '',
+        locked: Boolean(isDisabled || isReadOnly),
+        onClear: ()=>{
+            setCustomPicked(false);
+            commit('');
+        }
+    });
+    const handleSelect = useCallback((event)=>{
+        var _event_target_value;
+        const picked = `${(_event_target_value = event.target.value) != null ? _event_target_value : ''}`;
+        if (picked === PRESET_CHOICE_CUSTOM) {
+            // Opening the raw box must NOT clear what is already there: the
+            // commonest reason to open it is to tweak a preset by hand.
+            setCustomPicked(true);
+            return;
+        }
+        setCustomPicked(false);
+        const choice = choices.find((entry)=>presetChoiceValueToText(entry.value) === picked);
+        // The option's own `value` is emitted, not the select's string, so a
+        // numeric preset stays a NUMBER and keeps its theme-multiple meaning.
+        commit(choice ? choice.value : '');
+    }, [
+        choices,
+        commit
+    ]);
+    const selectValue = custom ? PRESET_CHOICE_CUSTOM : matched ? presetChoiceValueToText(matched.value) : '';
+    return /*#__PURE__*/ _jsxs(FormFieldGrid, _extends({
+        help: help,
+        clear: clear
+    }, FormFieldGridProps, {
+        children: [
+            /*#__PURE__*/ _jsxs(MuiTextField, _extends({}, rest, {
+                select: true,
+                name: custom ? `${input.name}-preset` : input.name,
+                value: selectValue,
+                onChange: handleSelect,
+                fullWidth: true,
+                size: "small",
+                margin: "dense",
+                error: !!invalid && !custom,
+                helperText: custom ? undefined : invalid || (meta.touched || validateOnMount) && meta.warning || // Naming what the preset resolves to is what makes it
+                // checkable: `Rounded` means nothing until it says `8px`.
+                ((matched == null ? void 0 : matched.hint) ? `${matched.label} — ${matched.hint}` : undefined) || helperText || description,
+                disabled: isDisabled,
+                label: label,
+                required: isRequired,
+                slotProps: {
+                    select: {
+                        displayEmpty: true
+                    },
+                    // `displayEmpty` renders "Not set" in the box while the value is
+                    // empty, and MUI only floats a label once it thinks there IS a
+                    // value — so the label sat ON the placeholder. Pinning it shrunk
+                    // is the documented pairing for `displayEmpty` and is the same
+                    // fix `CssDimension` carries for its keyword values (AGL-2486).
+                    inputLabel: {
+                        shrink: true
+                    }
+                },
+                children: [
+                    /*#__PURE__*/ _jsx(MenuItem, {
+                        value: "",
+                        children: /*#__PURE__*/ _jsx("em", {
+                            children: 'Not set'
+                        })
+                    }),
+                    choices.map((choice)=>{
+                        var _choice_preview;
+                        return /*#__PURE__*/ _jsx(MenuItem, {
+                            value: presetChoiceValueToText(choice.value),
+                            children: /*#__PURE__*/ _jsxs(Box, {
+                                sx: {
+                                    display: 'flex',
+                                    alignItems: 'center',
+                                    gap: 1,
+                                    width: '100%',
+                                    minWidth: 0
+                                },
+                                children: [
+                                    /*#__PURE__*/ _jsx(PresetPreview, {
+                                        kind: previewKind,
+                                        option: choice
+                                    }),
+                                    /*#__PURE__*/ _jsx(Typography, {
+                                        variant: "body2",
+                                        noWrap: true,
+                                        sx: _extends({
+                                            flexGrow: 1,
+                                            minWidth: 0
+                                        }, previewKind === 'font' ? {
+                                            fontFamily: (_choice_preview = choice.preview) != null ? _choice_preview : presetChoiceValueToText(choice.value)
+                                        } : {}),
+                                        children: choice.label
+                                    }),
+                                    choice.hint ? /*#__PURE__*/ _jsx(Typography, {
+                                        variant: "caption",
+                                        color: "text.secondary",
+                                        noWrap: true,
+                                        children: choice.hint
+                                    }) : null
+                                ]
+                            })
+                        }, presetChoiceValueToText(choice.value));
+                    }),
+                    /*#__PURE__*/ _jsx(MenuItem, {
+                        value: PRESET_CHOICE_CUSTOM,
+                        children: /*#__PURE__*/ _jsx("em", {
+                            children: customLabel
+                        })
+                    })
+                ]
+            })),
+            custom ? /*#__PURE__*/ _jsx(MuiTextField, {
+                name: input.name,
+                value: text,
+                onChange: (event)=>commit(event.target.value),
+                onBlur: input.onBlur,
+                onFocus: input.onFocus,
+                fullWidth: true,
+                size: "small",
+                margin: "dense",
+                error: !!invalid,
+                helperText: invalid || (meta.touched || validateOnMount) && meta.warning || customHelperText || helperText || description,
+                disabled: isDisabled,
+                placeholder: placeholder,
+                slotProps: {
+                    htmlInput: {
+                        readOnly: isReadOnly,
+                        // The visible label belongs to the SELECT — it names the
+                        // field — so the raw box needs an accessible name of its
+                        // own, or it is an unlabelled input that screen readers and
+                        // tests both read as anonymous. Qualified rather than
+                        // duplicated, because both are on screen at once.
+                        'aria-label': typeof label === 'string' ? `${label} custom value` : `${input.name} custom value`
+                    }
+                }
+            }) : null
+        ]
+    }));
+};
+PresetChoiceField.displayName = 'AglynPresetChoiceField';
+export default PresetChoiceField;
+
+//# sourceMappingURL=preset-choice.js.map

package/src/lib/mapper/preset-choice.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../../libs/shared/ui/jsx-forms/src/lib/mapper/preset-choice.tsx"],"sourcesContent":["/**\n * @license\n * Copyright 2026 Aglyn LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *   http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport {\n  Box,\n  MenuItem,\n  TextField as MuiTextField,\n  Typography,\n} from '@mui/material'\nimport { useCallback, useState } from 'react'\n\nimport { useFieldApi } from '../vendor/data-driven-forms'\nimport FormFieldGrid, {\n  buildFieldClear,\n  type FormFieldGridProps,\n} from './form-field-grid'\nimport type { BaseFieldProps } from './types'\nimport { type ExtendedFieldMeta, validationError } from './validation-error'\n\n/**\n * PresetChoice (AGL-2486): a named-preset picker with a raw escape hatch, for\n * the properties whose honest answer is \"pick one of these five\" but whose CSS\n * is a grammar.\n *\n * Three fields in the styles panel have that shape. Corner Radius as a text\n * box can only offer `8px, 50%, or a theme spacing number` — three value\n * systems in one helper line. A Shadow select with no escape hatch has to send\n * the author to the custom-CSS section for anything off the list. Font Family\n * as free text can advise \"prefer theme typography\" and give no way to act\n * on it.\n *\n * All three are built here as: **the theme's own answers first, then a short\n * list of plain-English presets, then Custom…** — and the preset shows what it\n * looks like rather than what to type.\n *\n * **The persisted value is whatever the property already stored** — a\n * number for the theme-multiple properties, a CSS string otherwise. This is\n * an input affordance, not a shape change.\n *\n * **A stored value that matches no preset opens the field in its custom\n * state showing that value**, so a hand-authored `box-shadow` or font stack\n * round-trips and keeps rendering. That is the rule for every editor in\n * this panel: the mode is DERIVED from the value, never remembered in a\n * flag, so an author who typed raw CSS last month is never told their value\n * is gone.\n */\n\n/** One offered preset. */\nexport interface PresetChoiceOption {\n  /**\n   * The value STORED.\n   *\n   * A NUMBER where the property's bare number is a theme multiple —\n   * `borderRadius: 2` renders 8px through `shape.borderRadius`, and the\n   * string `'2'` would reach CSS as `border-radius: 2` and be dropped. The\n   * panel's own `normalizeStyleValue` enforces the same rule one level up;\n   * emitting the number here means it never has to rescue this field.\n   */\n  value: string | number\n  /** The author's name for it (`Rounded`, `Soft shadow`, `Sans-serif`). */\n  label: string\n  /** What it resolves to in this theme today (`8px`, `system default`). */\n  hint?: string\n  /**\n   * CSS the menu row renders ITSELF with, so the choice is made by looking\n   * rather than by reading. See {@link PresetChoiceProps.previewKind}.\n   */\n  preview?: string\n}\n\n/** How a menu row shows what the preset does. */\nexport type PresetChoicePreview = 'none' | 'shadow' | 'radius' | 'font'\n\nexport interface PresetChoiceProps extends BaseFieldProps {\n  choices?: PresetChoiceOption[]\n  /**\n   * What the preview swatch on each row demonstrates. `font` renders the\n   * option's own label in that face — the only preview that tells a\n   * non-developer anything about a font stack. `shadow` and `radius` draw a\n   * small tile carrying the value.\n   */\n  previewKind?: PresetChoicePreview\n  /** Label of the escape-hatch entry; defaults to `Custom…`. */\n  customLabel?: string\n  /** Helper shown while the raw text box is open. */\n  customHelperText?: string\n  placeholder?: string\n  /** Offer the reset-to-unset affordance (AGL-2486). */\n  clearable?: boolean\n  FormFieldGridProps?: FormFieldGridProps\n}\n\n/** Sentinel for the escape-hatch entry. Never a stored value. */\nexport const PRESET_CHOICE_CUSTOM = '__custom__'\n\n/** The text a stored value shows in the raw box. */\nexport const presetChoiceValueToText = (value: unknown): string => {\n  if (value === undefined || value === null) return ''\n  if (typeof value === 'number') return Number.isFinite(value) ? `${value}` : ''\n  return `${value}`\n}\n\n/**\n * The preset a stored value names, compared as TEXT.\n *\n * A stored `2` and an option whose value is the number `2` are the same\n * choice, and so are a stored `'50%'` and the string option — but the form\n * value round-trips through controls that can only hand back strings, so\n * comparing by identity would show \"Custom\" for a value the author picked\n * from this very menu one render ago.\n */\nexport const findPresetChoice = (\n  choices: PresetChoiceOption[],\n  value: unknown,\n): PresetChoiceOption | undefined => {\n  const text = presetChoiceValueToText(value)\n  if (text === '') return undefined\n  return choices.find(\n    (choice) => presetChoiceValueToText(choice.value) === text,\n  )\n}\n\n/** The swatch that shows what a preset does, or null when it shows nothing. */\nconst PresetPreview = (props: {\n  kind: PresetChoicePreview\n  option: PresetChoiceOption\n}) => {\n  const { kind, option } = props\n  const preview = option.preview ?? presetChoiceValueToText(option.value)\n  if (kind === 'none' || kind === 'font' || preview === '') return null\n  return (\n    <Box\n      aria-hidden\n      sx={{\n        width: 26,\n        height: 18,\n        flexShrink: 0,\n        // A neutral tile the effect is applied TO. `background.paper`\n        // rather than a literal so the swatch stays legible in both\n        // schemes — the console chrome is theme-aware here.\n        backgroundColor: 'background.paper',\n        border: 1,\n        borderColor: 'divider',\n        ...(kind === 'shadow'\n          ? { boxShadow: preview === 'none' ? 'none' : preview }\n          : { borderRadius: preview }),\n      }}\n    />\n  )\n}\n\nexport const PresetChoiceField = (props: PresetChoiceProps) => {\n  const {\n    input,\n    isReadOnly,\n    isDisabled,\n    isRequired,\n    label,\n    placeholder,\n    helperText,\n    description,\n    validateOnMount,\n    meta,\n    help,\n    choices = [],\n    previewKind = 'none',\n    customLabel = 'Custom…',\n    customHelperText,\n    clearable,\n    FormFieldGridProps = {},\n    // Schema leftovers from the TEXT_FIELD/SELECT these were authored as.\n    inputProps: _inputProps,\n    InputProps: _InputProps,\n    multiline: _multiline,\n    type: _type,\n    options: _options,\n    ...rest\n  } = useFieldApi(props)\n\n  const invalid = validationError(meta as ExtendedFieldMeta, validateOnMount)\n  const text = presetChoiceValueToText(input.value)\n  const matched = findPresetChoice(choices, input.value)\n\n  /**\n   * The raw box is open because the AUTHOR asked for it.\n   *\n   * The other reason it opens — a stored value that matches no preset — is\n   * DERIVED below rather than mirrored into this flag, and that distinction\n   * is load-bearing. `choices` come from the site theme, which resolves\n   * ASYNCHRONOUSLY: the styles panel mounts before `useHostThemeDocument`\n   * answers, so on first render every preset list is empty and every stored\n   * value \"matches no preset\". A remembered flag would latch that and every\n   * preset field would sit in its custom state showing a raw `2` for the\n   * rest of the session, with the real menu one render away and unreachable\n   * — a mutation test caught exactly this.\n   *\n   * Deriving instead makes the control self-healing: the moment the theme\n   * arrives and the value matches, the preset menu takes over on its own.\n   * The flag is only ever set by a click on Custom…, and cleared by\n   * choosing a preset or by clearing the field, so it can never disagree\n   * with a value it did not cause.\n   */\n  const [customPicked, setCustomPicked] = useState(false)\n  const custom = customPicked || (text !== '' && !matched)\n\n  const commit = useCallback(\n    (next: string | number) => {\n      input.onChange(next)\n    },\n    [input],\n  )\n\n  const clear = buildFieldClear({\n    clearable,\n    label,\n    hasValue: text !== '',\n    locked: Boolean(isDisabled || isReadOnly),\n    onClear: () => {\n      setCustomPicked(false)\n      commit('')\n    },\n  })\n\n  const handleSelect = useCallback(\n    (event: { target: { value: unknown } }) => {\n      const picked = `${event.target.value ?? ''}`\n      if (picked === PRESET_CHOICE_CUSTOM) {\n        // Opening the raw box must NOT clear what is already there: the\n        // commonest reason to open it is to tweak a preset by hand.\n        setCustomPicked(true)\n        return\n      }\n      setCustomPicked(false)\n      const choice = choices.find(\n        (entry) => presetChoiceValueToText(entry.value) === picked,\n      )\n      // The option's own `value` is emitted, not the select's string, so a\n      // numeric preset stays a NUMBER and keeps its theme-multiple meaning.\n      commit(choice ? choice.value : '')\n    },\n    [choices, commit],\n  )\n\n  const selectValue = custom\n    ? PRESET_CHOICE_CUSTOM\n    : matched\n      ? presetChoiceValueToText(matched.value)\n      : ''\n\n  return (\n    <FormFieldGrid help={help} clear={clear} {...FormFieldGridProps}>\n      <MuiTextField\n        {...rest}\n        select\n        name={custom ? `${input.name}-preset` : input.name}\n        value={selectValue}\n        onChange={handleSelect}\n        fullWidth\n        size=\"small\"\n        margin=\"dense\"\n        error={!!invalid && !custom}\n        helperText={\n          custom\n            ? undefined\n            : invalid ||\n              ((meta.touched || validateOnMount) && meta.warning) ||\n              // Naming what the preset resolves to is what makes it\n              // checkable: `Rounded` means nothing until it says `8px`.\n              (matched?.hint\n                ? `${matched.label} — ${matched.hint}`\n                : undefined) ||\n              helperText ||\n              description\n        }\n        disabled={isDisabled}\n        label={label}\n        required={isRequired}\n        slotProps={{\n          select: { displayEmpty: true },\n          // `displayEmpty` renders \"Not set\" in the box while the value is\n          // empty, and MUI only floats a label once it thinks there IS a\n          // value — so the label sat ON the placeholder. Pinning it shrunk\n          // is the documented pairing for `displayEmpty` and is the same\n          // fix `CssDimension` carries for its keyword values (AGL-2486).\n          inputLabel: { shrink: true },\n        }}\n      >\n        <MenuItem value=\"\">\n          <em>{'Not set'}</em>\n        </MenuItem>\n        {choices.map((choice) => (\n          <MenuItem\n            key={presetChoiceValueToText(choice.value)}\n            value={presetChoiceValueToText(choice.value)}\n          >\n            <Box\n              sx={{\n                display: 'flex',\n                alignItems: 'center',\n                gap: 1,\n                width: '100%',\n                minWidth: 0,\n              }}\n            >\n              <PresetPreview kind={previewKind} option={choice} />\n              <Typography\n                variant=\"body2\"\n                noWrap\n                sx={{\n                  flexGrow: 1,\n                  minWidth: 0,\n                  // A font preset renders its own name in its own face —\n                  // the only preview that says anything useful about a\n                  // typeface to someone who cannot read a font stack.\n                  ...(previewKind === 'font'\n                    ? {\n                        fontFamily:\n                          choice.preview ??\n                          presetChoiceValueToText(choice.value),\n                      }\n                    : {}),\n                }}\n              >\n                {choice.label}\n              </Typography>\n              {choice.hint ? (\n                <Typography variant=\"caption\" color=\"text.secondary\" noWrap>\n                  {choice.hint}\n                </Typography>\n              ) : null}\n            </Box>\n          </MenuItem>\n        ))}\n        <MenuItem value={PRESET_CHOICE_CUSTOM}>\n          <em>{customLabel}</em>\n        </MenuItem>\n      </MuiTextField>\n      {custom ? (\n        <MuiTextField\n          name={input.name}\n          value={text}\n          onChange={(event) => commit(event.target.value)}\n          onBlur={input.onBlur}\n          onFocus={input.onFocus}\n          fullWidth\n          size=\"small\"\n          margin=\"dense\"\n          error={!!invalid}\n          helperText={\n            invalid ||\n            ((meta.touched || validateOnMount) && meta.warning) ||\n            customHelperText ||\n            helperText ||\n            description\n          }\n          disabled={isDisabled}\n          placeholder={placeholder}\n          slotProps={{\n            htmlInput: {\n              readOnly: isReadOnly,\n              // The visible label belongs to the SELECT — it names the\n              // field — so the raw box needs an accessible name of its\n              // own, or it is an unlabelled input that screen readers and\n              // tests both read as anonymous. Qualified rather than\n              // duplicated, because both are on screen at once.\n              'aria-label':\n                typeof label === 'string'\n                  ? `${label} custom value`\n                  : `${input.name} custom value`,\n            },\n          }}\n        />\n      ) : null}\n    </FormFieldGrid>\n  )\n}\nPresetChoiceField.displayName = 'AglynPresetChoiceField'\n\nexport default PresetChoiceField\n"],"names":["Box","MenuItem","TextField","MuiTextField","Typography","useCallback","useState","useFieldApi","FormFieldGrid","buildFieldClear","validationError","PRESET_CHOICE_CUSTOM","presetChoiceValueToText","value","undefined","Number","isFinite","findPresetChoice","choices","text","find","choice","PresetPreview","props","option","kind","preview","aria-hidden","sx","width","height","flexShrink","backgroundColor","border","borderColor","boxShadow","borderRadius","PresetChoiceField","input","isReadOnly","isDisabled","isRequired","label","placeholder","helperText","description","validateOnMount","meta","help","previewKind","customLabel","customHelperText","clearable","FormFieldGridProps","inputProps","_inputProps","InputProps","_InputProps","multiline","_multiline","type","_type","options","_options","rest","invalid","matched","customPicked","setCustomPicked","custom","commit","next","onChange","clear","hasValue","locked","Boolean","onClear","handleSelect","event","picked","target","entry","selectValue","select","name","fullWidth","size","margin","error","touched","warning","hint","disabled","required","slotProps","displayEmpty","inputLabel","shrink","em","map","display","alignItems","gap","minWidth","variant","noWrap","flexGrow","fontFamily","color","onBlur","onFocus","htmlInput","readOnly","displayName"],"mappings":"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"}

package/src/lib/mapper/radio.d.ts

@@ -0,0 +1,40 @@
+/**
+ * @license
+ * Copyright 2026 Aglyn LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/**
+ * Ported from `@data-driven-forms/mui-component-mapper` (Apache-2.0) and
+ * updated for the current MUI API (`slotProps` instead of `inputProps`).
+ */
+import { type FormControlLabelProps, type FormControlProps, type FormHelperTextProps, type FormLabelProps } from '@mui/material';
+import { type FormFieldGridProps } from './form-field-grid';
+import type { BaseFieldProps, OptionValue, SelectOption } from './types';
+interface RadioFieldOptionProps {
+    inputProps?: Record<string, any>;
+    [key: string]: any;
+}
+export interface RadioProps<T = OptionValue> extends BaseFieldProps {
+    options?: SelectOption<T>[];
+    /** Offer the reset-to-unset affordance (AGL-2486). */
+    clearable?: boolean;
+    FormFieldGridProps?: FormFieldGridProps;
+    FormControlProps?: FormControlProps;
+    FormLabelProps?: FormLabelProps;
+    FormHelperTextProps?: FormHelperTextProps;
+    FormControlLabelProps?: Partial<FormControlLabelProps>;
+    RadioProps?: RadioFieldOptionProps;
+}
+export declare function Radio<T = OptionValue>({ name, ...props }: RadioProps<T>): import("react").JSX.Element;
+export default Radio;

package/src/lib/mapper/radio.js

@@ -0,0 +1,122 @@
+import { _ as _extends } from "@swc/helpers/_/_extends";
+import { _ as _object_without_properties_loose } from "@swc/helpers/_/_object_without_properties_loose";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * @license
+ * Copyright 2026 Aglyn LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */ /**
+ * Ported from `@data-driven-forms/mui-component-mapper` (Apache-2.0) and
+ * updated for the current MUI API (`slotProps` instead of `inputProps`).
+ */ import { FormControl, FormControlLabel, FormHelperText, FormLabel, Radio as MuiRadio } from "@mui/material";
+import { styled } from "@mui/material/styles";
+import { useFieldApi } from "../vendor/data-driven-forms.js";
+import FormFieldGrid, { buildFieldClear } from "./form-field-grid.js";
+import { useStoredFieldHasValue } from "./stored-field-value.js";
+import { validationError } from "./validation-error.js";
+const PREFIX = 'Radio';
+const classes = {
+    grid: `${PREFIX}-grid`
+};
+const StyledFormFieldGrid = styled(FormFieldGrid)(()=>({
+        [`&.${classes.grid}`]: {
+            '&:first-of-type': {
+                marginTop: 8
+            }
+        }
+    }));
+function RadioOption(_0) {
+    let { name, option, isDisabled, isReadOnly, FormControlLabelProps, RadioProps: _ref = {} } = _0, { inputProps } = _ref, RadioProps = _object_without_properties_loose(_ref, [
+        "inputProps"
+    ]), props = _object_without_properties_loose(_0, [
+        "name",
+        "option",
+        "isDisabled",
+        "isReadOnly",
+        "FormControlLabelProps",
+        "RadioProps"
+    ]);
+    const { input } = useFieldApi({
+        name,
+        type: 'radio',
+        value: option.value
+    });
+    return /*#__PURE__*/ _jsx(FormControlLabel, _extends({
+        control: /*#__PURE__*/ _jsx(MuiRadio, _extends({}, input, {
+            name: name,
+            disabled: isDisabled || isReadOnly,
+            onChange: ()=>input.onChange(option.value),
+            slotProps: {
+                input: _extends({
+                    readOnly: isReadOnly
+                }, inputProps)
+            }
+        }, RadioProps)),
+        label: option.label
+    }, FormControlLabelProps, props), `${name}-${String(option.value)}`);
+}
+export function Radio(_0) {
+    let { name } = _0, props = _object_without_properties_loose(_0, [
+        "name"
+    ]);
+    const { options = [], isDisabled, label, isRequired, helperText, description, isReadOnly, meta, validateOnMount, help, clearable, input, FormFieldGridProps = {}, FormControlProps = {}, FormLabelProps = {}, FormHelperTextProps = {}, FormControlLabelProps = {}, RadioProps = {} } = useFieldApi(_extends({}, props, {
+        name,
+        type: 'radio'
+    }));
+    const invalid = validationError(meta, validateOnMount);
+    const text = invalid || (meta.touched || validateOnMount) && meta.warning || helperText || description;
+    const hasValue = useStoredFieldHasValue(name);
+    // Each option is its own radio input, so the group has no control that can
+    // be driven back to "nothing chosen" — the clear button is that way back.
+    const clear = buildFieldClear({
+        clearable,
+        label,
+        hasValue,
+        locked: Boolean(isDisabled || isReadOnly),
+        onClear: ()=>input.onChange(undefined)
+    });
+    return /*#__PURE__*/ _jsx(StyledFormFieldGrid, _extends({
+        className: classes.grid,
+        help: help,
+        clear: clear
+    }, FormFieldGridProps, {
+        children: /*#__PURE__*/ _jsxs(FormControl, _extends({
+            required: isRequired,
+            error: !!invalid,
+            component: "fieldset"
+        }, FormControlProps, {
+            children: [
+                /*#__PURE__*/ _jsx(FormLabel, _extends({
+                    component: "legend"
+                }, FormLabelProps, {
+                    children: label
+                })),
+                options.map((option)=>/*#__PURE__*/ _jsx(RadioOption, {
+                        name: name || '',
+                        option: option,
+                        isDisabled: isDisabled,
+                        isReadOnly: isReadOnly,
+                        FormControlLabelProps: FormControlLabelProps,
+                        RadioProps: RadioProps
+                    }, String(option.value))),
+                text && /*#__PURE__*/ _jsx(FormHelperText, _extends({}, FormHelperTextProps, {
+                    children: text
+                }))
+            ]
+        }))
+    }));
+}
+export default Radio;
+
+//# sourceMappingURL=radio.js.map

package/src/lib/mapper/radio.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../../libs/shared/ui/jsx-forms/src/lib/mapper/radio.tsx"],"sourcesContent":["/**\n * @license\n * Copyright 2026 Aglyn LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *   http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n/**\n * Ported from `@data-driven-forms/mui-component-mapper` (Apache-2.0) and\n * updated for the current MUI API (`slotProps` instead of `inputProps`).\n */\n\nimport {\n  FormControl,\n  type FormControlLabelProps,\n  FormControlLabel,\n  type FormControlProps,\n  FormHelperText,\n  type FormHelperTextProps,\n  FormLabel,\n  type FormLabelProps,\n  Radio as MuiRadio,\n} from '@mui/material'\nimport { styled } from '@mui/material/styles'\n\nimport { useFieldApi } from '../vendor/data-driven-forms'\nimport FormFieldGrid, {\n  buildFieldClear,\n  type FormFieldGridProps,\n} from './form-field-grid'\nimport { useStoredFieldHasValue } from './stored-field-value'\nimport type { BaseFieldProps, OptionValue, SelectOption } from './types'\nimport { type ExtendedFieldMeta, validationError } from './validation-error'\n\nconst PREFIX = 'Radio'\n\nconst classes = {\n  grid: `${PREFIX}-grid`,\n}\n\nconst StyledFormFieldGrid = styled(FormFieldGrid)(() => ({\n  [`&.${classes.grid}`]: {\n    '&:first-of-type': {\n      marginTop: 8,\n    },\n  },\n}))\n\ninterface RadioFieldOptionProps {\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  inputProps?: Record<string, any>\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  [key: string]: any\n}\n\ninterface RadioOptionProps<T = OptionValue> {\n  name: string\n  option: SelectOption<T>\n  isDisabled?: boolean\n  isReadOnly?: boolean\n  FormControlLabelProps?: Partial<FormControlLabelProps>\n  RadioProps?: RadioFieldOptionProps\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  [key: string]: any\n}\n\nfunction RadioOption<T = OptionValue>({\n  name,\n  option,\n  isDisabled,\n  isReadOnly,\n  FormControlLabelProps,\n  RadioProps: { inputProps, ...RadioProps } = {},\n  ...props\n}: RadioOptionProps<T>) {\n  const { input } = useFieldApi({\n    name,\n    type: 'radio',\n    value: option.value,\n  })\n\n  return (\n    <FormControlLabel\n      key={`${name}-${String(option.value)}`}\n      control={\n        <MuiRadio\n          {...input}\n          name={name}\n          disabled={isDisabled || isReadOnly}\n          onChange={() => input.onChange(option.value)}\n          slotProps={{\n            input: { readOnly: isReadOnly, ...inputProps },\n          }}\n          {...RadioProps}\n        />\n      }\n      label={option.label}\n      {...FormControlLabelProps}\n      {...props}\n    />\n  )\n}\n\nexport interface RadioProps<T = OptionValue> extends BaseFieldProps {\n  options?: SelectOption<T>[]\n  /** Offer the reset-to-unset affordance (AGL-2486). */\n  clearable?: boolean\n  FormFieldGridProps?: FormFieldGridProps\n  FormControlProps?: FormControlProps\n  FormLabelProps?: FormLabelProps\n  FormHelperTextProps?: FormHelperTextProps\n  FormControlLabelProps?: Partial<FormControlLabelProps>\n  RadioProps?: RadioFieldOptionProps\n}\n\nexport function Radio<T = OptionValue>({ name, ...props }: RadioProps<T>) {\n  const {\n    options = [],\n    isDisabled,\n    label,\n    isRequired,\n    helperText,\n    description,\n    isReadOnly,\n    meta,\n    validateOnMount,\n    help,\n    clearable,\n    input,\n    FormFieldGridProps = {},\n    FormControlProps = {},\n    FormLabelProps = {},\n    FormHelperTextProps = {},\n    FormControlLabelProps = {},\n    RadioProps = {},\n  } = useFieldApi({\n    ...props,\n    name,\n    type: 'radio',\n  })\n\n  const invalid = validationError(meta as ExtendedFieldMeta, validateOnMount)\n  const text =\n    invalid ||\n    ((meta.touched || validateOnMount) && meta.warning) ||\n    helperText ||\n    description\n  const hasValue = useStoredFieldHasValue(name)\n  // Each option is its own radio input, so the group has no control that can\n  // be driven back to \"nothing chosen\" — the clear button is that way back.\n  const clear = buildFieldClear({\n    clearable,\n    label,\n    hasValue,\n    locked: Boolean(isDisabled || isReadOnly),\n    onClear: () => input.onChange(undefined),\n  })\n\n  return (\n    <StyledFormFieldGrid\n      className={classes.grid}\n      help={help}\n      clear={clear}\n      {...FormFieldGridProps}\n    >\n      <FormControl\n        required={isRequired}\n        error={!!invalid}\n        component=\"fieldset\"\n        {...FormControlProps}\n      >\n        <FormLabel component=\"legend\" {...FormLabelProps}>\n          {label}\n        </FormLabel>\n        {(options as SelectOption<T>[]).map((option) => (\n          <RadioOption<T>\n            key={String(option.value)}\n            name={name || ''}\n            option={option}\n            isDisabled={isDisabled}\n            isReadOnly={isReadOnly}\n            FormControlLabelProps={FormControlLabelProps}\n            RadioProps={RadioProps}\n          />\n        ))}\n        {text && (\n          <FormHelperText {...FormHelperTextProps}>{text}</FormHelperText>\n        )}\n      </FormControl>\n    </StyledFormFieldGrid>\n  )\n}\n\nexport default Radio\n"],"names":["FormControl","FormControlLabel","FormHelperText","FormLabel","Radio","MuiRadio","styled","useFieldApi","FormFieldGrid","buildFieldClear","useStoredFieldHasValue","validationError","PREFIX","classes","grid","StyledFormFieldGrid","marginTop","RadioOption","name","option","isDisabled","isReadOnly","FormControlLabelProps","RadioProps","inputProps","props","input","type","value","control","disabled","onChange","slotProps","readOnly","label","String","options","isRequired","helperText","description","meta","validateOnMount","help","clearable","FormFieldGridProps","FormControlProps","FormLabelProps","FormHelperTextProps","invalid","text","touched","warning","hasValue","clear","locked","Boolean","onClear","undefined","className","required","error","component","map"],"mappings":"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"}