@form-engine-ts/mui 3.0.0 → 3.2.0

package/README.md

@@ -36,7 +36,13 @@ import { MuiFormBuilder } from "@form-engine-ts/mui";
     emptyStateMessage: "No translation locales have been added yet.",
     defaultLocaleControl: "readOnly"
   }}
-  muiSlotProps={{ card: { sx: { p: 2 } }, accordion: { elevation: 0 } }}
+  muiSlotProps={{
+    card: { sx: { p: 2 } },
+    accordion: { elevation: 0 },
+    textField: { "data-testid": "builder-input" },
+    select: { variant: "filled" },
+    selectMenu: { PaperProps: { elevation: 4 } }
+  }}
 />;
 ```
 
@@ -70,6 +76,12 @@ default.
 `layoutOptions`, `localizationOptions`, and `muiSlotProps` are also accepted in `muiOptions` for low-level factories such
 as `createMuiBuilderSlots`; the dedicated `MuiFormBuilder` props take precedence.
 
+Select options in the MUI adapter support icons, descriptions, custom metadata, and custom `renderOption`/`renderValue`
+callbacks. Without a custom renderer, icons appear beside labels in the menu and in the selected value. The standard
+MUI field editor supplies icons for every field type and accepts `slots.fieldTypeSelect` and `slots.fieldEditorHeader`
+for focused customization. `muiSlotProps` also supports `textField`, `select`, `selectMenu`, `checkbox`, `button`, and
+`iconButton` MUI props in addition to the layout props.
+
 `MuiFormBuilder` supplies options through `MuiFormBuilderContext` to module-stable adapter and slot component types.
 Controlled schema updates therefore preserve input focus and uncontrolled MUI state such as an open localization
 accordion even when the parent passes inline option objects.

package/dist/index.cjs

@@ -56,6 +56,7 @@ __export(index_exports, {
   mergeMuiAdapterOptions: () => mergeMuiAdapterOptions,
   muiBuilderComponents: () => muiBuilderComponents,
   muiBuilderSlots: () => muiBuilderSlots,
+  muiDefaultFieldTypeIcon: () => muiDefaultFieldTypeIcon,
   muiDefaultIconResolver: () => muiDefaultIconResolver,
   resolveMuiAdapterOptions: () => resolveMuiAdapterOptions,
   useResolvedMuiAdapterOptions: () => useResolvedMuiAdapterOptions
@@ -159,9 +160,11 @@ function createMuiButtonAdapter(options) {
     targetId
   }) {
     const resolved = useResolvedMuiAdapterOptions(options);
+    const buttonSlotProps = resolved.muiSlotProps?.button;
     return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       import_material.Button,
       {
+        ...buttonSlotProps,
         id,
         className,
         type: "button",
@@ -175,7 +178,7 @@ function createMuiButtonAdapter(options) {
         "data-target-id": targetId,
         onClick,
         color: variant === "danger" ? "error" : "primary",
-        variant: resolved.buttonVariants?.[variant ?? "primary"] ?? resolved.buttonVariant,
+        variant: buttonSlotProps?.variant ?? resolved.buttonVariants?.[variant ?? "primary"] ?? resolved.buttonVariant,
         fullWidth: resolved.buttonFullWidth ?? false,
         sx: { whiteSpace: noWrap === false ? "normal" : "nowrap" },
         children
@@ -206,6 +209,8 @@ function createMuiCheckboxAdapter(options) {
     label
   }) {
     const resolved = useResolvedMuiAdapterOptions(options);
+    const checkboxSlotProps = resolved.muiSlotProps?.checkbox;
+    const checkboxInputProps = checkboxSlotProps?.inputProps;
     const helperId = id === void 0 ? void 0 : ariaDescribedBy?.split(/\s+/u)[0] ?? `${id}-helper-text`;
     const describedBy = ariaDescribedBy ?? (helperText === void 0 || helperText.length === 0 ? void 0 : helperId);
     return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_material2.FormControl, { className, error: Boolean(error), required, disabled: disabled || readOnly, children: [
@@ -216,16 +221,18 @@ function createMuiCheckboxAdapter(options) {
           control: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
             import_material2.Checkbox,
             {
+              ...checkboxSlotProps,
               id,
               name,
-              size: resolved.size,
+              size: checkboxSlotProps?.size ?? resolved.size,
               checked,
               required,
               disabled: disabled || readOnly,
               inputProps: {
-                "aria-label": ariaLabel,
-                "aria-describedby": describedBy,
-                "aria-labelledby": ariaLabelledBy
+                ...checkboxInputProps,
+                ...ariaLabel === void 0 ? {} : { "aria-label": ariaLabel },
+                ...describedBy === void 0 ? {} : { "aria-describedby": describedBy },
+                ...ariaLabelledBy === void 0 ? {} : { "aria-labelledby": ariaLabelledBy }
               },
               onChange: (event) => onChange(event.target.checked)
             }
@@ -330,16 +337,18 @@ function createMuiIconButtonAdapter(options) {
     title
   }) {
     const resolved = useResolvedMuiAdapterOptions(options);
+    const iconButtonSlotProps = resolved.muiSlotProps?.iconButton;
     const actionLabel = actionType === void 0 ? "Action" : resolved.getActionLabel?.(actionType) ?? FALLBACK_ACTION_LABELS[actionType];
     const tooltip = title ?? actionLabel;
     const color = actionType === "delete" ? "error" : actionType === "add" ? "primary" : "default";
     return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_material5.Tooltip, { title: tooltip, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
       import_material5.IconButton,
       {
+        ...iconButtonSlotProps,
         id,
         className,
         type: "button",
-        size: resolved.size,
+        size: iconButtonSlotProps?.size ?? resolved.size,
         color,
         disabled: disabled || readOnly,
         "aria-label": ariaLabel ?? tooltip,
@@ -405,6 +414,9 @@ var MuiSectionAdapter = createMuiSectionAdapter();
 // src/adapters/Select.tsx
 var import_material7 = require("@mui/material");
 var import_jsx_runtime7 = require("react/jsx-runtime");
+function normalizeOptions(options) {
+  return options.map((option) => typeof option === "string" ? { value: option, label: option } : option);
+}
 function createMuiSelectAdapter(options) {
   return function MuiSelect({
     id,
@@ -422,13 +434,19 @@ function createMuiSelectAdapter(options) {
     value,
     onChange,
     onKeyDown,
-    options: selectOptions
+    options: selectOptions,
+    renderOption,
+    renderValue
   }) {
     const resolved = useResolvedMuiAdapterOptions(options);
+    const normalizedOptions = normalizeOptions(selectOptions);
+    const selectSlotProps = resolved.muiSlotProps?.select;
+    const menuProps = { ...selectSlotProps?.MenuProps, ...resolved.muiSlotProps?.selectMenu };
+    const slotInputProps = selectSlotProps?.inputProps;
     const labelId = id === void 0 || label === void 0 ? void 0 : `${id}-label`;
     const helperId = id === void 0 ? void 0 : ariaDescribedBy?.split(/\s+/u)[0] ?? `${id}-helper-text`;
     const describedBy = ariaDescribedBy ?? (helperText === void 0 || helperText.length === 0 ? void 0 : helperId);
-    const handleChange = (event) => onChange(event.target.value);
+    const handleChange = (event) => onChange(String(event.target.value));
     return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
       import_material7.FormControl,
       {
@@ -444,6 +462,7 @@ function createMuiSelectAdapter(options) {
           /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
             import_material7.Select,
             {
+              ...selectSlotProps,
               id,
               labelId,
               name,
@@ -454,12 +473,28 @@ function createMuiSelectAdapter(options) {
               onKeyDown,
               required,
               readOnly,
+              variant: selectSlotProps?.variant ?? resolved.variant,
+              ...Object.keys(menuProps).length === 0 ? {} : { MenuProps: menuProps },
+              renderValue: (selected) => {
+                const selectedValue = typeof selected === "string" ? selected : String(selected ?? "");
+                const option = normalizedOptions.find((candidate) => candidate.value === selectedValue);
+                if (renderValue !== void 0) return renderValue(option);
+                if (option === void 0) return selectedValue;
+                return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_material7.Box, { display: "flex", alignItems: "center", gap: 0.75, children: [
+                  option.icon,
+                  /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { children: option.label })
+                ] });
+              },
               inputProps: {
-                "aria-label": ariaLabel,
-                "aria-describedby": describedBy,
-                "aria-labelledby": ariaLabelledBy
+                ...slotInputProps,
+                ...ariaLabel === void 0 ? {} : { "aria-label": ariaLabel },
+                ...describedBy === void 0 ? {} : { "aria-describedby": describedBy },
+                ...ariaLabelledBy === void 0 ? {} : { "aria-labelledby": ariaLabelledBy }
               },
-              children: selectOptions.map((option) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_material7.MenuItem, { value: option.value, disabled: option.disabled, children: option.label }, option.value))
+              children: normalizedOptions.map((option) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_material7.MenuItem, { value: option.value, disabled: option.disabled, children: renderOption === void 0 ? /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
+                option.icon === void 0 ? null : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_material7.ListItemIcon, { sx: { minWidth: 32 }, children: option.icon }),
+                /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_material7.ListItemText, { primary: option.label, secondary: option.description })
+              ] }) : renderOption(option) }, option.value))
             }
           ),
           helperText === void 0 || helperText.length === 0 ? null : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_material7.FormHelperText, { id: helperId, children: helperText })
@@ -494,9 +529,11 @@ function createMuiTextAreaAdapter(options) {
     rows
   }) {
     const resolved = useResolvedMuiAdapterOptions(options);
+    const textFieldSlotProps = resolved.muiSlotProps?.textField;
     return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
       import_material8.TextField,
       {
+        ...textFieldSlotProps,
         id,
         className,
         name,
@@ -522,7 +559,7 @@ function createMuiTextAreaAdapter(options) {
         placeholder,
         fullWidth: resolved.inputFullWidth ?? resolved.fullWidth,
         size: resolved.size,
-        variant: resolved.variant,
+        variant: textFieldSlotProps?.variant ?? resolved.variant,
         onChange: (event) => onChange(event.currentTarget.value)
       }
     );
@@ -559,9 +596,11 @@ function createMuiTextInputAdapter(options) {
     step
   }) {
     const resolved = useResolvedMuiAdapterOptions(options);
+    const textFieldSlotProps = resolved.muiSlotProps?.textField;
     return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
       import_material9.TextField,
       {
+        ...textFieldSlotProps,
         id,
         className,
         name,
@@ -590,7 +629,7 @@ function createMuiTextInputAdapter(options) {
         placeholder,
         fullWidth: resolved.inputFullWidth ?? resolved.fullWidth,
         size: resolved.size,
-        variant: resolved.variant,
+        variant: textFieldSlotProps?.variant ?? resolved.variant,
         onChange: (event) => onChange(event.currentTarget.value),
         onKeyDown
       }
@@ -624,6 +663,26 @@ function muiDefaultIconResolver(actionType) {
       return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_icons_material.DragHandle, { fontSize: "small" });
   }
 }
+function muiDefaultFieldTypeIcon(type) {
+  switch (type) {
+    case "text":
+      return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_icons_material.TextFields, { fontSize: "small" });
+    case "textarea":
+      return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_icons_material.Subject, { fontSize: "small" });
+    case "number":
+      return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_icons_material.Numbers, { fontSize: "small" });
+    case "rating":
+      return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_icons_material.Star, { fontSize: "small" });
+    case "select":
+      return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_icons_material.ArrowDropDown, { fontSize: "small" });
+    case "multi-select":
+      return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_icons_material.CheckBox, { fontSize: "small" });
+    case "checkbox":
+      return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_icons_material.CheckBox, { fontSize: "small" });
+    case "radio":
+      return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_icons_material.RadioButtonChecked, { fontSize: "small" });
+  }
+}
 
 // src/components.ts
 function isAdapterOptions(value) {
@@ -640,7 +699,8 @@ function buildMuiBuilderComponents(options) {
     Section: createMuiSectionAdapter(options),
     Fieldset: createMuiFieldsetAdapter(options),
     ErrorMessage: createMuiErrorMessageAdapter(options),
-    renderIcon: muiDefaultIconResolver
+    renderIcon: muiDefaultIconResolver,
+    renderFieldTypeIcon: muiDefaultFieldTypeIcon
   };
 }
 var muiBuilderComponents = {
@@ -653,7 +713,8 @@ var muiBuilderComponents = {
   Section: MuiSectionAdapter,
   Fieldset: MuiFieldsetAdapter,
   ErrorMessage: MuiErrorMessageAdapter,
-  renderIcon: muiDefaultIconResolver
+  renderIcon: muiDefaultIconResolver,
+  renderFieldTypeIcon: muiDefaultFieldTypeIcon
 };
 function createMuiBuilderComponents(optionsOrOverrides = {}, customOverrides) {
   const options = isAdapterOptions(optionsOrOverrides) ? optionsOrOverrides : void 0;
@@ -662,6 +723,7 @@ function createMuiBuilderComponents(optionsOrOverrides = {}, customOverrides) {
 }
 
 // src/slots/FieldEditor.tsx
+var import_core = require("@form-engine-ts/core");
 var import_material12 = require("@mui/material");
 
 // src/slots/OptionEditor.tsx
@@ -808,16 +870,7 @@ var MuiToolbarSlot = createMuiToolbarSlot();
 
 // src/slots/FieldEditor.tsx
 var import_jsx_runtime13 = require("react/jsx-runtime");
-var FIELD_TYPES = [
-  "text",
-  "textarea",
-  "number",
-  "rating",
-  "select",
-  "multi-select",
-  "checkbox",
-  "radio"
-];
+var FIELD_TYPES = import_core.DEFAULT_FIELD_TYPE_DEFINITIONS.map((definition) => definition.type);
 function isFieldType(value) {
   return FIELD_TYPES.some((type) => type === value);
 }
@@ -856,7 +909,8 @@ function createMuiFieldEditorSlot(options) {
     readOnly,
     actions,
     components,
-    translate
+    translate,
+    slots
   }) {
     const resolved = useResolvedMuiAdapterOptions(options);
     const { Button: Button2, Checkbox: Checkbox2, Select: Select2, TextArea, TextInput } = components;
@@ -867,6 +921,11 @@ function createMuiFieldEditorSlot(options) {
     const conditionSource = conditionSources.find((source) => source.id === condition?.questionId);
     const descriptionMode = resolved.fieldEditorOptions?.description ?? "editable";
     const titleErrorId = field.title.trim().length === 0 ? `mui-field-${field.id}-title-error` : void 0;
+    const FieldTypeSelect = slots?.fieldTypeSelect;
+    const FieldEditorHeader = slots?.fieldEditorHeader;
+    const changeFieldType = (nextType) => {
+      if (allowedTypes.includes(nextType)) actions.changeFieldType(field.id, nextType);
+    };
     return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
       import_material12.Card,
       {
@@ -875,26 +934,28 @@ function createMuiFieldEditorSlot(options) {
         variant: "outlined",
         sx: resolved.muiSlotProps?.card?.sx ?? { mb: resolved.dense ? 1 : 2, p: resolved.dense ? 1.5 : 2 },
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-            Toolbar,
-            {
-              schema,
-              translate,
-              kind: "field",
-              targetId: field.id,
-              index,
-              total: schema.fields.length,
-              title: field.title,
-              onMoveUp: () => actions.moveField(field.id, index - 1),
-              onMoveDown: () => actions.moveField(field.id, index + 1),
-              onRemove: () => actions.removeField(field.id),
-              readOnly,
-              actions,
-              components
-            }
-          ),
+          FieldEditorHeader === void 0 ? /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_jsx_runtime13.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+              Toolbar,
+              {
+                schema,
+                translate,
+                kind: "field",
+                targetId: field.id,
+                index,
+                total: schema.fields.length,
+                title: field.title,
+                onMoveUp: () => actions.moveField(field.id, index - 1),
+                onMoveDown: () => actions.moveField(field.id, index + 1),
+                onRemove: () => actions.removeField(field.id),
+                readOnly,
+                actions,
+                components
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_material12.Typography, { variant: "subtitle1", fontWeight: "bold", children: field.title })
+          ] }) : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(FieldEditorHeader, { field, index, totalFields: schema.fields.length, actions }),
           /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_material12.Stack, { ...resolved.muiSlotProps?.stack, spacing: resolved.dense ? 1 : 2, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_material12.Typography, { variant: "subtitle1", fontWeight: "bold", children: field.title }),
             /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_material12.Stack, { direction: { xs: "column", md: "row" }, spacing: resolved.dense ? 1 : 2, children: [
               /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
                 TextInput,
@@ -911,22 +972,37 @@ function createMuiFieldEditorSlot(options) {
                   onChange: (value) => actions.setSourceText({ kind: "field", id: field.id }, "title", value)
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+              FieldTypeSelect === void 0 ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
                 Select2,
                 {
                   id: `mui-field-${field.id}-type`,
                   name: `fields.${field.id}.type`,
                   label: translate("builder.type"),
                   value: allowedTypes.includes(field.type) ? field.type : "",
-                  options: FIELD_TYPES.filter((type) => allowedTypes.includes(type)).map((type) => ({
-                    value: type,
-                    label: translate(`builder.fieldType.${type}`)
-                  })),
+                  options: FIELD_TYPES.filter((type) => allowedTypes.includes(type)).map((type) => {
+                    const definition = import_core.DEFAULT_FIELD_TYPE_DEFINITIONS.find((candidate) => candidate.type === type);
+                    return {
+                      value: type,
+                      label: translate(definition?.labelKey ?? `builder.fieldType.${type}`),
+                      icon: components.renderFieldTypeIcon(type),
+                      ...definition?.category === void 0 ? {} : { kind: definition.category }
+                    };
+                  }),
                   disabled: readOnly,
                   onChange: (value) => {
-                    if (isFieldType(value)) actions.changeFieldType(field.id, value);
+                    if (isFieldType(value)) changeFieldType(value);
                   }
                 }
+              ) : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+                FieldTypeSelect,
+                {
+                  currentType: field.type,
+                  allowedTypes,
+                  onChangeType: changeFieldType,
+                  disabled: readOnly,
+                  readOnly,
+                  renderIcon: components.renderFieldTypeIcon
+                }
               )
             ] }),
             descriptionMode === "hidden" ? null : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
@@ -1493,6 +1569,7 @@ function MuiFormBuilder({
   mergeMuiAdapterOptions,
   muiBuilderComponents,
   muiBuilderSlots,
+  muiDefaultFieldTypeIcon,
   muiDefaultIconResolver,
   resolveMuiAdapterOptions,
   useResolvedMuiAdapterOptions

package/dist/index.d.cts

@@ -1,10 +1,13 @@
-import { BuilderActionIconType, LocalizationSummaryContext, BuilderButtonProps, BuilderCheckboxProps, BuilderErrorMessageProps, BuilderFieldsetProps, BuilderIconButtonProps, BuilderSectionProps, BuilderSelectProps, BuilderTextAreaProps, BuilderTextInputProps, FormBuilderComponents, FormBuilderSlots, FormBuilderProps, BuilderFieldEditorSlotProps, BuilderLocalizationSlotProps, BuilderOptionEditorSlotProps, BuilderToolbarSlotProps } from '@form-engine-ts/react';
+import { BuilderActionIconType, LocalizationSummaryContext, BuilderButtonProps, BuilderCheckboxProps, BuilderErrorMessageProps, BuilderFieldsetProps, BuilderIconButtonProps, BuilderSectionProps, BuilderSelectProps, BuilderTextAreaProps, BuilderTextInputProps, FormBuilderComponents, FormBuilderSlots, FormBuilderProps, QuestionType, BuilderFieldEditorSlotProps, BuilderLocalizationSlotProps, BuilderOptionEditorSlotProps, BuilderToolbarSlotProps } from '@form-engine-ts/react';
 import * as react from 'react';
 import { ReactNode, ComponentType } from 'react';
-import { CardProps, PaperProps, StackProps, AccordionProps } from '@mui/material';
+import { CardProps, PaperProps, AccordionProps, StackProps, TextFieldProps, SelectProps, MenuProps, CheckboxProps, ButtonProps, IconButtonProps } from '@mui/material';
 
 type BuilderSectionName = "basicSettings" | "completionMessage" | "questions" | "addQuestion" | "localization";
 type MuiButtonVariant = "contained" | "outlined" | "text";
+type MuiComponentSlotProps<T> = Partial<T> & {
+    readonly [key: `data-${string}`]: string | number | boolean | undefined;
+};
 interface LocaleOptionItem {
     readonly value: string;
     readonly label: string;
@@ -28,11 +31,29 @@ interface MuiLocalizationOptions {
 interface MuiFieldEditorOptions {
     readonly description?: "editable" | "readOnly" | "hidden";
 }
-interface MuiBuilderSlotProps {
+interface MuiSlotProps {
     readonly card?: Partial<CardProps>;
     readonly paper?: Partial<PaperProps>;
+    readonly accordion?: Partial<AccordionProps>;
     readonly stack?: Partial<StackProps>;
+    readonly textField?: MuiComponentSlotProps<TextFieldProps>;
+    readonly select?: MuiComponentSlotProps<SelectProps>;
+    readonly selectMenu?: Partial<MenuProps>;
+    readonly checkbox?: MuiComponentSlotProps<CheckboxProps>;
+    readonly button?: MuiComponentSlotProps<ButtonProps>;
+    readonly iconButton?: MuiComponentSlotProps<IconButtonProps>;
+}
+interface MuiBuilderSlotProps {
+    readonly card?: Partial<CardProps>;
+    readonly paper?: Partial<PaperProps>;
     readonly accordion?: Partial<AccordionProps>;
+    readonly stack?: Partial<StackProps>;
+    readonly textField?: MuiComponentSlotProps<TextFieldProps>;
+    readonly select?: MuiComponentSlotProps<SelectProps>;
+    readonly selectMenu?: Partial<MenuProps>;
+    readonly checkbox?: MuiComponentSlotProps<CheckboxProps>;
+    readonly button?: MuiComponentSlotProps<ButtonProps>;
+    readonly iconButton?: MuiComponentSlotProps<IconButtonProps>;
 }
 interface MuiAdapterOptions {
     readonly size?: "small" | "medium";
@@ -123,6 +144,7 @@ declare function mergeMuiAdapterOptions(base?: MuiAdapterOptions, overrides?: Mu
 declare function useResolvedMuiAdapterOptions(overrides?: MuiAdapterOptions): ResolvedMuiAdapterOptions;
 
 declare function muiDefaultIconResolver(actionType: BuilderActionIconType): ReactNode;
+declare function muiDefaultFieldTypeIcon(type: QuestionType): ReactNode;
 
 interface MuiFormBuilderProps extends Omit<FormBuilderProps, "components" | "disableDefaultStyles" | "slots" | "unstyled"> {
     readonly muiOptions?: MuiAdapterOptions;
@@ -149,4 +171,4 @@ declare const MuiToolbarSlot: NonNullable<FormBuilderSlots["toolbar"]>;
 declare const muiBuilderSlots: FormBuilderSlots;
 declare function createMuiBuilderSlots(options?: MuiAdapterOptions, customOverrides?: Partial<FormBuilderSlots>): FormBuilderSlots;
 
-export { type BuilderSectionName, DEFAULT_MUI_SECTION_ORDER, type LocaleOptionItem, type LocalizationSectionPlacement, MUI_LOCALIZATION_SECTION_ORDERS, type MuiAdapterOptions, type MuiBuilderOverrides, type MuiBuilderSlotProps, MuiButtonAdapter, type MuiButtonVariant, MuiCheckboxAdapter, MuiErrorMessageAdapter, type MuiFieldEditorOptions, MuiFieldEditorSlot, MuiFieldsetAdapter, MuiFormBuilder, MuiFormBuilderContext, type MuiFormBuilderContextValue, type MuiFormBuilderProps, MuiIconButtonAdapter, type MuiLayoutOptions, type MuiLocalizationOptions, MuiLocalizationSlot, MuiOptionEditorSlot, MuiSectionAdapter, MuiSelectAdapter, MuiTextAreaAdapter, MuiTextInputAdapter, MuiToolbarSlot, type ResolvedMuiAdapterOptions, createMuiBuilderComponents, createMuiBuilderProps, createMuiBuilderSlots, createMuiButtonAdapter, createMuiCheckboxAdapter, createMuiErrorMessageAdapter, createMuiFieldEditorSlot, createMuiFieldsetAdapter, createMuiIconButtonAdapter, createMuiLocalizationSlot, createMuiOptionEditorSlot, createMuiSectionAdapter, createMuiSelectAdapter, createMuiTextAreaAdapter, createMuiTextInputAdapter, createMuiToolbarSlot, mergeMuiAdapterOptions, muiBuilderComponents, muiBuilderSlots, muiDefaultIconResolver, resolveMuiAdapterOptions, useResolvedMuiAdapterOptions };
+export { type BuilderSectionName, DEFAULT_MUI_SECTION_ORDER, type LocaleOptionItem, type LocalizationSectionPlacement, MUI_LOCALIZATION_SECTION_ORDERS, type MuiAdapterOptions, type MuiBuilderOverrides, type MuiBuilderSlotProps, MuiButtonAdapter, type MuiButtonVariant, MuiCheckboxAdapter, MuiErrorMessageAdapter, type MuiFieldEditorOptions, MuiFieldEditorSlot, MuiFieldsetAdapter, MuiFormBuilder, MuiFormBuilderContext, type MuiFormBuilderContextValue, type MuiFormBuilderProps, MuiIconButtonAdapter, type MuiLayoutOptions, type MuiLocalizationOptions, MuiLocalizationSlot, MuiOptionEditorSlot, MuiSectionAdapter, MuiSelectAdapter, type MuiSlotProps, MuiTextAreaAdapter, MuiTextInputAdapter, MuiToolbarSlot, type ResolvedMuiAdapterOptions, createMuiBuilderComponents, createMuiBuilderProps, createMuiBuilderSlots, createMuiButtonAdapter, createMuiCheckboxAdapter, createMuiErrorMessageAdapter, createMuiFieldEditorSlot, createMuiFieldsetAdapter, createMuiIconButtonAdapter, createMuiLocalizationSlot, createMuiOptionEditorSlot, createMuiSectionAdapter, createMuiSelectAdapter, createMuiTextAreaAdapter, createMuiTextInputAdapter, createMuiToolbarSlot, mergeMuiAdapterOptions, muiBuilderComponents, muiBuilderSlots, muiDefaultFieldTypeIcon, muiDefaultIconResolver, resolveMuiAdapterOptions, useResolvedMuiAdapterOptions };

package/dist/index.d.ts

@@ -1,10 +1,13 @@
-import { BuilderActionIconType, LocalizationSummaryContext, BuilderButtonProps, BuilderCheckboxProps, BuilderErrorMessageProps, BuilderFieldsetProps, BuilderIconButtonProps, BuilderSectionProps, BuilderSelectProps, BuilderTextAreaProps, BuilderTextInputProps, FormBuilderComponents, FormBuilderSlots, FormBuilderProps, BuilderFieldEditorSlotProps, BuilderLocalizationSlotProps, BuilderOptionEditorSlotProps, BuilderToolbarSlotProps } from '@form-engine-ts/react';
+import { BuilderActionIconType, LocalizationSummaryContext, BuilderButtonProps, BuilderCheckboxProps, BuilderErrorMessageProps, BuilderFieldsetProps, BuilderIconButtonProps, BuilderSectionProps, BuilderSelectProps, BuilderTextAreaProps, BuilderTextInputProps, FormBuilderComponents, FormBuilderSlots, FormBuilderProps, QuestionType, BuilderFieldEditorSlotProps, BuilderLocalizationSlotProps, BuilderOptionEditorSlotProps, BuilderToolbarSlotProps } from '@form-engine-ts/react';
 import * as react from 'react';
 import { ReactNode, ComponentType } from 'react';
-import { CardProps, PaperProps, StackProps, AccordionProps } from '@mui/material';
+import { CardProps, PaperProps, AccordionProps, StackProps, TextFieldProps, SelectProps, MenuProps, CheckboxProps, ButtonProps, IconButtonProps } from '@mui/material';
 
 type BuilderSectionName = "basicSettings" | "completionMessage" | "questions" | "addQuestion" | "localization";
 type MuiButtonVariant = "contained" | "outlined" | "text";
+type MuiComponentSlotProps<T> = Partial<T> & {
+    readonly [key: `data-${string}`]: string | number | boolean | undefined;
+};
 interface LocaleOptionItem {
     readonly value: string;
     readonly label: string;
@@ -28,11 +31,29 @@ interface MuiLocalizationOptions {
 interface MuiFieldEditorOptions {
     readonly description?: "editable" | "readOnly" | "hidden";
 }
-interface MuiBuilderSlotProps {
+interface MuiSlotProps {
     readonly card?: Partial<CardProps>;
     readonly paper?: Partial<PaperProps>;
+    readonly accordion?: Partial<AccordionProps>;
     readonly stack?: Partial<StackProps>;
+    readonly textField?: MuiComponentSlotProps<TextFieldProps>;
+    readonly select?: MuiComponentSlotProps<SelectProps>;
+    readonly selectMenu?: Partial<MenuProps>;
+    readonly checkbox?: MuiComponentSlotProps<CheckboxProps>;
+    readonly button?: MuiComponentSlotProps<ButtonProps>;
+    readonly iconButton?: MuiComponentSlotProps<IconButtonProps>;
+}
+interface MuiBuilderSlotProps {
+    readonly card?: Partial<CardProps>;
+    readonly paper?: Partial<PaperProps>;
     readonly accordion?: Partial<AccordionProps>;
+    readonly stack?: Partial<StackProps>;
+    readonly textField?: MuiComponentSlotProps<TextFieldProps>;
+    readonly select?: MuiComponentSlotProps<SelectProps>;
+    readonly selectMenu?: Partial<MenuProps>;
+    readonly checkbox?: MuiComponentSlotProps<CheckboxProps>;
+    readonly button?: MuiComponentSlotProps<ButtonProps>;
+    readonly iconButton?: MuiComponentSlotProps<IconButtonProps>;
 }
 interface MuiAdapterOptions {
     readonly size?: "small" | "medium";
@@ -123,6 +144,7 @@ declare function mergeMuiAdapterOptions(base?: MuiAdapterOptions, overrides?: Mu
 declare function useResolvedMuiAdapterOptions(overrides?: MuiAdapterOptions): ResolvedMuiAdapterOptions;
 
 declare function muiDefaultIconResolver(actionType: BuilderActionIconType): ReactNode;
+declare function muiDefaultFieldTypeIcon(type: QuestionType): ReactNode;
 
 interface MuiFormBuilderProps extends Omit<FormBuilderProps, "components" | "disableDefaultStyles" | "slots" | "unstyled"> {
     readonly muiOptions?: MuiAdapterOptions;
@@ -149,4 +171,4 @@ declare const MuiToolbarSlot: NonNullable<FormBuilderSlots["toolbar"]>;
 declare const muiBuilderSlots: FormBuilderSlots;
 declare function createMuiBuilderSlots(options?: MuiAdapterOptions, customOverrides?: Partial<FormBuilderSlots>): FormBuilderSlots;
 
-export { type BuilderSectionName, DEFAULT_MUI_SECTION_ORDER, type LocaleOptionItem, type LocalizationSectionPlacement, MUI_LOCALIZATION_SECTION_ORDERS, type MuiAdapterOptions, type MuiBuilderOverrides, type MuiBuilderSlotProps, MuiButtonAdapter, type MuiButtonVariant, MuiCheckboxAdapter, MuiErrorMessageAdapter, type MuiFieldEditorOptions, MuiFieldEditorSlot, MuiFieldsetAdapter, MuiFormBuilder, MuiFormBuilderContext, type MuiFormBuilderContextValue, type MuiFormBuilderProps, MuiIconButtonAdapter, type MuiLayoutOptions, type MuiLocalizationOptions, MuiLocalizationSlot, MuiOptionEditorSlot, MuiSectionAdapter, MuiSelectAdapter, MuiTextAreaAdapter, MuiTextInputAdapter, MuiToolbarSlot, type ResolvedMuiAdapterOptions, createMuiBuilderComponents, createMuiBuilderProps, createMuiBuilderSlots, createMuiButtonAdapter, createMuiCheckboxAdapter, createMuiErrorMessageAdapter, createMuiFieldEditorSlot, createMuiFieldsetAdapter, createMuiIconButtonAdapter, createMuiLocalizationSlot, createMuiOptionEditorSlot, createMuiSectionAdapter, createMuiSelectAdapter, createMuiTextAreaAdapter, createMuiTextInputAdapter, createMuiToolbarSlot, mergeMuiAdapterOptions, muiBuilderComponents, muiBuilderSlots, muiDefaultIconResolver, resolveMuiAdapterOptions, useResolvedMuiAdapterOptions };
+export { type BuilderSectionName, DEFAULT_MUI_SECTION_ORDER, type LocaleOptionItem, type LocalizationSectionPlacement, MUI_LOCALIZATION_SECTION_ORDERS, type MuiAdapterOptions, type MuiBuilderOverrides, type MuiBuilderSlotProps, MuiButtonAdapter, type MuiButtonVariant, MuiCheckboxAdapter, MuiErrorMessageAdapter, type MuiFieldEditorOptions, MuiFieldEditorSlot, MuiFieldsetAdapter, MuiFormBuilder, MuiFormBuilderContext, type MuiFormBuilderContextValue, type MuiFormBuilderProps, MuiIconButtonAdapter, type MuiLayoutOptions, type MuiLocalizationOptions, MuiLocalizationSlot, MuiOptionEditorSlot, MuiSectionAdapter, MuiSelectAdapter, type MuiSlotProps, MuiTextAreaAdapter, MuiTextInputAdapter, MuiToolbarSlot, type ResolvedMuiAdapterOptions, createMuiBuilderComponents, createMuiBuilderProps, createMuiBuilderSlots, createMuiButtonAdapter, createMuiCheckboxAdapter, createMuiErrorMessageAdapter, createMuiFieldEditorSlot, createMuiFieldsetAdapter, createMuiIconButtonAdapter, createMuiLocalizationSlot, createMuiOptionEditorSlot, createMuiSectionAdapter, createMuiSelectAdapter, createMuiTextAreaAdapter, createMuiTextInputAdapter, createMuiToolbarSlot, mergeMuiAdapterOptions, muiBuilderComponents, muiBuilderSlots, muiDefaultFieldTypeIcon, muiDefaultIconResolver, resolveMuiAdapterOptions, useResolvedMuiAdapterOptions };

package/dist/index.js

@@ -95,9 +95,11 @@ function createMuiButtonAdapter(options) {
     targetId
   }) {
     const resolved = useResolvedMuiAdapterOptions(options);
+    const buttonSlotProps = resolved.muiSlotProps?.button;
     return /* @__PURE__ */ jsx(
       Button,
       {
+        ...buttonSlotProps,
         id,
         className,
         type: "button",
@@ -111,7 +113,7 @@ function createMuiButtonAdapter(options) {
         "data-target-id": targetId,
         onClick,
         color: variant === "danger" ? "error" : "primary",
-        variant: resolved.buttonVariants?.[variant ?? "primary"] ?? resolved.buttonVariant,
+        variant: buttonSlotProps?.variant ?? resolved.buttonVariants?.[variant ?? "primary"] ?? resolved.buttonVariant,
         fullWidth: resolved.buttonFullWidth ?? false,
         sx: { whiteSpace: noWrap === false ? "normal" : "nowrap" },
         children
@@ -142,6 +144,8 @@ function createMuiCheckboxAdapter(options) {
     label
   }) {
     const resolved = useResolvedMuiAdapterOptions(options);
+    const checkboxSlotProps = resolved.muiSlotProps?.checkbox;
+    const checkboxInputProps = checkboxSlotProps?.inputProps;
     const helperId = id === void 0 ? void 0 : ariaDescribedBy?.split(/\s+/u)[0] ?? `${id}-helper-text`;
     const describedBy = ariaDescribedBy ?? (helperText === void 0 || helperText.length === 0 ? void 0 : helperId);
     return /* @__PURE__ */ jsxs(FormControl, { className, error: Boolean(error), required, disabled: disabled || readOnly, children: [
@@ -152,16 +156,18 @@ function createMuiCheckboxAdapter(options) {
           control: /* @__PURE__ */ jsx2(
             Checkbox,
             {
+              ...checkboxSlotProps,
               id,
               name,
-              size: resolved.size,
+              size: checkboxSlotProps?.size ?? resolved.size,
               checked,
               required,
               disabled: disabled || readOnly,
               inputProps: {
-                "aria-label": ariaLabel,
-                "aria-describedby": describedBy,
-                "aria-labelledby": ariaLabelledBy
+                ...checkboxInputProps,
+                ...ariaLabel === void 0 ? {} : { "aria-label": ariaLabel },
+                ...describedBy === void 0 ? {} : { "aria-describedby": describedBy },
+                ...ariaLabelledBy === void 0 ? {} : { "aria-labelledby": ariaLabelledBy }
               },
               onChange: (event) => onChange(event.target.checked)
             }
@@ -266,16 +272,18 @@ function createMuiIconButtonAdapter(options) {
     title
   }) {
     const resolved = useResolvedMuiAdapterOptions(options);
+    const iconButtonSlotProps = resolved.muiSlotProps?.iconButton;
     const actionLabel = actionType === void 0 ? "Action" : resolved.getActionLabel?.(actionType) ?? FALLBACK_ACTION_LABELS[actionType];
     const tooltip = title ?? actionLabel;
     const color = actionType === "delete" ? "error" : actionType === "add" ? "primary" : "default";
     return /* @__PURE__ */ jsx5(Tooltip, { title: tooltip, children: /* @__PURE__ */ jsx5("span", { children: /* @__PURE__ */ jsx5(
       IconButton,
       {
+        ...iconButtonSlotProps,
         id,
         className,
         type: "button",
-        size: resolved.size,
+        size: iconButtonSlotProps?.size ?? resolved.size,
         color,
         disabled: disabled || readOnly,
         "aria-label": ariaLabel ?? tooltip,
@@ -339,8 +347,20 @@ function createMuiSectionAdapter(options) {
 var MuiSectionAdapter = createMuiSectionAdapter();
 
 // src/adapters/Select.tsx
-import { FormControl as FormControl2, FormHelperText as FormHelperText2, InputLabel, MenuItem, Select } from "@mui/material";
-import { jsx as jsx7, jsxs as jsxs4 } from "react/jsx-runtime";
+import {
+  Box as Box2,
+  FormControl as FormControl2,
+  FormHelperText as FormHelperText2,
+  InputLabel,
+  ListItemIcon,
+  ListItemText,
+  MenuItem,
+  Select
+} from "@mui/material";
+import { Fragment, jsx as jsx7, jsxs as jsxs4 } from "react/jsx-runtime";
+function normalizeOptions(options) {
+  return options.map((option) => typeof option === "string" ? { value: option, label: option } : option);
+}
 function createMuiSelectAdapter(options) {
   return function MuiSelect({
     id,
@@ -358,13 +378,19 @@ function createMuiSelectAdapter(options) {
     value,
     onChange,
     onKeyDown,
-    options: selectOptions
+    options: selectOptions,
+    renderOption,
+    renderValue
   }) {
     const resolved = useResolvedMuiAdapterOptions(options);
+    const normalizedOptions = normalizeOptions(selectOptions);
+    const selectSlotProps = resolved.muiSlotProps?.select;
+    const menuProps = { ...selectSlotProps?.MenuProps, ...resolved.muiSlotProps?.selectMenu };
+    const slotInputProps = selectSlotProps?.inputProps;
     const labelId = id === void 0 || label === void 0 ? void 0 : `${id}-label`;
     const helperId = id === void 0 ? void 0 : ariaDescribedBy?.split(/\s+/u)[0] ?? `${id}-helper-text`;
     const describedBy = ariaDescribedBy ?? (helperText === void 0 || helperText.length === 0 ? void 0 : helperId);
-    const handleChange = (event) => onChange(event.target.value);
+    const handleChange = (event) => onChange(String(event.target.value));
     return /* @__PURE__ */ jsxs4(
       FormControl2,
       {
@@ -380,6 +406,7 @@ function createMuiSelectAdapter(options) {
           /* @__PURE__ */ jsx7(
             Select,
             {
+              ...selectSlotProps,
               id,
               labelId,
               name,
@@ -390,12 +417,28 @@ function createMuiSelectAdapter(options) {
               onKeyDown,
               required,
               readOnly,
+              variant: selectSlotProps?.variant ?? resolved.variant,
+              ...Object.keys(menuProps).length === 0 ? {} : { MenuProps: menuProps },
+              renderValue: (selected) => {
+                const selectedValue = typeof selected === "string" ? selected : String(selected ?? "");
+                const option = normalizedOptions.find((candidate) => candidate.value === selectedValue);
+                if (renderValue !== void 0) return renderValue(option);
+                if (option === void 0) return selectedValue;
+                return /* @__PURE__ */ jsxs4(Box2, { display: "flex", alignItems: "center", gap: 0.75, children: [
+                  option.icon,
+                  /* @__PURE__ */ jsx7("span", { children: option.label })
+                ] });
+              },
               inputProps: {
-                "aria-label": ariaLabel,
-                "aria-describedby": describedBy,
-                "aria-labelledby": ariaLabelledBy
+                ...slotInputProps,
+                ...ariaLabel === void 0 ? {} : { "aria-label": ariaLabel },
+                ...describedBy === void 0 ? {} : { "aria-describedby": describedBy },
+                ...ariaLabelledBy === void 0 ? {} : { "aria-labelledby": ariaLabelledBy }
               },
-              children: selectOptions.map((option) => /* @__PURE__ */ jsx7(MenuItem, { value: option.value, disabled: option.disabled, children: option.label }, option.value))
+              children: normalizedOptions.map((option) => /* @__PURE__ */ jsx7(MenuItem, { value: option.value, disabled: option.disabled, children: renderOption === void 0 ? /* @__PURE__ */ jsxs4(Fragment, { children: [
+                option.icon === void 0 ? null : /* @__PURE__ */ jsx7(ListItemIcon, { sx: { minWidth: 32 }, children: option.icon }),
+                /* @__PURE__ */ jsx7(ListItemText, { primary: option.label, secondary: option.description })
+              ] }) : renderOption(option) }, option.value))
             }
           ),
           helperText === void 0 || helperText.length === 0 ? null : /* @__PURE__ */ jsx7(FormHelperText2, { id: helperId, children: helperText })
@@ -430,9 +473,11 @@ function createMuiTextAreaAdapter(options) {
     rows
   }) {
     const resolved = useResolvedMuiAdapterOptions(options);
+    const textFieldSlotProps = resolved.muiSlotProps?.textField;
     return /* @__PURE__ */ jsx8(
       TextField,
       {
+        ...textFieldSlotProps,
         id,
         className,
         name,
@@ -458,7 +503,7 @@ function createMuiTextAreaAdapter(options) {
         placeholder,
         fullWidth: resolved.inputFullWidth ?? resolved.fullWidth,
         size: resolved.size,
-        variant: resolved.variant,
+        variant: textFieldSlotProps?.variant ?? resolved.variant,
         onChange: (event) => onChange(event.currentTarget.value)
       }
     );
@@ -495,9 +540,11 @@ function createMuiTextInputAdapter(options) {
     step
   }) {
     const resolved = useResolvedMuiAdapterOptions(options);
+    const textFieldSlotProps = resolved.muiSlotProps?.textField;
     return /* @__PURE__ */ jsx9(
       TextField2,
       {
+        ...textFieldSlotProps,
         id,
         className,
         name,
@@ -526,7 +573,7 @@ function createMuiTextInputAdapter(options) {
         placeholder,
         fullWidth: resolved.inputFullWidth ?? resolved.fullWidth,
         size: resolved.size,
-        variant: resolved.variant,
+        variant: textFieldSlotProps?.variant ?? resolved.variant,
         onChange: (event) => onChange(event.currentTarget.value),
         onKeyDown
       }
@@ -539,12 +586,19 @@ var MuiTextInputAdapter = createMuiTextInputAdapter();
 import {
   Add,
   ArrowDownward,
+  ArrowDropDown,
   ArrowUpward,
+  CheckBox,
   Close,
   Delete,
   DragHandle,
   Edit,
+  Numbers,
+  RadioButtonChecked,
   Settings,
+  Star,
+  Subject,
+  TextFields,
   Translate
 } from "@mui/icons-material";
 import { jsx as jsx10 } from "react/jsx-runtime";
@@ -570,6 +624,26 @@ function muiDefaultIconResolver(actionType) {
       return /* @__PURE__ */ jsx10(DragHandle, { fontSize: "small" });
   }
 }
+function muiDefaultFieldTypeIcon(type) {
+  switch (type) {
+    case "text":
+      return /* @__PURE__ */ jsx10(TextFields, { fontSize: "small" });
+    case "textarea":
+      return /* @__PURE__ */ jsx10(Subject, { fontSize: "small" });
+    case "number":
+      return /* @__PURE__ */ jsx10(Numbers, { fontSize: "small" });
+    case "rating":
+      return /* @__PURE__ */ jsx10(Star, { fontSize: "small" });
+    case "select":
+      return /* @__PURE__ */ jsx10(ArrowDropDown, { fontSize: "small" });
+    case "multi-select":
+      return /* @__PURE__ */ jsx10(CheckBox, { fontSize: "small" });
+    case "checkbox":
+      return /* @__PURE__ */ jsx10(CheckBox, { fontSize: "small" });
+    case "radio":
+      return /* @__PURE__ */ jsx10(RadioButtonChecked, { fontSize: "small" });
+  }
+}
 
 // src/components.ts
 function isAdapterOptions(value) {
@@ -586,7 +660,8 @@ function buildMuiBuilderComponents(options) {
     Section: createMuiSectionAdapter(options),
     Fieldset: createMuiFieldsetAdapter(options),
     ErrorMessage: createMuiErrorMessageAdapter(options),
-    renderIcon: muiDefaultIconResolver
+    renderIcon: muiDefaultIconResolver,
+    renderFieldTypeIcon: muiDefaultFieldTypeIcon
   };
 }
 var muiBuilderComponents = {
@@ -599,7 +674,8 @@ var muiBuilderComponents = {
   Section: MuiSectionAdapter,
   Fieldset: MuiFieldsetAdapter,
   ErrorMessage: MuiErrorMessageAdapter,
-  renderIcon: muiDefaultIconResolver
+  renderIcon: muiDefaultIconResolver,
+  renderFieldTypeIcon: muiDefaultFieldTypeIcon
 };
 function createMuiBuilderComponents(optionsOrOverrides = {}, customOverrides) {
   const options = isAdapterOptions(optionsOrOverrides) ? optionsOrOverrides : void 0;
@@ -608,6 +684,7 @@ function createMuiBuilderComponents(optionsOrOverrides = {}, customOverrides) {
 }
 
 // src/slots/FieldEditor.tsx
+import { DEFAULT_FIELD_TYPE_DEFINITIONS } from "@form-engine-ts/core";
 import { Card, Stack as Stack3, Typography as Typography3 } from "@mui/material";
 
 // src/slots/OptionEditor.tsx
@@ -753,17 +830,8 @@ function createMuiToolbarSlot(options) {
 var MuiToolbarSlot = createMuiToolbarSlot();
 
 // src/slots/FieldEditor.tsx
-import { Fragment, jsx as jsx13, jsxs as jsxs7 } from "react/jsx-runtime";
-var FIELD_TYPES = [
-  "text",
-  "textarea",
-  "number",
-  "rating",
-  "select",
-  "multi-select",
-  "checkbox",
-  "radio"
-];
+import { Fragment as Fragment2, jsx as jsx13, jsxs as jsxs7 } from "react/jsx-runtime";
+var FIELD_TYPES = DEFAULT_FIELD_TYPE_DEFINITIONS.map((definition) => definition.type);
 function isFieldType(value) {
   return FIELD_TYPES.some((type) => type === value);
 }
@@ -802,7 +870,8 @@ function createMuiFieldEditorSlot(options) {
     readOnly,
     actions,
     components,
-    translate
+    translate,
+    slots
   }) {
     const resolved = useResolvedMuiAdapterOptions(options);
     const { Button: Button2, Checkbox: Checkbox2, Select: Select2, TextArea, TextInput } = components;
@@ -813,6 +882,11 @@ function createMuiFieldEditorSlot(options) {
     const conditionSource = conditionSources.find((source) => source.id === condition?.questionId);
     const descriptionMode = resolved.fieldEditorOptions?.description ?? "editable";
     const titleErrorId = field.title.trim().length === 0 ? `mui-field-${field.id}-title-error` : void 0;
+    const FieldTypeSelect = slots?.fieldTypeSelect;
+    const FieldEditorHeader = slots?.fieldEditorHeader;
+    const changeFieldType = (nextType) => {
+      if (allowedTypes.includes(nextType)) actions.changeFieldType(field.id, nextType);
+    };
     return /* @__PURE__ */ jsxs7(
       Card,
       {
@@ -821,26 +895,28 @@ function createMuiFieldEditorSlot(options) {
         variant: "outlined",
         sx: resolved.muiSlotProps?.card?.sx ?? { mb: resolved.dense ? 1 : 2, p: resolved.dense ? 1.5 : 2 },
         children: [
-          /* @__PURE__ */ jsx13(
-            Toolbar,
-            {
-              schema,
-              translate,
-              kind: "field",
-              targetId: field.id,
-              index,
-              total: schema.fields.length,
-              title: field.title,
-              onMoveUp: () => actions.moveField(field.id, index - 1),
-              onMoveDown: () => actions.moveField(field.id, index + 1),
-              onRemove: () => actions.removeField(field.id),
-              readOnly,
-              actions,
-              components
-            }
-          ),
+          FieldEditorHeader === void 0 ? /* @__PURE__ */ jsxs7(Fragment2, { children: [
+            /* @__PURE__ */ jsx13(
+              Toolbar,
+              {
+                schema,
+                translate,
+                kind: "field",
+                targetId: field.id,
+                index,
+                total: schema.fields.length,
+                title: field.title,
+                onMoveUp: () => actions.moveField(field.id, index - 1),
+                onMoveDown: () => actions.moveField(field.id, index + 1),
+                onRemove: () => actions.removeField(field.id),
+                readOnly,
+                actions,
+                components
+              }
+            ),
+            /* @__PURE__ */ jsx13(Typography3, { variant: "subtitle1", fontWeight: "bold", children: field.title })
+          ] }) : /* @__PURE__ */ jsx13(FieldEditorHeader, { field, index, totalFields: schema.fields.length, actions }),
           /* @__PURE__ */ jsxs7(Stack3, { ...resolved.muiSlotProps?.stack, spacing: resolved.dense ? 1 : 2, children: [
-            /* @__PURE__ */ jsx13(Typography3, { variant: "subtitle1", fontWeight: "bold", children: field.title }),
             /* @__PURE__ */ jsxs7(Stack3, { direction: { xs: "column", md: "row" }, spacing: resolved.dense ? 1 : 2, children: [
               /* @__PURE__ */ jsx13(
                 TextInput,
@@ -857,22 +933,37 @@ function createMuiFieldEditorSlot(options) {
                   onChange: (value) => actions.setSourceText({ kind: "field", id: field.id }, "title", value)
                 }
               ),
-              /* @__PURE__ */ jsx13(
+              FieldTypeSelect === void 0 ? /* @__PURE__ */ jsx13(
                 Select2,
                 {
                   id: `mui-field-${field.id}-type`,
                   name: `fields.${field.id}.type`,
                   label: translate("builder.type"),
                   value: allowedTypes.includes(field.type) ? field.type : "",
-                  options: FIELD_TYPES.filter((type) => allowedTypes.includes(type)).map((type) => ({
-                    value: type,
-                    label: translate(`builder.fieldType.${type}`)
-                  })),
+                  options: FIELD_TYPES.filter((type) => allowedTypes.includes(type)).map((type) => {
+                    const definition = DEFAULT_FIELD_TYPE_DEFINITIONS.find((candidate) => candidate.type === type);
+                    return {
+                      value: type,
+                      label: translate(definition?.labelKey ?? `builder.fieldType.${type}`),
+                      icon: components.renderFieldTypeIcon(type),
+                      ...definition?.category === void 0 ? {} : { kind: definition.category }
+                    };
+                  }),
                   disabled: readOnly,
                   onChange: (value) => {
-                    if (isFieldType(value)) actions.changeFieldType(field.id, value);
+                    if (isFieldType(value)) changeFieldType(value);
                   }
                 }
+              ) : /* @__PURE__ */ jsx13(
+                FieldTypeSelect,
+                {
+                  currentType: field.type,
+                  allowedTypes,
+                  onChangeType: changeFieldType,
+                  disabled: readOnly,
+                  readOnly,
+                  renderIcon: components.renderFieldTypeIcon
+                }
               )
             ] }),
             descriptionMode === "hidden" ? null : /* @__PURE__ */ jsx13(
@@ -955,7 +1046,7 @@ function createMuiFieldEditorSlot(options) {
                   )
                 }
               ),
-              condition === void 0 ? null : /* @__PURE__ */ jsxs7(Fragment, { children: [
+              condition === void 0 ? null : /* @__PURE__ */ jsxs7(Fragment2, { children: [
                 /* @__PURE__ */ jsx13(
                   Select2,
                   {
@@ -1056,7 +1147,7 @@ import {
   AccordionDetails,
   AccordionSummary,
   Alert as Alert2,
-  Box as Box2,
+  Box as Box3,
   Chip,
   Stack as Stack4,
   Tab,
@@ -1187,7 +1278,7 @@ function createMuiLocalizationSlot(options) {
           spacing: resolved.dense ? 1 : 2,
           sx: { mt: 1 },
           children: [
-            defaultLocaleControl === "hidden" ? null : /* @__PURE__ */ jsx14(Box2, { sx: { flexGrow: 1, minWidth: 0, width: { xs: "100%", sm: "auto" } }, children: defaultLocaleControl === "readOnly" ? /* @__PURE__ */ jsxs8(Stack4, { spacing: 0.5, children: [
+            defaultLocaleControl === "hidden" ? null : /* @__PURE__ */ jsx14(Box3, { sx: { flexGrow: 1, minWidth: 0, width: { xs: "100%", sm: "auto" } }, children: defaultLocaleControl === "readOnly" ? /* @__PURE__ */ jsxs8(Stack4, { spacing: 0.5, children: [
               /* @__PURE__ */ jsx14(Typography4, { variant: "caption", color: "text.secondary", children: translate("builder.defaultLocale") }),
               /* @__PURE__ */ jsx14(
                 Chip,
@@ -1209,7 +1300,7 @@ function createMuiLocalizationSlot(options) {
                 }
               }
             ) }),
-            /* @__PURE__ */ jsx14(Box2, { sx: { flexGrow: 1, minWidth: 0, width: { xs: "100%", sm: "auto" } }, onKeyDownCapture: handleAddKeyDown, children: hasLocaleSelector ? /* @__PURE__ */ jsx14(
+            /* @__PURE__ */ jsx14(Box3, { sx: { flexGrow: 1, minWidth: 0, width: { xs: "100%", sm: "auto" } }, onKeyDownCapture: handleAddKeyDown, children: hasLocaleSelector ? /* @__PURE__ */ jsx14(
               Select2,
               {
                 id: "mui-builder-new-locale",
@@ -1231,7 +1322,7 @@ function createMuiLocalizationSlot(options) {
               }
             ) }),
             /* @__PURE__ */ jsx14(
-              Box2,
+              Box3,
               {
                 sx: {
                   flexShrink: 0,
@@ -1276,7 +1367,7 @@ function createMuiLocalizationSlot(options) {
           ))
         }
       ),
-      !translationAdapterAvailable ? null : /* @__PURE__ */ jsx14(Box2, { sx: { minWidth: "max-content", whiteSpace: "nowrap" }, children: /* @__PURE__ */ jsx14(
+      !translationAdapterAvailable ? null : /* @__PURE__ */ jsx14(Box3, { sx: { minWidth: "max-content", whiteSpace: "nowrap" }, children: /* @__PURE__ */ jsx14(
         Button2,
         {
           variant: "secondary",
@@ -1329,7 +1420,7 @@ function createMuiLocalizationSlot(options) {
       ] });
     }
     return /* @__PURE__ */ jsx14(
-      Box2,
+      Box3,
       {
         "data-mui-slot": "localization",
         sx: {
@@ -1451,6 +1542,7 @@ export {
   mergeMuiAdapterOptions,
   muiBuilderComponents,
   muiBuilderSlots,
+  muiDefaultFieldTypeIcon,
   muiDefaultIconResolver,
   resolveMuiAdapterOptions,
   useResolvedMuiAdapterOptions

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@form-engine-ts/mui",
-  "version": "3.0.0",
+  "version": "3.2.0",
   "publishConfig": {
     "access": "public"
   },
@@ -46,8 +46,8 @@
     "@mui/material": "^6.0.0 || ^7.0.0",
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0",
-    "@form-engine-ts/core": "3.0.0",
-    "@form-engine-ts/react": "3.0.0"
+    "@form-engine-ts/core": "3.2.0",
+    "@form-engine-ts/react": "3.2.0"
   },
   "devDependencies": {
     "@emotion/react": "^11.14.0",
@@ -58,8 +58,8 @@
     "@types/react-dom": "^19.2.4",
     "react": "^19.2.8",
     "react-dom": "^19.2.8",
-    "@form-engine-ts/core": "3.0.0",
-    "@form-engine-ts/react": "3.0.0"
+    "@form-engine-ts/core": "3.2.0",
+    "@form-engine-ts/react": "3.2.0"
   },
   "scripts": {
     "build": "tsup src/index.ts --format esm,cjs --dts --clean --external @emotion/react --external @emotion/styled --external @form-engine-ts/core --external @form-engine-ts/react --external @mui/icons-material --external @mui/material --external react --external react-dom",