@aglyn/plugins-mui 1.0.0-beta.246 → 1.0.0-beta.249

package/src/lib/components/form-controls.js

@@ -0,0 +1,845 @@
+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 * as Aglyn from "@aglyn/aglyn";
+import { mdiCheckboxMarkedOutline, mdiFormDropdown, mdiFormTextbox, mdiFormatText, mdiRadioboxMarked, mdiStarOutline, mdiTextShort, mdiTagOutline, mdiFormSelect } from "@aglyn/shared-data-mdi";
+import Checkbox from "@mui/material/Checkbox";
+import FormControl from "@mui/material/FormControl";
+import FormControlLabel from "@mui/material/FormControlLabel";
+import FormHelperText from "@mui/material/FormHelperText";
+import FilledInput from "@mui/material/FilledInput";
+import FormLabel from "@mui/material/FormLabel";
+import NativeSelect from "@mui/material/NativeSelect";
+import OutlinedInput from "@mui/material/OutlinedInput";
+import Radio from "@mui/material/Radio";
+import RadioGroup from "@mui/material/RadioGroup";
+import Rating from "@mui/material/Rating";
+import { alpha, useTheme } from "@mui/material/styles";
+import { createContext, forwardRef, useContext, useId } from "react";
+import { BUNDLE_ID } from "../constants/bundle-common.js";
+import { FIELD_TEXT_CONTENT } from "../constants/field-presets.js";
+import { dropClearedProps } from "../utils/drop-cleared-props.js";
+import { generatePresetId } from "../utils/generate-preset-id.js";
+/*
+ * MUI's FORM ELEMENTS, ONE BESIGNER ELEMENT EACH.
+ *
+ * A field is not one element: it is a Form Control holding a label, an input
+ * and a line of help text, exactly as MUI builds it. Each piece is placed,
+ * selected and styled on its own — a label's color, an input's fill and
+ * corners, the help text's size — with the ordinary Styles panel, and the
+ * presets at the bottom of this file are just ready-made arrangements of
+ * them. Nothing here knows about forms submitting: an input carries a NAME,
+ * and whatever form it sits in sends what the browser sends.
+ *
+ * Component ids are persisted in documents; never rename them.
+ */ export const FORM_CONTROL_ID = 'muiFormControl';
+export const FORM_LABEL_ID = 'muiFormLabel';
+export const INPUT_ID = 'muiInput';
+export const FORM_HELPER_TEXT_ID = 'muiFormHelperText';
+export const SELECT_ID = 'muiSelect';
+export const SELECT_OPTION_ID = 'muiSelectOption';
+export const CHECKBOX_ID = 'muiCheckbox';
+export const RADIO_GROUP_ID = 'muiRadioGroup';
+export const RADIO_ID = 'muiRadio';
+export const CHOICE_LABEL_ID = 'muiFormControlLabel';
+export const RATING_ID = 'muiRating';
+/**
+ * The id a Form Control gives the input inside it, so the Form Label beside
+ * that input names it (`for=`) without the author wiring anything.
+ */ const FieldIdContext = /*#__PURE__*/ createContext(undefined);
+/** A field's frame: label, input and help text together. */ export const AglynFormControl = /*#__PURE__*/ forwardRef((props, ref)=>{
+    const id = `field-${useId().replace(/:/g, '')}`;
+    return /*#__PURE__*/ _jsx(FieldIdContext.Provider, {
+        value: id,
+        children: /*#__PURE__*/ _jsx(FormControl, _extends({
+            ref: ref
+        }, dropClearedProps(props)))
+    });
+});
+AglynFormControl.displayName = 'AglynFormControl';
+/** The label above an input, linked to it by the Form Control. */ export const AglynFormLabel = /*#__PURE__*/ forwardRef((props, ref)=>{
+    const id = useContext(FieldIdContext);
+    return /*#__PURE__*/ _jsx(FormLabel, _extends({
+        ref: ref,
+        component: "label"
+    }, id ? {
+        htmlFor: id
+    } : {}, dropClearedProps(props)));
+});
+AglynFormLabel.displayName = 'AglynFormLabel';
+/**
+ * The outline an Input or Select draws, ON ITS OWN BOX.
+ *
+ * MUI paints an outlined input's border with an inner `<fieldset>`, so the
+ * Styles panel's Border Color, Border and Corner Radius — which reach the
+ * element's own box — would change nothing a visitor can see. Hiding that
+ * fieldset and drawing the same outline (MUI's resting, hover, focus and
+ * error colors) on the box itself puts every border and corner field on the
+ * outline you actually see. The node's own styles come after, so whatever an
+ * author sets wins; focus and error still show through their own rules.
+ *
+ * The resting outline sits under `:where()`, which weighs nothing, so the
+ * site theme's input border color (the Style components card) outranks it,
+ * as MUI's own corner radius and the theme's corners already do.
+ */ const outlinedBoxSx = (theme)=>({
+        '*:where(&)': {
+            border: '1px solid',
+            borderColor: alpha(theme.palette.text.primary, 0.23)
+        },
+        '& .MuiOutlinedInput-notchedOutline': {
+            display: 'none'
+        },
+        '&:hover': {
+            borderColor: 'text.primary'
+        },
+        '&.Mui-focused': {
+            borderColor: 'primary.main',
+            boxShadow: `0 0 0 1px ${theme.palette.primary.main}`
+        },
+        '&.Mui-error': {
+            borderColor: 'error.main'
+        },
+        '&.Mui-disabled': {
+            borderColor: 'action.disabled'
+        }
+    });
+/**
+ * Whether the site theme draws inputs filled: the Input style its Style
+ * components card sets, which is MUI's own text field default.
+ */ const useFilledInputs = ()=>{
+    var _useTheme_components_MuiTextField_defaultProps, _useTheme_components_MuiTextField, _useTheme_components;
+    return ((_useTheme_components = useTheme().components) == null ? void 0 : (_useTheme_components_MuiTextField = _useTheme_components.MuiTextField) == null ? void 0 : (_useTheme_components_MuiTextField_defaultProps = _useTheme_components_MuiTextField.defaultProps) == null ? void 0 : _useTheme_components_MuiTextField_defaultProps.variant) === 'filled';
+};
+/** A node's `sx`, as a list the outline can go in front of. */ const nodeSxList = (sx)=>sx === undefined || sx === null ? [] : Array.isArray(sx) ? sx : [
+        sx
+    ];
+/** The box a visitor types in. */ export const AglynInput = /*#__PURE__*/ forwardRef((props, ref)=>{
+    const _dropClearedProps = dropClearedProps(props), { name, type, multiline, minRows, placeholder, required, ariaLabel, datasetFieldId: _datasetFieldId } = _dropClearedProps, rest = _object_without_properties_loose(_dropClearedProps, [
+        "name",
+        "type",
+        "multiline",
+        "minRows",
+        "placeholder",
+        "required",
+        "ariaLabel",
+        "datasetFieldId"
+    ]);
+    const id = useContext(FieldIdContext);
+    const filled = useFilledInputs();
+    const inputProps = _extends({}, id ? {
+        id
+    } : {}, {
+        name: name || undefined,
+        type: multiline ? undefined : type || 'text',
+        multiline: Boolean(multiline)
+    }, multiline ? {
+        minRows: minRows || 3
+    } : {}, {
+        placeholder: placeholder || undefined,
+        required: Boolean(required),
+        inputProps: ariaLabel ? {
+            'aria-label': ariaLabel
+        } : undefined
+    });
+    if (filled) return /*#__PURE__*/ _jsx(FilledInput, _extends({
+        ref: ref
+    }, inputProps, rest));
+    return /*#__PURE__*/ _jsx(OutlinedInput, _extends({
+        ref: ref,
+        // The label is its own element above the box, so the outline never
+        // carries a notch for a floating one.
+        notched: false
+    }, inputProps, rest, {
+        sx: [
+            outlinedBoxSx,
+            ...nodeSxList(rest['sx'])
+        ]
+    }));
+});
+AglynInput.displayName = 'AglynInput';
+/** One line of help or guidance under a field. */ export const AglynFormHelperText = /*#__PURE__*/ forwardRef((props, ref)=>/*#__PURE__*/ _jsx(FormHelperText, _extends({
+        ref: ref
+    }, dropClearedProps(props))));
+AglynFormHelperText.displayName = 'AglynFormHelperText';
+/**
+ * A dropdown. Its choices are Select Option elements inside it — the
+ * browser's own list, so every choice is a real element a page can edit.
+ */ export const AglynSelect = /*#__PURE__*/ forwardRef((props, ref)=>{
+    const _dropClearedProps = dropClearedProps(props), { name, required, placeholder, ariaLabel, children, size, datasetFieldId: _datasetFieldId } = _dropClearedProps, rest = _object_without_properties_loose(_dropClearedProps, [
+        "name",
+        "required",
+        "placeholder",
+        "ariaLabel",
+        "children",
+        "size",
+        "datasetFieldId"
+    ]);
+    const id = useContext(FieldIdContext);
+    const filled = useFilledInputs();
+    return /*#__PURE__*/ _jsxs(NativeSelect, _extends({
+        ref: ref,
+        input: filled ? /*#__PURE__*/ _jsx(FilledInput, {
+            size: size,
+            sx: rest['sx']
+        }) : /*#__PURE__*/ _jsx(OutlinedInput, {
+            notched: false,
+            size: size,
+            sx: [
+                outlinedBoxSx,
+                ...nodeSxList(rest['sx'])
+            ]
+        }),
+        defaultValue: "",
+        inputProps: _extends({}, id ? {
+            id
+        } : {}, {
+            name: name || undefined,
+            required: Boolean(required)
+        }, ariaLabel ? {
+            'aria-label': ariaLabel
+        } : {})
+    }, rest, {
+        // The node's styles ride the outlined box above, where they reach
+        // what a visitor sees.
+        sx: undefined,
+        children: [
+            /*#__PURE__*/ _jsx("option", {
+                value: "",
+                disabled: Boolean(required),
+                children: placeholder || ''
+            }),
+            children
+        ]
+    }));
+});
+AglynSelect.displayName = 'AglynSelect';
+/** One choice in a Select. */ export const AglynSelectOption = /*#__PURE__*/ forwardRef((props, ref)=>{
+    const _dropClearedProps = dropClearedProps(props), { value, children } = _dropClearedProps, rest = _object_without_properties_loose(_dropClearedProps, [
+        "value",
+        "children"
+    ]);
+    const text = typeof children === 'string' ? children : '';
+    return /*#__PURE__*/ _jsx("option", _extends({
+        ref: ref,
+        value: value != null ? value : text
+    }, rest, {
+        children: children
+    }));
+});
+AglynSelectOption.displayName = 'AglynSelectOption';
+/**
+ * The props an answer element hands MUI: cleared values dropped, and the
+ * dataset mapping — authoring data read off the node, never a DOM attribute —
+ * taken out.
+ */ function withoutMapping(props) {
+    const _dropClearedProps = dropClearedProps(props), { datasetFieldId: _datasetFieldId } = _dropClearedProps, rest = _object_without_properties_loose(_dropClearedProps, [
+        "datasetFieldId"
+    ]);
+    return rest;
+}
+/** A tick box. Put it in a Choice Label to give it words. */ export const AglynCheckbox = /*#__PURE__*/ forwardRef((props, ref)=>/*#__PURE__*/ _jsx(Checkbox, _extends({
+        ref: ref
+    }, withoutMapping(props))));
+AglynCheckbox.displayName = 'AglynCheckbox';
+/** A set of Radio choices sharing one name; one may be picked. */ export const AglynRadioGroup = /*#__PURE__*/ forwardRef((props, ref)=>/*#__PURE__*/ _jsx(RadioGroup, _extends({
+        ref: ref
+    }, withoutMapping(props))));
+AglynRadioGroup.displayName = 'AglynRadioGroup';
+/** One choice in a Radio Group. Put it in a Choice Label to give it words. */ export const AglynRadio = /*#__PURE__*/ forwardRef((props, ref)=>/*#__PURE__*/ _jsx(Radio, _extends({
+        ref: ref
+    }, dropClearedProps(props))));
+AglynRadio.displayName = 'AglynRadio';
+/**
+ * The words beside a Checkbox or Radio, clickable as one with it — MUI's
+ * FormControlLabel, holding the control as its child element.
+ */ export const AglynChoiceLabel = /*#__PURE__*/ forwardRef((props, ref)=>{
+    const _dropClearedProps = dropClearedProps(props), { label, children } = _dropClearedProps, rest = _object_without_properties_loose(_dropClearedProps, [
+        "label",
+        "children"
+    ]);
+    return /*#__PURE__*/ _jsx(FormControlLabel, _extends({
+        ref: ref,
+        label: label != null ? label : '',
+        // The control is whatever element the author placed inside; a
+        // `display: contents` holder keeps it the label's direct box.
+        control: /*#__PURE__*/ _jsx("span", {
+            style: {
+                display: 'contents'
+            },
+            children: children
+        })
+    }, rest));
+});
+AglynChoiceLabel.displayName = 'AglynChoiceLabel';
+/** Stars a visitor picks; sends the number chosen. */ export const AglynRating = /*#__PURE__*/ forwardRef((props, ref)=>/*#__PURE__*/ _jsx(Rating, _extends({
+        ref: ref
+    }, withoutMapping(props))));
+AglynRating.displayName = 'AglynRating';
+// ── Attributes ──────────────────────────────────────────────────────────────
+const FIELD_NAME = {
+    name: 'name',
+    label: 'Field name',
+    description: 'What the answer is sent as — the key it is stored under in submissions. ' + 'Two inputs in one form need two names (radios share their group’s).',
+    component: Aglyn.FieldComponentType.TEXT_FIELD
+};
+/**
+ * Which field of the form's dataset this answer is stored under — the same
+ * picker the all-in-one Form Field had, listing the fields of the dataset
+ * chosen on the Form around it. Stored by id, so renaming the dataset field
+ * never breaks the mapping; left empty, the answer matches by name.
+ */ const FIELD_DATASET_FIELD = {
+    name: 'datasetFieldId',
+    label: 'Maps to schema field',
+    description: 'The field of the form’s dataset this answer is stored under. Left ' + 'empty, it matches a dataset field by its Field name.',
+    component: Aglyn.FieldComponentType.DATASET_FIELD_SELECT
+};
+const FIELD_INPUT_SIZE = {
+    name: 'size',
+    label: 'Size',
+    description: 'Normal is 56px tall; Small is 40px, to sit beside a button.',
+    component: Aglyn.FieldComponentType.SELECT,
+    options: [
+        {
+            value: 'medium',
+            label: 'Normal'
+        },
+        {
+            value: 'small',
+            label: 'Small'
+        }
+    ]
+};
+const FIELD_REQUIRED = {
+    name: 'required',
+    label: 'Required?',
+    description: 'The form will not send until this is answered.',
+    component: Aglyn.FieldComponentType.SWITCH
+};
+const FIELD_ARIA_LABEL = {
+    name: 'ariaLabel',
+    label: 'Accessible label',
+    description: 'Names the input for screen readers when there is no Form Label beside ' + 'it. Not shown on the page.',
+    component: Aglyn.FieldComponentType.TEXT_FIELD
+};
+const FIELD_FULL_WIDTH = {
+    name: 'fullWidth',
+    label: 'Full width?',
+    description: 'Fills the width of whatever holds it.',
+    component: Aglyn.FieldComponentType.SWITCH
+};
+const FIELD_PLACEHOLDER = {
+    name: 'placeholder',
+    label: 'Placeholder',
+    description: 'A gray hint inside the empty input, such as you@company.com. It is ' + 'not a label: it disappears as soon as someone types.',
+    component: Aglyn.FieldComponentType.TEXT_FIELD
+};
+const FIELD_CHOICE_VALUE = {
+    name: 'value',
+    label: 'Value',
+    description: 'What is sent when this is chosen.',
+    component: Aglyn.FieldComponentType.TEXT_FIELD
+};
+const category = Aglyn.ComponentCategory.FORMS;
+export const formControlSchema = {
+    $id: FORM_CONTROL_ID,
+    pluginId: BUNDLE_ID,
+    displayName: 'Form Control',
+    description: 'One field’s frame: holds a Form Label, an input and Helper Text, and ' + 'links the label to the input.',
+    category,
+    icon: {
+        path: mdiFormTextbox.path,
+        sx: {
+            color: 'info.main'
+        }
+    },
+    attributes: [
+        FIELD_FULL_WIDTH,
+        _extends({}, FIELD_REQUIRED, {
+            description: 'Marks the label with an asterisk. Set Required? on the input too.'
+        })
+    ]
+};
+export const formLabelSchema = {
+    $id: FORM_LABEL_ID,
+    pluginId: BUNDLE_ID,
+    displayName: 'Form Label',
+    description: 'The words that name a field, above its input.',
+    category,
+    icon: {
+        path: mdiTagOutline.path,
+        sx: {
+            color: 'info.main'
+        }
+    },
+    flags: {
+        textEditable: Aglyn.FEATURE_FLAG.ENABLED
+    },
+    attributes: [
+        FIELD_TEXT_CONTENT
+    ]
+};
+export const inputSchema = {
+    $id: INPUT_ID,
+    pluginId: BUNDLE_ID,
+    displayName: 'Input',
+    description: 'A box a visitor types in: text, email, phone, link or number.',
+    category,
+    icon: {
+        path: mdiTextShort.path,
+        sx: {
+            color: 'info.main'
+        }
+    },
+    flags: {
+        selfClosing: Aglyn.FEATURE_FLAG.ENABLED
+    },
+    attributes: [
+        FIELD_NAME,
+        FIELD_DATASET_FIELD,
+        {
+            name: 'type',
+            label: 'Type',
+            description: 'What goes in it. Email, phone and link bring the right phone keyboard.',
+            component: Aglyn.FieldComponentType.SELECT,
+            options: [
+                {
+                    value: 'text',
+                    label: 'Text'
+                },
+                {
+                    value: 'email',
+                    label: 'Email'
+                },
+                {
+                    value: 'tel',
+                    label: 'Phone'
+                },
+                {
+                    value: 'url',
+                    label: 'Link'
+                },
+                {
+                    value: 'number',
+                    label: 'Number'
+                }
+            ]
+        },
+        FIELD_PLACEHOLDER,
+        FIELD_REQUIRED,
+        {
+            name: 'multiline',
+            label: 'Several lines?',
+            description: 'A message box instead of a single line.',
+            component: Aglyn.FieldComponentType.SWITCH
+        },
+        FIELD_INPUT_SIZE,
+        FIELD_FULL_WIDTH,
+        FIELD_ARIA_LABEL
+    ]
+};
+export const formHelperTextSchema = {
+    $id: FORM_HELPER_TEXT_ID,
+    pluginId: BUNDLE_ID,
+    displayName: 'Helper Text',
+    description: 'A line of guidance under a field.',
+    category,
+    icon: {
+        path: mdiFormatText.path,
+        sx: {
+            color: 'info.main'
+        }
+    },
+    flags: {
+        textEditable: Aglyn.FEATURE_FLAG.ENABLED
+    },
+    attributes: [
+        FIELD_TEXT_CONTENT
+    ]
+};
+export const selectSchema = {
+    $id: SELECT_ID,
+    pluginId: BUNDLE_ID,
+    displayName: 'Select',
+    description: 'A dropdown of Select Options; one may be picked.',
+    category,
+    icon: {
+        path: mdiFormDropdown.path,
+        sx: {
+            color: 'info.main'
+        }
+    },
+    restrictChildren: [
+        Aglyn.LinealDirectiveFlag.LIMIT_TO,
+        {
+            components: [
+                SELECT_OPTION_ID
+            ]
+        }
+    ],
+    attributes: [
+        FIELD_NAME,
+        FIELD_DATASET_FIELD,
+        _extends({}, FIELD_PLACEHOLDER, {
+            description: 'Shown until a choice is made; never sent.'
+        }),
+        FIELD_REQUIRED,
+        FIELD_INPUT_SIZE,
+        FIELD_FULL_WIDTH,
+        FIELD_ARIA_LABEL
+    ]
+};
+export const selectOptionSchema = {
+    $id: SELECT_OPTION_ID,
+    pluginId: BUNDLE_ID,
+    displayName: 'Select Option',
+    description: 'One choice in a Select.',
+    category,
+    icon: {
+        path: mdiFormSelect.path,
+        sx: {
+            color: 'info.main'
+        }
+    },
+    flags: {
+        selfClosing: Aglyn.FEATURE_FLAG.ENABLED,
+        textEditable: Aglyn.FEATURE_FLAG.ENABLED
+    },
+    attributes: [
+        FIELD_TEXT_CONTENT,
+        _extends({}, FIELD_CHOICE_VALUE, {
+            description: 'What is sent. Leave empty to send the text.'
+        })
+    ]
+};
+export const checkboxSchema = {
+    $id: CHECKBOX_ID,
+    pluginId: BUNDLE_ID,
+    displayName: 'Checkbox',
+    description: 'A tick box. Put it in a Choice Label to give it words.',
+    category,
+    icon: {
+        path: mdiCheckboxMarkedOutline.path,
+        sx: {
+            color: 'info.main'
+        }
+    },
+    flags: {
+        selfClosing: Aglyn.FEATURE_FLAG.ENABLED
+    },
+    attributes: [
+        FIELD_NAME,
+        FIELD_DATASET_FIELD,
+        _extends({}, FIELD_CHOICE_VALUE, {
+            description: 'What is sent when ticked, such as Yes.'
+        }),
+        FIELD_REQUIRED
+    ]
+};
+export const radioGroupSchema = {
+    $id: RADIO_GROUP_ID,
+    pluginId: BUNDLE_ID,
+    displayName: 'Radio Group',
+    description: 'A set of Radio choices; one may be picked.',
+    category,
+    icon: {
+        path: mdiRadioboxMarked.path,
+        sx: {
+            color: 'info.main'
+        }
+    },
+    attributes: [
+        FIELD_NAME,
+        FIELD_DATASET_FIELD,
+        {
+            name: 'row',
+            label: 'In a row?',
+            description: 'Side by side instead of one under another.',
+            component: Aglyn.FieldComponentType.SWITCH
+        }
+    ]
+};
+export const radioSchema = {
+    $id: RADIO_ID,
+    pluginId: BUNDLE_ID,
+    displayName: 'Radio',
+    description: 'One choice in a Radio Group. Put it in a Choice Label to give it words.',
+    category,
+    icon: {
+        path: mdiRadioboxMarked.path,
+        sx: {
+            color: 'info.main'
+        }
+    },
+    flags: {
+        selfClosing: Aglyn.FEATURE_FLAG.ENABLED
+    },
+    attributes: [
+        FIELD_CHOICE_VALUE,
+        FIELD_REQUIRED
+    ]
+};
+export const choiceLabelSchema = {
+    $id: CHOICE_LABEL_ID,
+    pluginId: BUNDLE_ID,
+    displayName: 'Choice Label',
+    description: 'The words beside a Checkbox or Radio placed inside it; clicking them ticks it.',
+    category,
+    icon: {
+        path: mdiTagOutline.path,
+        sx: {
+            color: 'info.main'
+        }
+    },
+    restrictChildren: [
+        Aglyn.LinealDirectiveFlag.LIMIT_TO,
+        {
+            components: [
+                CHECKBOX_ID,
+                RADIO_ID
+            ]
+        }
+    ],
+    attributes: [
+        {
+            name: 'label',
+            label: 'Text',
+            description: 'The words beside the box.',
+            component: Aglyn.FieldComponentType.TEXT_FIELD
+        }
+    ]
+};
+export const ratingSchema = {
+    $id: RATING_ID,
+    pluginId: BUNDLE_ID,
+    displayName: 'Rating',
+    description: 'Stars a visitor picks; sends the number chosen.',
+    category,
+    icon: {
+        path: mdiStarOutline.path,
+        sx: {
+            color: 'info.main'
+        }
+    },
+    flags: {
+        selfClosing: Aglyn.FEATURE_FLAG.ENABLED
+    },
+    attributes: [
+        FIELD_NAME,
+        FIELD_DATASET_FIELD,
+        {
+            name: 'max',
+            label: 'Stars',
+            description: 'How many stars to show.',
+            component: Aglyn.FieldComponentType.TEXT_FIELD,
+            type: 'number'
+        }
+    ]
+};
+// ── Presets: ready-made arrangements of the pieces above ────────────────────
+const node = (componentId, props, nodes, sx)=>_extends({
+        $id: null,
+        componentId,
+        pluginId: BUNDLE_ID
+    }, props ? {
+        props
+    } : {}, nodes ? {
+        nodes
+    } : {}, sx ? {
+        sx
+    } : {});
+/** A labelled text field: Form Control › Form Label + Input. */ export const textFieldPreset = (label, input)=>node(FORM_CONTROL_ID, {
+        fullWidth: true
+    }, [
+        node(FORM_LABEL_ID, {
+            children: label
+        }),
+        node(INPUT_ID, _extends({
+            fullWidth: true
+        }, input))
+    ]);
+const preset = ($id, displayName, description, icon, data)=>({
+        $id,
+        type: Aglyn.NodeType.PRESET,
+        displayName,
+        description,
+        pluginId: BUNDLE_ID,
+        category,
+        icon: {
+            path: icon,
+            sx: {
+                color: 'info.main'
+            }
+        },
+        data
+    });
+/**
+ * Each element on its own, so any piece can be inserted by itself — a bare
+ * Input beside a Button in a sign-up row, a Form Label above a field the
+ * author is assembling, one more Radio in a group. The field presets below
+ * are ready-made arrangements of the same pieces.
+ */ const singleElementPresets = [
+    preset(generatePresetId(FORM_CONTROL_ID), 'Form Control', 'An empty field frame: put a Form Label, an input and Helper Text in it.', mdiFormTextbox.path, node(FORM_CONTROL_ID, {
+        fullWidth: true
+    })),
+    preset(generatePresetId(FORM_LABEL_ID), 'Form Label', 'The words that name a field, above its input.', mdiTagOutline.path, node(FORM_LABEL_ID, {
+        children: 'Label'
+    })),
+    preset(generatePresetId(INPUT_ID), 'Input', 'A box a visitor types in, on its own.', mdiTextShort.path, node(INPUT_ID, {
+        name: 'field',
+        placeholder: 'Type here'
+    })),
+    preset(generatePresetId(SELECT_ID), 'Select', 'A dropdown with two options.', mdiFormDropdown.path, node(SELECT_ID, {
+        name: 'choice',
+        placeholder: 'Choose…'
+    }, [
+        node(SELECT_OPTION_ID, {
+            children: 'Option one'
+        }),
+        node(SELECT_OPTION_ID, {
+            children: 'Option two'
+        })
+    ])),
+    preset(generatePresetId(SELECT_OPTION_ID), 'Select Option', 'One more choice for a Select.', mdiFormSelect.path, node(SELECT_OPTION_ID, {
+        children: 'Option'
+    })),
+    preset(generatePresetId(RADIO_GROUP_ID), 'Radio Group', 'A set of Radio choices sharing one Field name.', mdiRadioboxMarked.path, node(RADIO_GROUP_ID, {
+        name: 'pick'
+    }, [
+        node(CHOICE_LABEL_ID, {
+            label: 'First'
+        }, [
+            node(RADIO_ID, {
+                value: 'First'
+            })
+        ]),
+        node(CHOICE_LABEL_ID, {
+            label: 'Second'
+        }, [
+            node(RADIO_ID, {
+                value: 'Second'
+            })
+        ])
+    ])),
+    preset(generatePresetId(RADIO_ID), 'Radio', 'One more choice for a Radio Group, with its words.', mdiRadioboxMarked.path, node(CHOICE_LABEL_ID, {
+        label: 'Another choice'
+    }, [
+        node(RADIO_ID, {
+            value: 'Another choice'
+        })
+    ])),
+    preset(generatePresetId(CHOICE_LABEL_ID), 'Choice Label', 'Words beside a tick box; holds a Checkbox.', mdiTagOutline.path, node(CHOICE_LABEL_ID, {
+        label: 'Yes, please'
+    }, [
+        node(CHECKBOX_ID, {
+            name: 'agree',
+            value: 'Yes'
+        })
+    ])),
+    preset(generatePresetId(RATING_ID), 'Rating', 'Five stars, on their own.', mdiStarOutline.path, node(RATING_ID, {
+        name: 'rating'
+    }))
+];
+export const formControlPresets = [
+    ...singleElementPresets,
+    preset(generatePresetId(FORM_CONTROL_ID, 'text'), 'Text field', 'A label and a one-line input.', mdiFormTextbox.path, textFieldPreset('Name', {
+        name: 'name'
+    })),
+    preset(generatePresetId(FORM_CONTROL_ID, 'email'), 'Email field', 'A label and an email input.', mdiFormTextbox.path, textFieldPreset('Email', {
+        name: 'email',
+        type: 'email',
+        required: true
+    })),
+    preset(generatePresetId(FORM_CONTROL_ID, 'message'), 'Message field', 'A label and a several-line input.', mdiFormTextbox.path, textFieldPreset('Message', {
+        name: 'message',
+        multiline: true,
+        minRows: 4
+    })),
+    preset(generatePresetId(FORM_CONTROL_ID, 'select'), 'Dropdown field', 'A label and a Select with three options.', mdiFormDropdown.path, node(FORM_CONTROL_ID, {
+        fullWidth: true
+    }, [
+        node(FORM_LABEL_ID, {
+            children: 'Choose one'
+        }),
+        node(SELECT_ID, {
+            name: 'choice',
+            fullWidth: true,
+            placeholder: 'Choose…'
+        }, [
+            node(SELECT_OPTION_ID, {
+                children: 'Option one'
+            }),
+            node(SELECT_OPTION_ID, {
+                children: 'Option two'
+            }),
+            node(SELECT_OPTION_ID, {
+                children: 'Option three'
+            })
+        ])
+    ])),
+    preset(generatePresetId(FORM_CONTROL_ID, 'radio'), 'Radio choice field', 'A label and a Radio Group with three choices.', mdiRadioboxMarked.path, node(FORM_CONTROL_ID, {}, [
+        node(FORM_LABEL_ID, {
+            children: 'Pick one'
+        }),
+        node(RADIO_GROUP_ID, {
+            name: 'pick'
+        }, [
+            node(CHOICE_LABEL_ID, {
+                label: 'First'
+            }, [
+                node(RADIO_ID, {
+                    value: 'First'
+                })
+            ]),
+            node(CHOICE_LABEL_ID, {
+                label: 'Second'
+            }, [
+                node(RADIO_ID, {
+                    value: 'Second'
+                })
+            ]),
+            node(CHOICE_LABEL_ID, {
+                label: 'Third'
+            }, [
+                node(RADIO_ID, {
+                    value: 'Third'
+                })
+            ])
+        ])
+    ])),
+    preset(generatePresetId(FORM_CONTROL_ID, 'checkbox'), 'Checkbox', 'A tick box with words beside it.', mdiCheckboxMarkedOutline.path, node(CHOICE_LABEL_ID, {
+        label: 'Yes, please'
+    }, [
+        node(CHECKBOX_ID, {
+            name: 'agree',
+            value: 'Yes'
+        })
+    ])),
+    preset(generatePresetId(FORM_HELPER_TEXT_ID), 'Helper Text', 'A line of guidance under a field.', mdiFormatText.path, node(FORM_HELPER_TEXT_ID, {
+        children: 'We never share your address.'
+    })),
+    preset(generatePresetId(FORM_CONTROL_ID, 'rating'), 'Rating field', 'A label and five stars.', mdiStarOutline.path, node(FORM_CONTROL_ID, {}, [
+        node(FORM_LABEL_ID, {
+            children: 'How did we do?'
+        }),
+        node(RATING_ID, {
+            name: 'rating'
+        })
+    ]))
+];
+
+//# sourceMappingURL=form-controls.js.map