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

package/src/lib/mapper/breakpoint-span.js

@@ -0,0 +1,346 @@
+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 { buildBreakpointSpan, parseBreakpointSpan, SPAN_BREAKPOINTS } from "@aglyn/shared-data-enums";
+import { Box, Button, FormHelperText, FormLabel, MenuItem, Select, TextField as MuiTextField, Typography } from "@mui/material";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { useFieldApi } from "../vendor/data-driven-forms.js";
+import FormFieldGrid from "./form-field-grid.js";
+import { validationError } from "./validation-error.js";
+const emptyValues = ()=>SPAN_BREAKPOINTS.reduce((acc, key)=>{
+        acc[key] = '';
+        return acc;
+    }, {});
+/** `''` is the only "unset"; `'0'` is a real offset an author can mean. */ const isSet = (value)=>value !== '' && value !== undefined && value !== null;
+export const seedSpanDraft = (value)=>{
+    const parsed = parseBreakpointSpan(value);
+    if (parsed.raw !== undefined) {
+        return {
+            custom: true,
+            text: parsed.raw,
+            base: '',
+            values: emptyValues()
+        };
+    }
+    const values = emptyValues();
+    for (const key of SPAN_BREAKPOINTS){
+        var _parsed_values;
+        const span = (_parsed_values = parsed.values) == null ? void 0 : _parsed_values[key];
+        if (span !== undefined) values[key] = `${span}`;
+    }
+    return {
+        custom: false,
+        text: '',
+        base: parsed.base === undefined ? '' : `${parsed.base}`,
+        values
+    };
+};
+/** `'auto'`/`'grow'` stay keywords; everything else is a number. */ const toSpanValue = (option)=>option === 'auto' || option === 'grow' ? option : Number(option);
+export const serializeSpanDraft = (draft)=>{
+    if (draft.custom) return draft.text;
+    if (isSet(draft.base)) return buildBreakpointSpan({
+        base: toSpanValue(draft.base)
+    });
+    const values = {};
+    for (const key of SPAN_BREAKPOINTS){
+        const option = draft.values[key];
+        if (isSet(option)) values[key] = toSpanValue(option);
+    }
+    return Object.keys(values).length ? buildBreakpointSpan({
+        values
+    }) : '';
+};
+/** Human labels for the cells, in the order they are rendered. */ const CELL_LABELS = {
+    base: 'All',
+    xs: 'xs',
+    sm: 'sm',
+    md: 'md',
+    lg: 'lg',
+    xl: 'xl'
+};
+export const BreakpointSpanField = (props)=>{
+    const _useFieldApi = useFieldApi(props), { input, isReadOnly, isDisabled, isRequired, label, placeholder, helperText, description, validateOnMount, meta, help, allowGrow = true, minSpan = 1, maxSpan = 12, FormFieldGridProps = {}, // Leftovers from the attribute schema this field was authored with as a
+    // TEXT_FIELD; they must never reach the DOM.
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    inputProps: _inputProps, // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    InputProps: _InputProps, // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    multiline: _multiline, // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    type: _type, // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    component: _component, // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    tokenOptions: _tokenOptions, // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    tokenLabelContext: _tokenLabelContext } = _useFieldApi, rest = _object_without_properties_loose(_useFieldApi, [
+        "input",
+        "isReadOnly",
+        "isDisabled",
+        "isRequired",
+        "label",
+        "placeholder",
+        "helperText",
+        "description",
+        "validateOnMount",
+        "meta",
+        "help",
+        "allowGrow",
+        "minSpan",
+        "maxSpan",
+        "FormFieldGridProps",
+        "inputProps",
+        "InputProps",
+        "multiline",
+        "type",
+        "component",
+        "tokenOptions",
+        "tokenLabelContext"
+    ]);
+    const invalid = validationError(meta, validateOnMount);
+    // A value persisted as a bare NUMBER (`size: 6`) is still a value the
+    // author has to see; reading only strings would blank the row and then
+    // overwrite the number on the first edit.
+    const value = input.value === undefined || input.value === null ? '' : `${input.value}`;
+    const [draft, setDraft] = useState(()=>seedSpanDraft(value));
+    // Re-seed only when the value changed OUTSIDE this field (a different node
+    // selected, an undo). Re-seeding from our own emits would fight the
+    // author's half-finished text in custom mode.
+    const emittedRef = useRef(value);
+    useEffect(()=>{
+        if (value === emittedRef.current) return;
+        emittedRef.current = value;
+        setDraft(seedSpanDraft(value));
+    }, [
+        value
+    ]);
+    const commit = useCallback((next)=>{
+        const serialized = serializeSpanDraft(next);
+        emittedRef.current = serialized;
+        // Text the author edited back into a modellable span gets the
+        // structured controls back immediately, so the mode stays DERIVED from
+        // the value rather than remembered in a flag that can go stale.
+        const reparsed = parseBreakpointSpan(serialized);
+        setDraft(next.custom && serialized.trim() !== '' && reparsed.raw === undefined ? seedSpanDraft(serialized) : next);
+        input.onChange(serialized);
+    }, [
+        input
+    ]);
+    const anyBreakpointSet = SPAN_BREAKPOINTS.some((key)=>isSet(draft.values[key]));
+    const baseSet = isSet(draft.base);
+    const locked = isDisabled || isReadOnly;
+    /**
+   * The options a cell offers. A stored value the list does not carry — a
+   * span wider than `maxSpan` because the container overrode `columns` — is
+   * appended rather than dropped, so selecting nothing else cannot silently
+   * rewrite it.
+   */ const optionsFor = useCallback((current)=>{
+        const options = [
+            'auto'
+        ];
+        if (allowGrow) options.push('grow');
+        for(let span = minSpan; span <= maxSpan; span += 1){
+            options.push(`${span}`);
+        }
+        if (isSet(current) && !options.includes(current)) options.push(current);
+        return options;
+    }, [
+        allowGrow,
+        maxSpan,
+        minSpan
+    ]);
+    const cells = useMemo(()=>[
+            {
+                key: 'base',
+                label: CELL_LABELS.base
+            },
+            ...SPAN_BREAKPOINTS.map((key)=>({
+                    key,
+                    label: CELL_LABELS[key]
+                }))
+        ], []);
+    const handleCellChange = useCallback((key, option)=>{
+        if (key === 'base') {
+            commit(_extends({}, draft, {
+                base: option
+            }));
+            return;
+        }
+        commit(_extends({}, draft, {
+            values: _extends({}, draft.values, {
+                [key]: option
+            })
+        }));
+    }, [
+        commit,
+        draft
+    ]);
+    const handleTextChange = useCallback((event)=>{
+        commit(_extends({}, draft, {
+            custom: true,
+            text: event.target.value
+        }));
+    }, [
+        commit,
+        draft
+    ]);
+    const toggleCustom = useCallback(()=>{
+        if (draft.custom) {
+            // Back to the controls, seeded from whatever the text now says. Text
+            // the controls cannot model keeps the text box (seedSpanDraft returns
+            // custom), which is the honest answer rather than a silent wipe.
+            setDraft(seedSpanDraft(draft.text));
+            return;
+        }
+        setDraft(_extends({}, draft, {
+            custom: true,
+            text: serializeSpanDraft(draft)
+        }));
+    }, [
+        draft
+    ]);
+    return /*#__PURE__*/ _jsx(FormFieldGrid, _extends({
+        help: help
+    }, FormFieldGridProps, {
+        children: /*#__PURE__*/ _jsxs(Box, {
+            component: "fieldset",
+            sx: {
+                border: 0,
+                m: 0,
+                p: 0,
+                minWidth: 0
+            },
+            children: [
+                /*#__PURE__*/ _jsxs(Box, {
+                    sx: {
+                        display: 'flex',
+                        alignItems: 'center',
+                        justifyContent: 'space-between',
+                        gap: 1
+                    },
+                    children: [
+                        /*#__PURE__*/ _jsx(FormLabel, {
+                            component: "legend",
+                            error: !!invalid,
+                            disabled: isDisabled,
+                            required: isRequired,
+                            sx: {
+                                fontSize: '0.75rem'
+                            },
+                            children: label
+                        }),
+                        /*#__PURE__*/ _jsx(Button, {
+                            size: "small",
+                            variant: "text",
+                            onClick: toggleCustom,
+                            disabled: locked,
+                            sx: {
+                                minWidth: 0,
+                                fontSize: '0.6875rem',
+                                px: 0.5
+                            },
+                            children: draft.custom ? 'Use breakpoints' : 'Edit as text'
+                        })
+                    ]
+                }),
+                draft.custom ? /*#__PURE__*/ _jsx(MuiTextField, {
+                    name: input.name,
+                    value: draft.text,
+                    onChange: handleTextChange,
+                    onBlur: input.onBlur,
+                    onFocus: input.onFocus,
+                    size: "small",
+                    fullWidth: true,
+                    disabled: isDisabled,
+                    placeholder: placeholder != null ? placeholder : 'xs:12 md:6',
+                    slotProps: {
+                        input: {
+                            readOnly: isReadOnly
+                        }
+                    }
+                }) : /*#__PURE__*/ _jsx(Box, {
+                    sx: {
+                        display: 'grid',
+                        gridTemplateColumns: 'repeat(3, minmax(0, 1fr))',
+                        gap: 0.75,
+                        mt: 0.5
+                    },
+                    children: cells.map(({ key, label: cellLabel })=>{
+                        const current = key === 'base' ? draft.base : draft.values[key];
+                        // MUI's prop is a scalar OR an object. Rather than dropping one
+                        // of the two at serialize time, the unusable half is visibly
+                        // out of play.
+                        const disabled = locked || (key === 'base' ? anyBreakpointSet : baseSet);
+                        return /*#__PURE__*/ _jsxs(Box, {
+                            children: [
+                                /*#__PURE__*/ _jsx(Typography, {
+                                    variant: "caption",
+                                    component: "label",
+                                    htmlFor: `${input.name}-${key}`,
+                                    sx: {
+                                        display: 'block',
+                                        color: 'text.secondary',
+                                        lineHeight: 1.4
+                                    },
+                                    children: cellLabel
+                                }),
+                                /*#__PURE__*/ _jsxs(Select, {
+                                    id: `${input.name}-${key}`,
+                                    size: "small",
+                                    fullWidth: true,
+                                    displayEmpty: true,
+                                    disabled: disabled,
+                                    value: current,
+                                    onChange: (event)=>{
+                                        var _event_target_value;
+                                        return handleCellChange(key, `${(_event_target_value = event.target.value) != null ? _event_target_value : ''}`);
+                                    },
+                                    onBlur: input.onBlur,
+                                    inputProps: {
+                                        'aria-label': `${label} ${cellLabel}`
+                                    },
+                                    renderValue: (selected)=>isSet(selected) ? selected : '—',
+                                    sx: {
+                                        '& .MuiSelect-select': {
+                                            py: 0.5
+                                        }
+                                    },
+                                    children: [
+                                        /*#__PURE__*/ _jsx(MenuItem, {
+                                            value: "",
+                                            children: /*#__PURE__*/ _jsx("em", {
+                                                children: '—'
+                                            })
+                                        }),
+                                        optionsFor(current).map((option)=>/*#__PURE__*/ _jsx(MenuItem, {
+                                                value: option,
+                                                children: option
+                                            }, option))
+                                    ]
+                                })
+                            ]
+                        }, key);
+                    })
+                }),
+                /*#__PURE__*/ _jsx(FormHelperText, {
+                    error: !!invalid,
+                    disabled: isDisabled,
+                    children: invalid || (meta.touched || validateOnMount) && meta.warning || helperText || description
+                })
+            ]
+        })
+    }));
+};
+export default BreakpointSpanField;
+
+//# sourceMappingURL=breakpoint-span.js.map

