@digiform/wizard 0.4.0 → 0.5.0

package/features/form-runtime/ComponentAdapterComplete/ComponentAdapterComplete.d.ts

@@ -14,5 +14,5 @@ export declare const adaptComponentForRegistry: (component: FormWizardComponentC
             error?: string;
         }>;
     };
-}) => React.ReactNode;
+}, invalid?: boolean, errorMessage?: string) => React.ReactNode;
 export default adaptComponentForRegistry;

package/features/form-runtime/components/renderers/InteractiveFieldRenderer/InteractiveFieldRenderer.d.ts

@@ -3,7 +3,6 @@ interface InteractiveFieldRendererProps {
     component: ComponentConfig;
     field: FormFieldApi;
     readOnly: boolean;
-    needsFormFieldWrapper: boolean;
     isSubmitAttempted: boolean;
     onChange: (value: ComponentValue) => void;
     onBlur: () => void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@digiform/wizard",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "description": "React component for rendering configurable multi-step forms from a JSON config",
   "author": "VladAfanasev",
   "license": "MIT",

package/wizard/src/features/form-runtime/ComponentAdapterComplete/ComponentAdapterComplete.js

@@ -1,8 +1,7 @@
 "use client";
-import { jsx as l, jsxs as m } from "react/jsx-runtime";
-import c from "./ComponentAdapterComplete.module.css.js";
-import { FormFieldWrapper as x } from "../../../../../ui/src/design-system/components/FormFieldWrapper.js";
-import { renderComponent as C } from "../../../../../core/src/registry/renderComponent.js";
+import { jsxs as n, jsx as c } from "react/jsx-runtime";
+import s from "./ComponentAdapterComplete.module.css.js";
+import { renderComponent as u } from "../../../../../core/src/registry/renderComponent.js";
 const a = {
   text: "text",
   date: "date",
@@ -29,38 +28,32 @@ const a = {
   reset: "reset",
   "code-input": "code-input",
   "progress-loader": "progress-loader"
-}, F = (e) => a[e] ? a[e] : (console.warn(
+}, g = (e) => a[e] ? a[e] : (console.warn(
   `⚠️ [ComponentAdapter] Component type "${e}" not found in TYPE_MAP, falling back to "text". Available types: ${Object.keys(a).join(", ")}`
-), "text"), O = (e) => e.map((r) => ({
-  id: r.id,
-  field: r.field || r.targetComponentId || "",
+), "text"), y = (e) => e.map((t) => ({
+  id: t.id,
+  field: t.field || t.targetComponentId || "",
   // Ensure field is always set
-  targetStepId: r.targetStepId || "",
+  targetStepId: t.targetStepId || "",
   // Default empty as form wizard doesn't have this concept
-  targetComponentId: r.field || r.targetComponentId,
+  targetComponentId: t.field || t.targetComponentId,
   // Map field to targetComponentId
-  operator: w(r.operator),
-  value: r.value,
-  logicalOperator: r.logicalOperator
-})), v = {
+  operator: h(t.operator),
+  value: t.value,
+  logicalOperator: t.logicalOperator
+})), f = {
   equals: "equals",
   notEquals: "notEquals",
   contains: "contains",
   empty: "empty",
   notEmpty: "notEmpty"
-}, w = (e) => v[e] || "equals", I = [
-  "heading",
-  "paragraph",
-  "alert",
-  "button",
-  "progress-loader"
-], T = (e, r, u, g, o, f, y) => {
+}, h = (e) => f[e] || "equals", A = (e, t, p, d, o, C, b, i, l) => {
   try {
-    const t = F(e.type), h = {
+    const r = g(e.type), m = {
       // Base component properties
       ...e,
       // Override the type with the mapped version
-      type: t,
+      type: r,
       // Spread all properties from component.properties to the top level for backward compatibility
       ...e.properties,
       // Add onBlur if provided
@@ -69,38 +62,32 @@ const a = {
       properties: {
         ...e.properties,
         // Also set readOnly in the nested properties object
-        readOnly: g ?? e.properties?.readOnly ?? !1,
+        readOnly: d ?? e.properties?.readOnly ?? !1,
         // Add onBlur to nested properties if provided
         ...o && { onBlur: o }
       },
       // Convert conditions if they exist
-      conditions: e.conditions ? O(e.conditions) : void 0
-    }, s = C({
-      component: h,
-      value: r,
-      onChange: u,
-      isFormView: !0
-    }), E = !I.includes(t), n = e.id, i = f?.[n], p = y?.context?.fieldStates?.[n]?.error, d = e.properties?.errorMessage || i || p, b = e.properties?.invalid === !0 || !!i || !!p;
-    return E ? /* @__PURE__ */ l(
-      x,
-      {
-        invalid: b,
-        errorMessage: typeof d == "string" ? d : void 0,
-        className: "form-field-wrapper",
-        input: s
-      }
-    ) : s;
-  } catch (t) {
-    return console.error("Error rendering component with registry:", t), /* @__PURE__ */ m("div", { className: c.errorFallback, children: [
-      /* @__PURE__ */ m("p", { children: [
+      conditions: e.conditions ? y(e.conditions) : void 0
+    };
+    return u({
+      component: m,
+      value: t,
+      onChange: p,
+      isFormView: !0,
+      invalid: i,
+      errorMessage: l
+    });
+  } catch (r) {
+    return console.error("Error rendering component with registry:", r), /* @__PURE__ */ n("div", { className: s.errorFallback, children: [
+      /* @__PURE__ */ n("p", { children: [
         "Failed to render component: ",
         e.type
       ] }),
-      /* @__PURE__ */ l("p", { className: c.errorDetail, children: t instanceof Error ? t.message : String(t) })
+      /* @__PURE__ */ c("p", { className: s.errorDetail, children: r instanceof Error ? r.message : String(r) })
     ] });
   }
 };
 export {
-  T as adaptComponentForRegistry,
-  T as default
+  A as adaptComponentForRegistry,
+  A as default
 };

package/wizard/src/features/form-runtime/components/FormField.js

@@ -1,6 +1,6 @@
 "use client";
-import { jsx as n, jsxs as p } from "react/jsx-runtime";
-import { ComponentAlerts as F } from "../../trigger-action-system/components/ComponentAlert/ComponentAlert.js";
+import { jsx as n, jsxs as I } from "react/jsx-runtime";
+import { ComponentAlerts as p } from "../../trigger-action-system/components/ComponentAlert/ComponentAlert.js";
 /* empty css                               */
 import { memo as M, useMemo as N } from "react";
 import { adaptComponentForRegistry as x } from "../ComponentAdapterComplete/ComponentAdapterComplete.js";
@@ -12,7 +12,7 @@ import { useFormFieldState as U } from "../hooks/useFormFieldState.js";
 import { useValidationEvents as G } from "../hooks/useValidationEvents.js";
 import { checkHasIsDirtyTriggers as z, shouldBeFormField as P, checkFieldHasValue as j, getValidationDisplayState as q, shouldShowComponentAlerts as J, shouldShowDisplayMode as W } from "../utils/fieldHelpers.js";
 import { logger as e } from "../utils/logger.js";
-import { updateValidationCache as C } from "../utils/validationUX.js";
+import { updateValidationCache as F } from "../utils/validationUX.js";
 import { ProgressLoaderRuntime as X } from "./ProgressLoaderRuntime.js";
 import { DisplayModeRenderer as Z } from "./renderers/DisplayModeRenderer/DisplayModeRenderer.js";
 import { InteractiveFieldRenderer as K } from "./renderers/InteractiveFieldRenderer/InteractiveFieldRenderer.js";
@@ -20,20 +20,20 @@ import { useFormMachine as Q } from "../../state-management/machines/useFormMach
 import Y from "../../../../../ui/src/lib/error-boundaries/ComponentErrorBoundary.js";
 const ii = M(
   ({ component: i, readOnly: V = !1 }) => {
-    const [D, ai, g] = Q(), c = O(), { isVisible: T } = B({
+    const [C, ai, g] = Q(), c = O(), { isVisible: T } = B({
       visibilityConditions: i.visibilityConditions,
-      formData: D.context.data
-    }), { forceShowValidation: A, resetValidationState: $ } = G({
+      formData: C.context.data
+    }), { forceShowValidation: D, resetValidationState: A } = G({
       componentId: i.id
-    }), y = z(i), { originalValueFromMachine: b, initializeField: R, getEnhancedIsDirty: S } = U({
+    }), y = z(i), { originalValueFromMachine: $, initializeField: b, getEnhancedIsDirty: S } = U({
       componentId: i.id,
       hasIsDirtyTriggers: y
-    }), { handleChange: L, handleBlur: k } = H({
+    }), { handleChange: R, handleBlur: L } = H({
       componentId: i.id,
       hasIsDirtyTriggers: y,
-      originalValueFromMachine: b,
+      originalValueFromMachine: $,
       getEnhancedIsDirty: S,
-      resetValidationState: $
+      resetValidationState: A
     }), f = _({
       componentId: i.id
     }), m = N(() => {
@@ -67,7 +67,7 @@ const ii = M(
             else {
               e.validation(
                 `No validation rules for ${i.id} [${l}], returning VALID (undefined)`
-              ), C(i.id, !0);
+              ), F(i.id, !0);
               return;
             }
           let s = t;
@@ -101,7 +101,7 @@ const ii = M(
             }
           );
           const u = (d.errors || []).length === 0;
-          C(i.id, u);
+          F(i.id, u);
           let o;
           return u ? o = void 0 : (d.errors || []).length === 1 ? o = (d.errors || [])[0] : o = d.errors || [], e.validation(
             `VALIDATION END [${l}] for ${i.id}:`,
@@ -149,14 +149,14 @@ const ii = M(
         }
       };
     }, [i.validation, g.validationEngine, i]);
-    R(), e.lifecycle(`Component MOUNTED for ${i.id}:`, {
+    b(), e.lifecycle(`Component MOUNTED for ${i.id}:`, {
       componentId: i.id,
       componentType: i.type,
       hasValidation: !!i.validation,
       validationRules: i.validation,
       validationEngineExists: !!g.validationEngine
     });
-    const w = P(i);
+    const k = P(i);
     if (i.validation && g.validationEngine)
       try {
         const a = g.validationEngine.validateField(
@@ -184,7 +184,7 @@ const ii = M(
           a
         );
       }
-    const I = !!(i.validation || i.required !== void 0);
+    const w = !!(i.validation || i.required !== void 0);
     return /* @__PURE__ */ n(
       "div",
       {
@@ -197,7 +197,7 @@ const ii = M(
           Y,
           {
             componentName: `FormField-${i.type}-${i.id}`,
-            children: w ? /* @__PURE__ */ n(
+            children: k ? /* @__PURE__ */ n(
               c.Field,
               {
                 name: i.id,
@@ -322,13 +322,13 @@ const ii = M(
                   ), { isSubmitAttempted: u } = q(
                     a.state.meta,
                     c.state,
-                    A
+                    D
                   ), o = J(
                     y,
                     l,
                     f.alerts.length
                   );
-                  return d && I ? /* @__PURE__ */ p("div", { children: [
+                  return d && w ? /* @__PURE__ */ I("div", { children: [
                     /* @__PURE__ */ n(
                       Z,
                       {
@@ -336,15 +336,14 @@ const ii = M(
                         fieldValue: t
                       }
                     ),
-                    o && f.alerts.length > 0 && /* @__PURE__ */ n(F, { alerts: f.alerts })
-                  ] }) : /* @__PURE__ */ p("div", { children: [
+                    o && f.alerts.length > 0 && /* @__PURE__ */ n(p, { alerts: f.alerts })
+                  ] }) : /* @__PURE__ */ I("div", { children: [
                     /* @__PURE__ */ n(
                       K,
                       {
                         component: i,
                         field: a,
                         readOnly: V,
-                        needsFormFieldWrapper: I,
                         isSubmitAttempted: u,
                         onChange: (r) => {
                           e.change(`onChange triggered for ${i.id}:`, {
@@ -357,12 +356,12 @@ const ii = M(
                             originalValue: r,
                             sharedValue: v,
                             sharedValueType: typeof v
-                          }), L(a)(v);
+                          }), R(a)(v);
                         },
-                        onBlur: k(a)
+                        onBlur: L(a)
                       }
                     ),
-                    o && f.alerts.length > 0 && /* @__PURE__ */ n(F, { alerts: f.alerts })
+                    o && f.alerts.length > 0 && /* @__PURE__ */ n(p, { alerts: f.alerts })
                   ] });
                 }
               }
@@ -385,12 +384,7 @@ const ii = M(
                 // no onChange handler
                 V,
                 () => {
-                },
-                // no onBlur handler
-                void 0,
-                // no errors
-                void 0
-                // no state
+                }
               )
             )
           }

package/wizard/src/features/form-runtime/components/renderers/DisplayModeRenderer/DisplayModeRenderer.js

@@ -1,28 +1,19 @@
 "use client";
 import { jsxs as p, jsx as r } from "react/jsx-runtime";
-import { clsx as a } from "clsx";
-import d from "./DisplayModeRenderer.module.css.js";
-import { FormFieldWrapper as m } from "../../../../../../../ui/src/design-system/components/FormFieldWrapper.js";
-import { renderComponentDisplayValue as t } from "../../../utils/componentDisplayValue.js";
-const u = ({
+import { clsx as d } from "clsx";
+import a from "./DisplayModeRenderer.module.css.js";
+import { renderComponentDisplayValue as m } from "../../../utils/componentDisplayValue.js";
+const y = ({
   component: e,
   fieldValue: s
 }) => {
-  const l = t(e, s), i = e.properties?.description, o = /* @__PURE__ */ p("div", { className: "form-field-display", children: [
+  const l = m(e, s), i = e.properties?.description, o = /* @__PURE__ */ p("div", { className: "form-field-display", children: [
     /* @__PURE__ */ r("div", { className: "rhc-form-field-label", children: e.properties?.label }),
     l,
     i && /* @__PURE__ */ r("p", { className: "rhc-form-field-description", children: i })
   ] });
-  return /* @__PURE__ */ r(
-    m,
-    {
-      invalid: !1,
-      errorMessage: void 0,
-      className: a("form-field-wrapper form-field-display-mode", d.displayWrapper),
-      input: o
-    }
-  );
+  return /* @__PURE__ */ r("div", { className: d("form-field-wrapper form-field-display-mode", a.displayWrapper), children: o });
 };
 export {
-  u as DisplayModeRenderer
+  y as DisplayModeRenderer
 };

package/wizard/src/features/form-runtime/components/renderers/InteractiveFieldRenderer/InteractiveFieldRenderer.js

@@ -1,56 +1,43 @@
 "use client";
-import { jsx as o } from "react/jsx-runtime";
-import { clsx as u } from "clsx";
-import v from "./InteractiveFieldRenderer.module.css.js";
-import { FormFieldWrapper as g } from "../../../../../../../ui/src/design-system/components/FormFieldWrapper.js";
-import { adaptComponentForRegistry as y } from "../../../ComponentAdapterComplete/ComponentAdapterComplete.js";
-import { shouldShowValidationError as E, getDisplayErrorMessage as F, markFieldAsUserInteracted as w } from "../../../utils/validationUX.js";
-const O = ({
+import { jsx as p } from "react/jsx-runtime";
+import h from "./InteractiveFieldRenderer.module.css.js";
+import { adaptComponentForRegistry as u } from "../../../ComponentAdapterComplete/ComponentAdapterComplete.js";
+import { shouldShowValidationError as v, getDisplayErrorMessage as g, markFieldAsUserInteracted as E } from "../../../utils/validationUX.js";
+const w = ({
   component: e,
   field: r,
-  readOnly: n,
-  needsFormFieldWrapper: d,
+  readOnly: a,
   isSubmitAttempted: t,
-  onChange: l,
-  onBlur: m
+  onChange: n,
+  onBlur: i
 }) => {
-  const p = r.state.value, c = r.state.meta.errors || [], f = !r.state.meta.isValid && c.length > 0, s = E(
+  const d = r.state.value, l = r.state.meta.errors || [], c = !r.state.meta.isValid && l.length > 0, s = v(
     r.state.meta,
     t,
     e.id
     // Pass component ID for validation cache
-  ), a = F(
+  ), o = g(
     r.state.meta,
     t
-  ), h = y(
+  ), m = u(
     e,
-    p,
-    l,
+    d,
     n,
+    a,
     () => {
-      w(e.id), m();
+      E(e.id), i();
     },
     void 0,
     // errors parameter
-    void 0
+    void 0,
     // state parameter
-  ), i = /* @__PURE__ */ o(
-    "div",
-    {
-      style: { display: "contents" },
-      children: h
-    }
+    !!(s && c),
+    // invalid
+    s && o ? o : void 0
+    // errorMessage
   );
-  return d ? /* @__PURE__ */ o(
-    g,
-    {
-      invalid: s && f,
-      errorMessage: s && a ? a : void 0,
-      className: u("form-field-wrapper", v.fieldWrapper),
-      input: i
-    }
-  ) : /* @__PURE__ */ o("div", { className: "form-field", children: i });
+  return /* @__PURE__ */ p("div", { className: h.fieldWrapper, children: m });
 };
 export {
-  O as InteractiveFieldRenderer
+  w as InteractiveFieldRenderer
 };

package/wizard/src/renderer/RHCRenderer.js

@@ -1,117 +1,160 @@
 "use client";
-import { jsx as r, jsxs as u } from "react/jsx-runtime";
-import { SelectOption as y, Radio as f } from "@rijkshuisstijl-community/components-react";
-import { wizardFieldTypeMap as g } from "./rhc-field-type-map.js";
-const b = g, x = ({
-  component: i,
-  value: o,
-  onChange: d,
-  isFormView: s
+import { jsx as r } from "react/jsx-runtime";
+import { SelectOption as b, FormFieldRadio as f, FormFieldCheckboxGroup as g, FormFieldCheckboxOption as h } from "@rijkshuisstijl-community/components-react";
+import { wizardFieldTypeMap as v } from "./rhc-field-type-map.js";
+const m = v, x = {
+  digits: "[0-9]*",
+  letters: "[a-zA-Z]*",
+  alphanumeric: "[a-zA-Z0-9]*"
+}, O = ({
+  component: u,
+  value: i,
+  onChange: s,
+  isFormView: c,
+  invalid: d,
+  errorMessage: p
 }) => {
-  const p = b[i.type];
-  if (!p)
-    return console.warn(`[RHCRenderer] No RHC component registered for type: ${i.type}`), null;
-  const e = i.properties ?? {}, n = {};
-  for (const t of p.included)
-    t in e && (n[t] = e[t]);
-  const a = p.component;
-  switch (i.type) {
+  const y = m[u.type];
+  if (!y)
+    return console.warn(`[RHCRenderer] No RHC component registered for type: ${u.type}`), null;
+  const e = u.properties ?? {}, l = {};
+  for (const t of y.included)
+    t in e && (l[t] = e[t]);
+  const o = y.component;
+  switch (u.type) {
     case "text":
     case "email":
     case "tel":
     case "number":
     case "date":
       return /* @__PURE__ */ r(
-        a,
+        o,
         {
-          type: i.type,
-          value: typeof o == "string" ? o : "",
-          ...n,
-          readOnly: !!n.readOnly || !s,
-          onChange: s ? (t) => d(t.target.value) : void 0
+          type: u.type,
+          value: typeof i == "string" ? i : "",
+          ...l,
+          invalid: d,
+          errorMessage: p,
+          readOnly: !!l.readOnly || !c,
+          onChange: c ? (t) => s(t.target.value) : void 0
         }
       );
     case "textarea":
       return /* @__PURE__ */ r(
-        a,
+        o,
         {
-          value: typeof o == "string" ? o : "",
-          ...n,
-          readOnly: !!n.readOnly || !s,
-          onChange: s ? (t) => d(t.target.value) : void 0
+          value: typeof i == "string" ? i : "",
+          ...l,
+          invalid: d,
+          errorMessage: p,
+          readOnly: !!l.readOnly || !c,
+          onChange: c ? (t) => s(t.target.value) : void 0
         }
       );
-    case "checkbox":
+    case "checkbox": {
+      const t = typeof e.label == "string" ? e.label : "", n = typeof e.description == "string" ? e.description : void 0;
       return /* @__PURE__ */ r(
-        a,
+        g,
         {
-          checked: !!o,
-          ...n,
-          onChange: s ? (t) => d(t.target.checked) : void 0
+          label: t,
+          description: n,
+          invalid: d,
+          errorMessage: p,
+          children: /* @__PURE__ */ r(
+            h,
+            {
+              label: t,
+              checked: !!i,
+              disabled: !!e.disabled,
+              onChange: c ? (a) => s(a.target.checked) : void 0
+            }
+          )
         }
       );
+    }
     case "radioGroup": {
       const t = Array.isArray(e.options) ? e.options : [];
-      return /* @__PURE__ */ r(a, { ...n, children: t.map((l) => (
-        // RHC Radio is a void <input type="radio"> — it cannot have children.
-        // Wrap in a <label> so the label text is associated with the input.
-        /* @__PURE__ */ u("label", { children: [
-          /* @__PURE__ */ r(
+      return /* @__PURE__ */ r(
+        o,
+        {
+          ...l,
+          invalid: d,
+          errorMessage: p,
+          children: t.map((n) => /* @__PURE__ */ r(
             f,
             {
-              value: l.value,
-              checked: o === l.value,
-              onChange: s ? () => d(l.value) : void 0
-            }
-          ),
-          l.label
-        ] }, l.value)
-      )) });
+              label: n.label,
+              value: n.value,
+              checked: i === n.value,
+              onChange: c ? () => s(n.value) : void 0
+            },
+            n.value
+          ))
+        }
+      );
     }
     case "dropdown": {
-      const t = Array.isArray(e.options) ? e.options : [], l = typeof e.label == "string" ? e.label : "";
+      const t = Array.isArray(e.options) ? e.options : [], n = typeof e.label == "string" ? e.label : "";
       return /* @__PURE__ */ r(
-        a,
+        o,
         {
-          label: l,
-          value: typeof o == "string" ? o : "",
-          ...n,
-          onChange: s ? (c) => d(c.target.value) : void 0,
-          children: t.map((c) => /* @__PURE__ */ r(y, { value: c.value, children: c.label }, c.value))
+          label: n,
+          value: typeof i == "string" ? i : "",
+          ...l,
+          invalid: d,
+          errorMessage: p,
+          onChange: c ? (a) => s(a.target.value) : void 0,
+          children: t.map((a) => /* @__PURE__ */ r(b, { value: a.value, children: a.label }, a.value))
         }
       );
     }
     case "button":
       return /* @__PURE__ */ r(
-        a,
+        o,
         {
           type: "button",
-          ...n,
-          onClick: s ? () => d(null) : void 0,
+          ...l,
+          onClick: c ? () => s(null) : void 0,
           children: typeof e.label == "string" ? e.label : "Submit"
         }
       );
     case "heading": {
-      const t = typeof e.level == "number" ? e.level : 2, l = Math.min(6, Math.max(1, t)), c = typeof e.text == "string" ? e.text : "";
-      return /* @__PURE__ */ r(a, { level: l, children: c });
+      const t = typeof e.level == "number" ? e.level : 2, n = Math.min(6, Math.max(1, t)), a = typeof e.text == "string" ? e.text : "";
+      return /* @__PURE__ */ r(o, { level: n, children: a });
     }
     case "paragraph":
-      return /* @__PURE__ */ r(a, { children: typeof e.text == "string" ? e.text : "" });
+      return /* @__PURE__ */ r(o, { children: typeof e.text == "string" ? e.text : "" });
     case "alert":
-      return /* @__PURE__ */ r(a, { role: "alert", children: typeof e.message == "string" ? e.message : "" });
+      return /* @__PURE__ */ r(o, { role: "alert", children: typeof e.message == "string" ? e.message : "" });
     case "progress-loader":
       return /* @__PURE__ */ r(
-        a,
+        o,
         {
           mode: typeof e.mode == "string" ? e.mode : "indeterminate",
           status: "loading",
           label: typeof e.label == "string" ? e.label : void 0
         }
       );
+    case "code-input": {
+      const t = typeof e.pattern == "string" ? e.pattern : void 0, n = t && t !== "none" ? x[t] : void 0;
+      return /* @__PURE__ */ r(
+        o,
+        {
+          codeLength: Number(e.codeLength ?? 6) || 6,
+          label: typeof e.label == "string" ? e.label : void 0,
+          invalid: d,
+          errorMessage: p,
+          capitalize: !!e.capitalize,
+          pattern: n,
+          disabled: !!e.disabled,
+          onChange: (a) => s(a)
+        }
+      );
+    }
     default:
-      return /* @__PURE__ */ r(a, { ...n });
+      return /* @__PURE__ */ r(o, { ...l });
   }
 };
 export {
-  x as rhcRenderer
+  O as rhcRenderer
 };

package/wizard/src/renderer/rhc-field-type-map.js

@@ -1,22 +1,24 @@
 "use client";
-import { Alert as d, Paragraph as l, Heading as n, Button as o, FormFieldSelect as a, RadioGroup as c, Checkbox as r, Textarea as t, TextInput as e } from "@rijkshuisstijl-community/components-react";
+import { CodeInputGroup as d, Alert as l, Paragraph as o, Heading as n, Button as a, FormFieldSelect as i, FormFieldRadioGroup as r, FormFieldCheckboxGroup as c, FormFieldTextarea as t, FormFieldTextInput as e } from "@rijkshuisstijl-community/components-react";
 /* empty css                         */
-import { ProgressLoaderBar as i } from "../../../ui/src/components/ProgressLoaderBar/ProgressLoaderBar.js";
+import { ProgressLoaderBar as p } from "../../../ui/src/components/ProgressLoaderBar/ProgressLoaderBar.js";
 const s = {
-  text: { component: e, included: ["value", "placeholder", "disabled", "readOnly"] },
-  email: { component: e, included: ["value", "placeholder", "disabled", "readOnly"] },
-  tel: { component: e, included: ["value", "placeholder", "disabled", "readOnly"] },
-  number: { component: e, included: ["value", "placeholder", "disabled", "readOnly"] },
-  date: { component: e, included: ["value", "placeholder", "disabled", "readOnly"] },
-  textarea: { component: t, included: ["value", "placeholder", "disabled", "readOnly"] },
-  checkbox: { component: r, included: ["disabled"] },
-  radioGroup: { component: c, included: [] },
-  dropdown: { component: a, included: ["disabled"] },
-  button: { component: o, included: ["disabled"] },
+  text: { component: e, included: ["label", "description", "value", "placeholder", "disabled", "readOnly"] },
+  email: { component: e, included: ["label", "description", "value", "placeholder", "disabled", "readOnly"] },
+  tel: { component: e, included: ["label", "description", "value", "placeholder", "disabled", "readOnly"] },
+  number: { component: e, included: ["label", "description", "value", "placeholder", "disabled", "readOnly"] },
+  date: { component: e, included: ["label", "description", "value", "placeholder", "disabled", "readOnly"] },
+  textarea: { component: t, included: ["label", "description", "value", "placeholder", "disabled", "readOnly"] },
+  // checkbox: handled entirely in RHCRenderer switch case via FormFieldCheckboxGroup + FormFieldCheckboxOption
+  checkbox: { component: c, included: [] },
+  radioGroup: { component: r, included: ["label", "description"] },
+  dropdown: { component: i, included: ["label", "description", "disabled"] },
+  button: { component: a, included: ["disabled"] },
   heading: { component: n, included: ["level"] },
-  paragraph: { component: l, included: [] },
-  alert: { component: d, included: [] },
-  "progress-loader": { component: i, included: ["mode", "label"] }
+  paragraph: { component: o, included: [] },
+  alert: { component: l, included: [] },
+  "progress-loader": { component: p, included: ["mode", "label"] },
+  "code-input": { component: d, included: ["label", "codeLength", "capitalize", "pattern", "disabled"] }
 };
 export {
   s as wizardFieldTypeMap

package/ui/src/design-system/components/FormFieldWrapper.js

@@ -1,16 +0,0 @@
-"use client";
-import { jsxs as m, jsx as d } from "react/jsx-runtime";
-function o({
-  invalid: e,
-  errorMessage: r,
-  className: i = "",
-  input: t
-}) {
-  return /* @__PURE__ */ m("div", { className: `form-field-wrapper ${i}`, children: [
-    t,
-    e && r && /* @__PURE__ */ d("div", { className: "form-field-error mt-2 text-sm text-red-600", children: r })
-  ] });
-}
-export {
-  o as FormFieldWrapper
-};