@form-engine-ts/mui 4.3.1 → 4.4.0

package/README.md

@@ -3,6 +3,21 @@
 Official Material UI v6/v7 integration layer for `@form-engine-ts/react`. `MuiFormBuilder` applies MUI controls and
 layout slots together, disables the React builder CSS classes, and propagates common size and variant settings.
 
+`MuiChoiceGroupSlot` is an exported renderer slot for grouped choice questions. It uses MUI `Paper`, `FormControl`,
+`FormLabel`, and `FormHelperText`, so error state and theme colors follow the active MUI theme:
+
+```tsx
+import { FormRenderer } from "@form-engine-ts/react";
+import { MuiChoiceGroupSlot } from "@form-engine-ts/mui";
+
+<FormRenderer
+  appearance={{ choiceField: { radio: "grouped" } }}
+  slots={{ renderChoiceGroup: MuiChoiceGroupSlot }}
+  schema={schema}
+  onSubmit={save}
+/>
+```
+
 ```tsx
 import { MuiFormBuilder } from "@form-engine-ts/mui";
 

package/dist/index.cjs

@@ -24,6 +24,7 @@ __export(index_exports, {
   MUI_LOCALIZATION_SECTION_ORDERS: () => MUI_LOCALIZATION_SECTION_ORDERS,
   MuiButtonAdapter: () => MuiButtonAdapter,
   MuiCheckboxAdapter: () => MuiCheckboxAdapter,
+  MuiChoiceGroupSlot: () => MuiChoiceGroupSlot,
   MuiErrorMessageAdapter: () => MuiErrorMessageAdapter,
   MuiFieldEditorSlot: () => MuiFieldEditorSlot,
   MuiFieldsetAdapter: () => MuiFieldsetAdapter,
@@ -1625,6 +1626,39 @@ function createMuiLocalizationSlot(options) {
 }
 var MuiLocalizationSlot = createMuiLocalizationSlot();
 
+// src/slots/MuiChoiceGroupSlot.tsx
+var import_material14 = require("@mui/material");
+var import_jsx_runtime15 = require("react/jsx-runtime");
+function MuiChoiceGroupSlot({
+  title,
+  description,
+  required,
+  error,
+  disabled,
+  children,
+  className
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+    import_material14.Paper,
+    {
+      className,
+      variant: "outlined",
+      sx: {
+        borderColor: error === void 0 ? "divider" : "error.main",
+        borderRadius: 2,
+        mb: 2,
+        p: 2
+      },
+      children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_material14.FormControl, { component: "fieldset", error: error !== void 0, fullWidth: true, required, disabled, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_material14.FormLabel, { component: "legend", sx: { fontWeight: "bold", mb: description === void 0 ? 1 : 0.5 }, children: title }),
+        description === void 0 ? null : /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_material14.FormHelperText, { sx: { mt: 0, mb: 1 }, children: description }),
+        children,
+        error === void 0 ? null : /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_material14.FormHelperText, { error: true, children: error.message })
+      ] })
+    }
+  );
+}
+
 // src/slots/index.ts
 var muiBuilderSlots = {
   sectionOrder: DEFAULT_MUI_SECTION_ORDER,
@@ -1656,7 +1690,7 @@ function createMuiBuilderProps(options, overrides = {}) {
 // src/MuiFormBuilder.tsx
 var import_react4 = require("@form-engine-ts/react");
 var import_react5 = require("react");
-var import_jsx_runtime15 = require("react/jsx-runtime");
+var import_jsx_runtime16 = require("react/jsx-runtime");
 function MuiFormBuilder({
   muiOptions,
   layoutOptions,
@@ -1680,7 +1714,7 @@ function MuiFormBuilder({
   const slots = (0, import_react5.useMemo)(() => ({ ...muiBuilderSlots, ...customSlots }), [customSlots]);
   const placement = contextOptions.localizationOptions?.placement;
   const resolvedSectionOrder = sectionOrder ?? (placement === void 0 ? contextOptions.layoutOptions?.sectionOrder : MUI_LOCALIZATION_SECTION_ORDERS[placement]);
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(MuiFormBuilderContext.Provider, { value: contextValue, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(MuiFormBuilderContext.Provider, { value: contextValue, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
     import_react4.FormBuilder,
     {
       ...props,
@@ -1697,6 +1731,7 @@ function MuiFormBuilder({
   MUI_LOCALIZATION_SECTION_ORDERS,
   MuiButtonAdapter,
   MuiCheckboxAdapter,
+  MuiChoiceGroupSlot,
   MuiErrorMessageAdapter,
   MuiFieldEditorSlot,
   MuiFieldsetAdapter,

package/dist/index.d.cts

@@ -1,4 +1,4 @@
-import { BuilderActionIconType, FieldPropertyControlMode, QuestionType, FieldEditorControlsConfig, FieldTypeSelectOptionsConfig, LocalizationSummaryContext, BuilderButtonProps, BuilderCheckboxProps, BuilderErrorMessageProps, BuilderFieldsetProps, BuilderIconButtonProps, BuilderSectionProps, BuilderSelectProps, BuilderTextAreaProps, BuilderTextInputProps, FormBuilderComponents, FormBuilderSlots, FormBuilderProps, BuilderFieldEditorSlotProps, BuilderLocalizationSlotProps, BuilderOptionEditorSlotProps, BuilderToolbarSlotProps } from '@form-engine-ts/react';
+import { BuilderActionIconType, FieldPropertyControlMode, QuestionType, FieldEditorControlsConfig, FieldTypeSelectOptionsConfig, LocalizationSummaryContext, BuilderButtonProps, BuilderCheckboxProps, BuilderErrorMessageProps, BuilderFieldsetProps, BuilderIconButtonProps, BuilderSectionProps, BuilderSelectProps, BuilderTextAreaProps, BuilderTextInputProps, FormBuilderComponents, FormBuilderSlots, FormBuilderProps, BuilderFieldEditorSlotProps, BuilderLocalizationSlotProps, ChoiceGroupSlotProps, BuilderOptionEditorSlotProps, BuilderToolbarSlotProps } from '@form-engine-ts/react';
 import * as react from 'react';
 import { ReactNode, ComponentType, ReactElement } from 'react';
 import { CardProps, PaperProps, AccordionProps, StackProps, TextFieldProps, SelectProps, MenuProps, CheckboxProps, ButtonProps, IconButtonProps } from '@mui/material';
@@ -177,6 +177,8 @@ declare const MuiFieldEditorSlot: NonNullable<FormBuilderSlots["fieldEditor"]>;
 declare function createMuiLocalizationSlot(options?: MuiAdapterOptions): ComponentType<BuilderLocalizationSlotProps>;
 declare const MuiLocalizationSlot: NonNullable<FormBuilderSlots["localization"]>;
 
+declare function MuiChoiceGroupSlot({ title, description, required, error, disabled, children, className }: ChoiceGroupSlotProps): react.JSX.Element;
+
 declare function createMuiOptionEditorSlot(options?: MuiAdapterOptions): ComponentType<BuilderOptionEditorSlotProps>;
 declare const MuiOptionEditorSlot: NonNullable<FormBuilderSlots["optionEditor"]>;
 
@@ -186,4 +188,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, 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 };
+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, MuiChoiceGroupSlot, 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,4 +1,4 @@
-import { BuilderActionIconType, FieldPropertyControlMode, QuestionType, FieldEditorControlsConfig, FieldTypeSelectOptionsConfig, LocalizationSummaryContext, BuilderButtonProps, BuilderCheckboxProps, BuilderErrorMessageProps, BuilderFieldsetProps, BuilderIconButtonProps, BuilderSectionProps, BuilderSelectProps, BuilderTextAreaProps, BuilderTextInputProps, FormBuilderComponents, FormBuilderSlots, FormBuilderProps, BuilderFieldEditorSlotProps, BuilderLocalizationSlotProps, BuilderOptionEditorSlotProps, BuilderToolbarSlotProps } from '@form-engine-ts/react';
+import { BuilderActionIconType, FieldPropertyControlMode, QuestionType, FieldEditorControlsConfig, FieldTypeSelectOptionsConfig, LocalizationSummaryContext, BuilderButtonProps, BuilderCheckboxProps, BuilderErrorMessageProps, BuilderFieldsetProps, BuilderIconButtonProps, BuilderSectionProps, BuilderSelectProps, BuilderTextAreaProps, BuilderTextInputProps, FormBuilderComponents, FormBuilderSlots, FormBuilderProps, BuilderFieldEditorSlotProps, BuilderLocalizationSlotProps, ChoiceGroupSlotProps, BuilderOptionEditorSlotProps, BuilderToolbarSlotProps } from '@form-engine-ts/react';
 import * as react from 'react';
 import { ReactNode, ComponentType, ReactElement } from 'react';
 import { CardProps, PaperProps, AccordionProps, StackProps, TextFieldProps, SelectProps, MenuProps, CheckboxProps, ButtonProps, IconButtonProps } from '@mui/material';
@@ -177,6 +177,8 @@ declare const MuiFieldEditorSlot: NonNullable<FormBuilderSlots["fieldEditor"]>;
 declare function createMuiLocalizationSlot(options?: MuiAdapterOptions): ComponentType<BuilderLocalizationSlotProps>;
 declare const MuiLocalizationSlot: NonNullable<FormBuilderSlots["localization"]>;
 
+declare function MuiChoiceGroupSlot({ title, description, required, error, disabled, children, className }: ChoiceGroupSlotProps): react.JSX.Element;
+
 declare function createMuiOptionEditorSlot(options?: MuiAdapterOptions): ComponentType<BuilderOptionEditorSlotProps>;
 declare const MuiOptionEditorSlot: NonNullable<FormBuilderSlots["optionEditor"]>;
 
@@ -186,4 +188,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, 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 };
+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, MuiChoiceGroupSlot, 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

@@ -1598,6 +1598,39 @@ function createMuiLocalizationSlot(options) {
 }
 var MuiLocalizationSlot = createMuiLocalizationSlot();
 
+// src/slots/MuiChoiceGroupSlot.tsx
+import { FormControl as FormControl3, FormHelperText as FormHelperText3, FormLabel, Paper as Paper2 } from "@mui/material";
+import { jsx as jsx15, jsxs as jsxs9 } from "react/jsx-runtime";
+function MuiChoiceGroupSlot({
+  title,
+  description,
+  required,
+  error,
+  disabled,
+  children,
+  className
+}) {
+  return /* @__PURE__ */ jsx15(
+    Paper2,
+    {
+      className,
+      variant: "outlined",
+      sx: {
+        borderColor: error === void 0 ? "divider" : "error.main",
+        borderRadius: 2,
+        mb: 2,
+        p: 2
+      },
+      children: /* @__PURE__ */ jsxs9(FormControl3, { component: "fieldset", error: error !== void 0, fullWidth: true, required, disabled, children: [
+        /* @__PURE__ */ jsx15(FormLabel, { component: "legend", sx: { fontWeight: "bold", mb: description === void 0 ? 1 : 0.5 }, children: title }),
+        description === void 0 ? null : /* @__PURE__ */ jsx15(FormHelperText3, { sx: { mt: 0, mb: 1 }, children: description }),
+        children,
+        error === void 0 ? null : /* @__PURE__ */ jsx15(FormHelperText3, { error: true, children: error.message })
+      ] })
+    }
+  );
+}
+
 // src/slots/index.ts
 var muiBuilderSlots = {
   sectionOrder: DEFAULT_MUI_SECTION_ORDER,
@@ -1631,7 +1664,7 @@ import {
   FormBuilder
 } from "@form-engine-ts/react";
 import { useMemo } from "react";
-import { jsx as jsx15 } from "react/jsx-runtime";
+import { jsx as jsx16 } from "react/jsx-runtime";
 function MuiFormBuilder({
   muiOptions,
   layoutOptions,
@@ -1655,7 +1688,7 @@ function MuiFormBuilder({
   const slots = useMemo(() => ({ ...muiBuilderSlots, ...customSlots }), [customSlots]);
   const placement = contextOptions.localizationOptions?.placement;
   const resolvedSectionOrder = sectionOrder ?? (placement === void 0 ? contextOptions.layoutOptions?.sectionOrder : MUI_LOCALIZATION_SECTION_ORDERS[placement]);
-  return /* @__PURE__ */ jsx15(MuiFormBuilderContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx15(
+  return /* @__PURE__ */ jsx16(MuiFormBuilderContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx16(
     FormBuilder,
     {
       ...props,
@@ -1671,6 +1704,7 @@ export {
   MUI_LOCALIZATION_SECTION_ORDERS,
   MuiButtonAdapter,
   MuiCheckboxAdapter,
+  MuiChoiceGroupSlot,
   MuiErrorMessageAdapter,
   MuiFieldEditorSlot,
   MuiFieldsetAdapter,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@form-engine-ts/mui",
-  "version": "4.3.1",
+  "version": "4.4.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/react": "4.3.1",
-    "@form-engine-ts/core": "4.3.1"
+    "@form-engine-ts/core": "4.4.0",
+    "@form-engine-ts/react": "4.4.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/react": "4.3.1",
-    "@form-engine-ts/core": "4.3.1"
+    "@form-engine-ts/core": "4.4.0",
+    "@form-engine-ts/react": "4.4.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",