package/src/lib/mapper/breakpoint-span.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../../libs/shared/ui/jsx-forms/src/lib/mapper/breakpoint-span.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  buildBreakpointSpan,\n  parseBreakpointSpan,\n  SPAN_BREAKPOINTS,\n  type SpanBreakpoint,\n  type SpanValue,\n} from '@aglyn/shared-data-enums'\nimport {\n  Box,\n  Button,\n  FormHelperText,\n  FormLabel,\n  MenuItem,\n  Select,\n  TextField as MuiTextField,\n  Typography,\n} from '@mui/material'\nimport { useCallback, useEffect, useMemo, useRef, useState } from 'react'\n\nimport { useFieldApi } from '../vendor/data-driven-forms'\nimport FormFieldGrid, { type FormFieldGridProps } from './form-field-grid'\nimport type { BaseFieldProps } from './types'\nimport { type ExtendedFieldMeta, validationError } from './validation-error'\n\n/**\n * BreakpointSpan (AGL-2486): the per-breakpoint editor for a MUI Grid cell's\n * **Span** and **Offset**.\n *\n * Both were free-text boxes taking a developer syntax — `xs:12 md:2` — with\n * the syntax explained only in a tooltip. Aglyn's authors are not reading the\n * MUI Grid docs, so the capability was there and unreachable: in practice a\n * cell got one number and never became responsive.\n *\n * The PERSISTED value is unchanged: still ONE string, still the same syntax,\n * parsed by the same shared pair the Grid element itself uses\n * (`parseBreakpointSpan`/`buildBreakpointSpan` in `@aglyn/shared-data-enums`).\n * This is an input affordance, not a shape change, so renderers, published\n * documents and existing nodes stay untouched — the same rule\n * {@link CssDimensionField} follows for CSS lengths.\n *\n * Two things the layout of this editor has to get right:\n *\n *  - A value authored with NO breakpoint (`\"6\"`) is a scalar and applies at\n *    every size. It is NOT the same string as `xs:6`, and MUI's prop is\n *    either a scalar or an object — never both. So the row leads with an\n *    **All** cell, and picking a breakpoint disables it (and vice versa)\n *    rather than silently dropping one of the two.\n *  - Anything this editor cannot model — a `{{token}}`, an unknown\n *    breakpoint, a span wider than the offered list — must NOT be clobbered.\n *    It falls back to a raw text box holding the string verbatim, and flips\n *    back to the controls the moment the text becomes modellable again. The\n *    same escape hatch is reachable on purpose (**Edit as text**) so the full\n *    syntax stays available to anyone who wants it.\n */\n\n/** Draft state: what the row of controls shows, before serialization. */\nexport interface SpanDraft {\n  /** The value is not modellable — the text box holds it verbatim. */\n  custom: boolean\n  /** Raw string, in custom mode only. */\n  text: string\n  /** The breakpoint-less value; `''` when unset. */\n  base: string\n  /** Per-breakpoint values as option strings; `''` when unset. */\n  values: Record<SpanBreakpoint, string>\n}\n\nconst emptyValues = (): Record<SpanBreakpoint, string> =>\n  SPAN_BREAKPOINTS.reduce(\n    (acc, key) => {\n      acc[key] = ''\n      return acc\n    },\n    {} as Record<SpanBreakpoint, string>,\n  )\n\n/** `''` is the only \"unset\"; `'0'` is a real offset an author can mean. */\nconst isSet = (value: string) => value !== '' && value !== undefined && value !== null\n\nexport const seedSpanDraft = (value: unknown): SpanDraft => {\n  const parsed = parseBreakpointSpan(value as string | number)\n  if (parsed.raw !== undefined) {\n    return { custom: true, text: parsed.raw, base: '', values: emptyValues() }\n  }\n  const values = emptyValues()\n  for (const key of SPAN_BREAKPOINTS) {\n    const span = parsed.values?.[key]\n    if (span !== undefined) values[key] = `${span}`\n  }\n  return {\n    custom: false,\n    text: '',\n    base: parsed.base === undefined ? '' : `${parsed.base}`,\n    values,\n  }\n}\n\n/** `'auto'`/`'grow'` stay keywords; everything else is a number. */\nconst toSpanValue = (option: string): SpanValue =>\n  option === 'auto' || option === 'grow' ? option : Number(option)\n\nexport const serializeSpanDraft = (draft: SpanDraft): string => {\n  if (draft.custom) return draft.text\n  if (isSet(draft.base)) return buildBreakpointSpan({ base: toSpanValue(draft.base) })\n  const values: Partial<Record<SpanBreakpoint, SpanValue>> = {}\n  for (const key of SPAN_BREAKPOINTS) {\n    const option = draft.values[key]\n    if (isSet(option)) values[key] = toSpanValue(option)\n  }\n  return Object.keys(values).length ? buildBreakpointSpan({ values }) : ''\n}\n\nexport interface BreakpointSpanProps extends BaseFieldProps {\n  /** Offer MUI's `grow` keyword. False for Offset, which has no `grow`. */\n  allowGrow?: boolean\n  /** Lowest column count offered. 0 for Offset, 1 for Span. */\n  minSpan?: number\n  /** Highest column count offered; the container's `columns` default. */\n  maxSpan?: number\n  FormFieldGridProps?: FormFieldGridProps\n}\n\n/** Human labels for the cells, in the order they are rendered. */\nconst CELL_LABELS: Record<SpanBreakpoint | 'base', string> = {\n  base: 'All',\n  xs: 'xs',\n  sm: 'sm',\n  md: 'md',\n  lg: 'lg',\n  xl: 'xl',\n}\n\nexport const BreakpointSpanField = (props: BreakpointSpanProps) => {\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    allowGrow = true,\n    minSpan = 1,\n    maxSpan = 12,\n    FormFieldGridProps = {},\n    // Leftovers from the attribute schema this field was authored with as a\n    // TEXT_FIELD; they must never reach the DOM.\n    // eslint-disable-next-line @typescript-eslint/no-unused-vars\n    inputProps: _inputProps,\n    // eslint-disable-next-line @typescript-eslint/no-unused-vars\n    InputProps: _InputProps,\n    // eslint-disable-next-line @typescript-eslint/no-unused-vars\n    multiline: _multiline,\n    // eslint-disable-next-line @typescript-eslint/no-unused-vars\n    type: _type,\n    // eslint-disable-next-line @typescript-eslint/no-unused-vars\n    component: _component,\n    // eslint-disable-next-line @typescript-eslint/no-unused-vars\n    tokenOptions: _tokenOptions,\n    // eslint-disable-next-line @typescript-eslint/no-unused-vars\n    tokenLabelContext: _tokenLabelContext,\n    // Deliberately NOT spread onto the box below: the root here is a\n    // `<fieldset>`, and a schema's leftover keys (`dataType`, `options`, …)\n    // would land on the DOM as unknown attributes.\n    // eslint-disable-next-line @typescript-eslint/no-unused-vars\n    ...rest\n  } = useFieldApi(props)\n  const invalid = validationError(meta as ExtendedFieldMeta, validateOnMount)\n\n  // A value persisted as a bare NUMBER (`size: 6`) is still a value the\n  // author has to see; reading only strings would blank the row and then\n  // overwrite the number on the first edit.\n  const value =\n    input.value === undefined || input.value === null ? '' : `${input.value}`\n\n  const [draft, setDraft] = useState<SpanDraft>(() => seedSpanDraft(value))\n  // Re-seed only when the value changed OUTSIDE this field (a different node\n  // selected, an undo). Re-seeding from our own emits would fight the\n  // author's half-finished text in custom mode.\n  const emittedRef = useRef(value)\n  useEffect(() => {\n    if (value === emittedRef.current) return\n    emittedRef.current = value\n    setDraft(seedSpanDraft(value))\n  }, [value])\n\n  const commit = useCallback(\n    (next: SpanDraft) => {\n      const serialized = serializeSpanDraft(next)\n      emittedRef.current = serialized\n      // Text the author edited back into a modellable span gets the\n      // structured controls back immediately, so the mode stays DERIVED from\n      // the value rather than remembered in a flag that can go stale.\n      const reparsed = parseBreakpointSpan(serialized)\n      setDraft(\n        next.custom && serialized.trim() !== '' && reparsed.raw === undefined\n          ? seedSpanDraft(serialized)\n          : next,\n      )\n      input.onChange(serialized)\n    },\n    [input],\n  )\n\n  const anyBreakpointSet = SPAN_BREAKPOINTS.some((key) => isSet(draft.values[key]))\n  const baseSet = isSet(draft.base)\n  const locked = isDisabled || isReadOnly\n\n  /**\n   * The options a cell offers. A stored value the list does not carry — a\n   * span wider than `maxSpan` because the container overrode `columns` — is\n   * appended rather than dropped, so selecting nothing else cannot silently\n   * rewrite it.\n   */\n  const optionsFor = useCallback(\n    (current: string) => {\n      const options: string[] = ['auto']\n      if (allowGrow) options.push('grow')\n      for (let span = minSpan; span <= maxSpan; span += 1) {\n        options.push(`${span}`)\n      }\n      if (isSet(current) && !options.includes(current)) options.push(current)\n      return options\n    },\n    [allowGrow, maxSpan, minSpan],\n  )\n\n  const cells = useMemo(\n    () => [\n      { key: 'base' as const, label: CELL_LABELS.base },\n      ...SPAN_BREAKPOINTS.map((key) => ({ key, label: CELL_LABELS[key] })),\n    ],\n    [],\n  )\n\n  const handleCellChange = useCallback(\n    (key: SpanBreakpoint | 'base', option: string) => {\n      if (key === 'base') {\n        commit({ ...draft, base: option })\n        return\n      }\n      commit({ ...draft, values: { ...draft.values, [key]: option } })\n    },\n    [commit, draft],\n  )\n\n  const handleTextChange = useCallback(\n    (event: { target: { value: string } }) => {\n      commit({ ...draft, custom: true, text: event.target.value })\n    },\n    [commit, draft],\n  )\n\n  const toggleCustom = useCallback(() => {\n    if (draft.custom) {\n      // Back to the controls, seeded from whatever the text now says. Text\n      // the controls cannot model keeps the text box (seedSpanDraft returns\n      // custom), which is the honest answer rather than a silent wipe.\n      setDraft(seedSpanDraft(draft.text))\n      return\n    }\n    setDraft({ ...draft, custom: true, text: serializeSpanDraft(draft) })\n  }, [draft])\n\n  return (\n    <FormFieldGrid help={help} {...FormFieldGridProps}>\n      {/* A plain box, NOT a FormControl: this field owns six inputs, and a\n          FormControl parent both warns (\"multiple InputBase components\n          inside a FormControl\") and pushes its own error/focus state into\n          every one of them. Label and helper text are rendered directly and\n          told their state instead. */}\n      <Box component=\"fieldset\" sx={{ border: 0, m: 0, p: 0, minWidth: 0 }}>\n        <Box\n          sx={{\n            display: 'flex',\n            alignItems: 'center',\n            justifyContent: 'space-between',\n            gap: 1,\n          }}\n        >\n          <FormLabel\n            component=\"legend\"\n            error={!!invalid}\n            disabled={isDisabled}\n            required={isRequired}\n            sx={{ fontSize: '0.75rem' }}\n          >\n            {label}\n          </FormLabel>\n          <Button\n            size=\"small\"\n            variant=\"text\"\n            onClick={toggleCustom}\n            disabled={locked}\n            sx={{ minWidth: 0, fontSize: '0.6875rem', px: 0.5 }}\n          >\n            {draft.custom ? 'Use breakpoints' : 'Edit as text'}\n          </Button>\n        </Box>\n\n        {draft.custom ? (\n          <MuiTextField\n            name={input.name}\n            value={draft.text}\n            onChange={handleTextChange}\n            onBlur={input.onBlur}\n            onFocus={input.onFocus}\n            size=\"small\"\n            fullWidth\n            disabled={isDisabled}\n            placeholder={(placeholder as string) ?? 'xs:12 md:6'}\n            slotProps={{ input: { readOnly: isReadOnly } }}\n          />\n        ) : (\n          <Box\n            sx={{\n              display: 'grid',\n              gridTemplateColumns: 'repeat(3, minmax(0, 1fr))',\n              gap: 0.75,\n              mt: 0.5,\n            }}\n          >\n            {cells.map(({ key, label: cellLabel }) => {\n              const current = key === 'base' ? draft.base : draft.values[key]\n              // MUI's prop is a scalar OR an object. Rather than dropping one\n              // of the two at serialize time, the unusable half is visibly\n              // out of play.\n              const disabled =\n                locked ||\n                (key === 'base' ? anyBreakpointSet : baseSet)\n              return (\n                <Box key={key}>\n                  <Typography\n                    variant=\"caption\"\n                    component=\"label\"\n                    htmlFor={`${input.name}-${key}`}\n                    sx={{\n                      display: 'block',\n                      color: 'text.secondary',\n                      lineHeight: 1.4,\n                    }}\n                  >\n                    {cellLabel}\n                  </Typography>\n                  <Select\n                    id={`${input.name}-${key}`}\n                    size=\"small\"\n                    fullWidth\n                    displayEmpty\n                    disabled={disabled}\n                    value={current}\n                    onChange={(event) =>\n                      handleCellChange(key, `${event.target.value ?? ''}`)\n                    }\n                    onBlur={input.onBlur}\n                    inputProps={{ 'aria-label': `${label} ${cellLabel}` }}\n                    renderValue={(selected) =>\n                      isSet(selected as string) ? (selected as string) : '—'\n                    }\n                    sx={{ '& .MuiSelect-select': { py: 0.5 } }}\n                  >\n                    <MenuItem value=\"\">\n                      <em>{'—'}</em>\n                    </MenuItem>\n                    {optionsFor(current).map((option) => (\n                      <MenuItem key={option} value={option}>\n                        {option}\n                      </MenuItem>\n                    ))}\n                  </Select>\n                </Box>\n              )\n            })}\n          </Box>\n        )}\n\n        <FormHelperText error={!!invalid} disabled={isDisabled}>\n          {invalid ||\n            ((meta.touched || validateOnMount) && meta.warning) ||\n            helperText ||\n            description}\n        </FormHelperText>\n      </Box>\n    </FormFieldGrid>\n  )\n}\n\nexport default BreakpointSpanField\n"],"names":["buildBreakpointSpan","parseBreakpointSpan","SPAN_BREAKPOINTS","Box","Button","FormHelperText","FormLabel","MenuItem","Select","TextField","MuiTextField","Typography","useCallback","useEffect","useMemo","useRef","useState","useFieldApi","FormFieldGrid","validationError","emptyValues","reduce","acc","key","isSet","value","undefined","seedSpanDraft","parsed","raw","custom","text","base","values","span","toSpanValue","option","Number","serializeSpanDraft","draft","Object","keys","length","CELL_LABELS","xs","sm","md","lg","xl","BreakpointSpanField","props","input","isReadOnly","isDisabled","isRequired","label","placeholder","helperText","description","validateOnMount","meta","help","allowGrow","minSpan","maxSpan","FormFieldGridProps","inputProps","_inputProps","InputProps","_InputProps","multiline","_multiline","type","_type","component","_component","tokenOptions","_tokenOptions","tokenLabelContext","_tokenLabelContext","rest","invalid","setDraft","emittedRef","current","commit","next","serialized","reparsed","trim","onChange","anyBreakpointSet","some","baseSet","locked","optionsFor","options","push","includes","cells","map","handleCellChange","handleTextChange","event","target","toggleCustom","sx","border","m","p","minWidth","display","alignItems","justifyContent","gap","error","disabled","required","fontSize","size","variant","onClick","px","name","onBlur","onFocus","fullWidth","slotProps","readOnly","gridTemplateColumns","mt","cellLabel","htmlFor","color","lineHeight","id","displayEmpty","renderValue","selected","py","em","touched","warning"],"mappings":"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"}

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

@@ -0,0 +1,43 @@
+/**
+ * @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 CheckboxProps as MuiCheckboxProps, type FormControlLabelProps, type FormControlProps, type FormGroupProps, type FormHelperTextProps, type FormLabelProps } from '@mui/material';
+import { type FormFieldGridProps } from './form-field-grid';
+import type { BaseFieldProps, OptionValue, SelectOption } from './types';
+export interface SingleCheckboxProps extends BaseFieldProps {
+    /** Offer the reset-to-unset affordance, as the switch does. */
+    clearable?: boolean;
+    /** The state shown while nothing is stored, as the switch takes it. */
+    unsetChecked?: boolean;
+    FormFieldGridProps?: FormFieldGridProps;
+    FormControlProps?: FormControlProps;
+    FormGroupProps?: FormGroupProps;
+    FormControlLabelProps?: Partial<FormControlLabelProps>;
+    CheckboxProps?: MuiCheckboxProps;
+    FormLabelProps?: FormLabelProps;
+    FormHelperTextProps?: FormHelperTextProps;
+    inputProps?: Record<string, any>;
+}
+export interface CheckboxProps<T = OptionValue> extends SingleCheckboxProps {
+    options?: SelectOption<T>[];
+}
+export declare const SingleCheckbox: (props: SingleCheckboxProps) => import("react").JSX.Element;
+export declare function Checkbox<T = OptionValue>({ options, ...props }: CheckboxProps<T>): import("react").JSX.Element;
+export default Checkbox;

package/src/lib/mapper/checkbox.js

@@ -0,0 +1,111 @@
+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 { Checkbox as MuiCheckbox, FormControl, FormControlLabel, FormGroup, FormHelperText, FormLabel } from "@mui/material";
+import { useFieldApi } from "../vendor/data-driven-forms.js";
+import { useStoredFieldHasValue } from "./stored-field-value.js";
+import FormFieldGrid, { buildFieldClear } from "./form-field-grid.js";
+import MultipleChoiceList from "./multiple-choice-list.js";
+import { validationError } from "./validation-error.js";
+export const SingleCheckbox = (props)=>{
+    const _useFieldApi = useFieldApi(_extends({}, props, {
+        type: 'checkbox'
+    })), { input, isReadOnly, isDisabled, isRequired, label, helperText, description, validateOnMount, meta, help, clearable, unsetChecked, FormFieldGridProps = {}, FormControlProps = {}, FormGroupProps = {}, FormControlLabelProps = {}, CheckboxProps = {}, FormLabelProps = {}, FormHelperTextProps = {}, inputProps } = _useFieldApi, rest = _object_without_properties_loose(_useFieldApi, [
+        "input",
+        "isReadOnly",
+        "isDisabled",
+        "isRequired",
+        "label",
+        "helperText",
+        "description",
+        "validateOnMount",
+        "meta",
+        "help",
+        "clearable",
+        "unsetChecked",
+        "FormFieldGridProps",
+        "FormControlProps",
+        "FormGroupProps",
+        "FormControlLabelProps",
+        "CheckboxProps",
+        "FormLabelProps",
+        "FormHelperTextProps",
+        "inputProps"
+    ]);
+    const invalid = validationError(meta, validateOnMount);
+    const text = invalid || (meta.touched || validateOnMount) && meta.warning || helperText || description;
+    const hasValue = useStoredFieldHasValue(input.name);
+    const clear = buildFieldClear({
+        clearable,
+        label,
+        hasValue,
+        locked: Boolean(isDisabled || isReadOnly),
+        onClear: ()=>input.onChange(undefined)
+    });
+    return /*#__PURE__*/ _jsx(FormFieldGrid, _extends({
+        help: help,
+        clear: clear
+    }, FormFieldGridProps, {
+        children: /*#__PURE__*/ _jsx(FormControl, _extends({
+            required: isRequired,
+            error: !!invalid,
+            component: "fieldset"
+        }, FormControlProps, {
+            children: /*#__PURE__*/ _jsxs(FormGroup, _extends({}, FormGroupProps, {
+                children: [
+                    /*#__PURE__*/ _jsx(FormControlLabel, _extends({}, FormControlLabelProps, {
+                        control: /*#__PURE__*/ _jsx(MuiCheckbox, _extends({}, input, {
+                            checked: hasValue ? input.checked : Boolean(unsetChecked)
+                        }, CheckboxProps, {
+                            disabled: isDisabled || isReadOnly,
+                            value: input.name,
+                            slotProps: {
+                                input: _extends({
+                                    readOnly: isReadOnly
+                                }, inputProps)
+                            }
+                        }, rest)),
+                        disabled: isDisabled || isReadOnly,
+                        label: /*#__PURE__*/ _jsx(FormLabel, _extends({}, FormLabelProps, {
+                            children: label
+                        }))
+                    })),
+                    text && /*#__PURE__*/ _jsx(FormHelperText, _extends({}, FormHelperTextProps, {
+                        children: text
+                    }))
+                ]
+            }))
+        }))
+    }));
+};
+export function Checkbox(_0) {
+    let { options } = _0, props = _object_without_properties_loose(_0, [
+        "options"
+    ]);
+    return options ? // The list renders option values opaquely, so the wider generic is
+    // safe to narrow to the common OptionValue shape.
+    /*#__PURE__*/ _jsx(MultipleChoiceList, _extends({
+        options: options
+    }, props)) : /*#__PURE__*/ _jsx(SingleCheckbox, _extends({}, props));
+}
+export default Checkbox;
+
+//# sourceMappingURL=checkbox.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../../libs/shared/ui/jsx-forms/src/lib/mapper/checkbox.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  Checkbox as MuiCheckbox,\n  type CheckboxProps as MuiCheckboxProps,\n  FormControl,\n  type FormControlLabelProps,\n  FormControlLabel,\n  type FormControlProps,\n  FormGroup,\n  type FormGroupProps,\n  FormHelperText,\n  type FormHelperTextProps,\n  FormLabel,\n  type FormLabelProps,\n} from '@mui/material'\n\nimport { useFieldApi } from '../vendor/data-driven-forms'\nimport { useStoredFieldHasValue } from './stored-field-value'\nimport FormFieldGrid, {\n  buildFieldClear,\n  type FormFieldGridProps,\n} from './form-field-grid'\nimport MultipleChoiceList from './multiple-choice-list'\nimport type { BaseFieldProps, OptionValue, SelectOption } from './types'\nimport { type ExtendedFieldMeta, validationError } from './validation-error'\n\nexport interface SingleCheckboxProps extends BaseFieldProps {\n  /** Offer the reset-to-unset affordance, as the switch does. */\n  clearable?: boolean\n  /** The state shown while nothing is stored, as the switch takes it. */\n  unsetChecked?: boolean\n  FormFieldGridProps?: FormFieldGridProps\n  FormControlProps?: FormControlProps\n  FormGroupProps?: FormGroupProps\n  FormControlLabelProps?: Partial<FormControlLabelProps>\n  CheckboxProps?: MuiCheckboxProps\n  FormLabelProps?: FormLabelProps\n  FormHelperTextProps?: FormHelperTextProps\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  inputProps?: Record<string, any>\n}\n\nexport interface CheckboxProps<T = OptionValue> extends SingleCheckboxProps {\n  options?: SelectOption<T>[]\n}\n\nexport const SingleCheckbox = (props: SingleCheckboxProps) => {\n  const {\n    input,\n    isReadOnly,\n    isDisabled,\n    isRequired,\n    label,\n    helperText,\n    description,\n    validateOnMount,\n    meta,\n    help,\n    clearable,\n    unsetChecked,\n    FormFieldGridProps = {},\n    FormControlProps = {},\n    FormGroupProps = {},\n    FormControlLabelProps = {},\n    CheckboxProps = {},\n    FormLabelProps = {},\n    FormHelperTextProps = {},\n    inputProps,\n    ...rest\n  } = useFieldApi({\n    ...props,\n    type: 'checkbox',\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(input.name)\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    <FormFieldGrid help={help} clear={clear} {...FormFieldGridProps}>\n      <FormControl\n        required={isRequired}\n        error={!!invalid}\n        component=\"fieldset\"\n        {...FormControlProps}\n      >\n        <FormGroup {...FormGroupProps}>\n          <FormControlLabel\n            {...FormControlLabelProps}\n            control={\n              <MuiCheckbox\n                {...input}\n                checked={hasValue ? input.checked : Boolean(unsetChecked)}\n                {...CheckboxProps}\n                disabled={isDisabled || isReadOnly}\n                value={input.name}\n                slotProps={{\n                  input: { readOnly: isReadOnly, ...inputProps },\n                }}\n                {...rest}\n              />\n            }\n            disabled={isDisabled || isReadOnly}\n            label={<FormLabel {...FormLabelProps}>{label}</FormLabel>}\n          />\n          {text && (\n            <FormHelperText {...FormHelperTextProps}>{text}</FormHelperText>\n          )}\n        </FormGroup>\n      </FormControl>\n    </FormFieldGrid>\n  )\n}\n\nexport function Checkbox<T = OptionValue>({\n  options,\n  ...props\n}: CheckboxProps<T>) {\n  return options ? (\n    // The list renders option values opaquely, so the wider generic is\n    // safe to narrow to the common OptionValue shape.\n    <MultipleChoiceList options={options as SelectOption<OptionValue>[]} {...props} />\n  ) : (\n    <SingleCheckbox {...props} />\n  )\n}\n\nexport default Checkbox\n"],"names":["Checkbox","MuiCheckbox","FormControl","FormControlLabel","FormGroup","FormHelperText","FormLabel","useFieldApi","useStoredFieldHasValue","FormFieldGrid","buildFieldClear","MultipleChoiceList","validationError","SingleCheckbox","props","type","input","isReadOnly","isDisabled","isRequired","label","helperText","description","validateOnMount","meta","help","clearable","unsetChecked","FormFieldGridProps","FormControlProps","FormGroupProps","FormControlLabelProps","CheckboxProps","FormLabelProps","FormHelperTextProps","inputProps","rest","invalid","text","touched","warning","hasValue","name","clear","locked","Boolean","onClear","onChange","undefined","required","error","component","control","checked","disabled","value","slotProps","readOnly","options"],"mappings":";;;AAAA;;;;;;;;;;;;;;;CAeC,GAED;;;CAGC,GAED,SACEA,YAAYC,WAAW,EAEvBC,WAAW,EAEXC,gBAAgB,EAEhBC,SAAS,EAETC,cAAc,EAEdC,SAAS,QAEJ,gBAAe;AAEtB,SAASC,WAAW,QAAQ,iCAA6B;AACzD,SAASC,sBAAsB,QAAQ,0BAAsB;AAC7D,OAAOC,iBACLC,eAAe,QAEV,uBAAmB;AAC1B,OAAOC,wBAAwB,4BAAwB;AAEvD,SAAiCC,eAAe,QAAQ,wBAAoB;AAsB5E,OAAO,MAAMC,iBAAiB,CAACC;IAC7B,MAsBIP,eAAAA,YAAY,aACXO;QACHC,MAAM;SAxBF,EACJC,KAAK,EACLC,UAAU,EACVC,UAAU,EACVC,UAAU,EACVC,KAAK,EACLC,UAAU,EACVC,WAAW,EACXC,eAAe,EACfC,IAAI,EACJC,IAAI,EACJC,SAAS,EACTC,YAAY,EACZC,qBAAqB,CAAC,CAAC,EACvBC,mBAAmB,CAAC,CAAC,EACrBC,iBAAiB,CAAC,CAAC,EACnBC,wBAAwB,CAAC,CAAC,EAC1BC,gBAAgB,CAAC,CAAC,EAClBC,iBAAiB,CAAC,CAAC,EACnBC,sBAAsB,CAAC,CAAC,EACxBC,UAAU,EAEX,GAAG5B,cADC6B,wCACD7B;;;;;;;;;;;;;;;;;;;;;;IAIJ,MAAM8B,UAAUzB,gBAAgBY,MAA2BD;IAC3D,MAAMe,OACJD,WACC,AAACb,CAAAA,KAAKe,OAAO,IAAIhB,eAAc,KAAMC,KAAKgB,OAAO,IAClDnB,cACAC;IACF,MAAMmB,WAAWjC,uBAAuBQ,MAAM0B,IAAI;IAClD,MAAMC,QAAQjC,gBAAgB;QAC5BgB;QACAN;QACAqB;QACAG,QAAQC,QAAQ3B,cAAcD;QAC9B6B,SAAS,IAAM9B,MAAM+B,QAAQ,CAACC;IAChC;IAEA,qBACE,KAACvC;QAAcgB,MAAMA;QAAMkB,OAAOA;OAAWf;kBAC3C,cAAA,KAAC1B;YACC+C,UAAU9B;YACV+B,OAAO,CAAC,CAACb;YACTc,WAAU;WACNtB;sBAEJ,cAAA,MAACzB,wBAAc0B;;kCACb,KAAC3B,+BACK4B;wBACJqB,uBACE,KAACnD,0BACKe;4BACJqC,SAASZ,WAAWzB,MAAMqC,OAAO,GAAGR,QAAQlB;2BACxCK;4BACJsB,UAAUpC,cAAcD;4BACxBsC,OAAOvC,MAAM0B,IAAI;4BACjBc,WAAW;gCACTxC,OAAO;oCAAEyC,UAAUxC;mCAAekB;4BACpC;2BACIC;wBAGRkB,UAAUpC,cAAcD;wBACxBG,qBAAO,KAACd,wBAAc2B;sCAAiBb;;;oBAExCkB,sBACC,KAACjC,6BAAmB6B;kCAAsBI;;;;;;AAMtD,EAAC;AAED,OAAO,SAAStC,SAA0B,EAGvB;QAHuB,EACxC0D,OAAO,EAEU,OADd5C;;;IAEH,OAAO4C,UACL,mEAAmE;IACnE,kDAAkD;kBAClD,KAAC/C;QAAmB+C,SAASA;OAA4C5C,wBAEzE,KAACD,6BAAmBC;AAExB;AAEA,eAAed,SAAQ"}