@bookinglab/booking-ui-react 1.12.1 → 1.13.0

package/dist/index.d.cts

@@ -878,6 +878,8 @@ interface BookingFormProps {
     submitLabel?: string;
     /** Whether the current user is an admin. When false (default), questions with admin_only=true are hidden. */
     isAdmin?: boolean;
+    /** When true, renders each question's help_text directly below the label (or legend/heading) instead of below the input. Defaults to false. */
+    displayHelpTextBelowLabel?: boolean;
     /** Class name for the form element */
     className?: string;
     /** @deprecated Use classNames.label instead */
@@ -907,7 +909,7 @@ interface BookingUIConfig {
  * />
  * ```
  */
-declare function BookingForm({ questions, onSubmit, submitLabel, isAdmin, className, labelClassName, classNames: classNamesProp, }: BookingFormProps): react_jsx_runtime.JSX.Element;
+declare function BookingForm({ questions, onSubmit, submitLabel, isAdmin, displayHelpTextBelowLabel, className, labelClassName, classNames: classNamesProp, }: BookingFormProps): react_jsx_runtime.JSX.Element;
 
 /**
  * A reusable, accessible registration form component.

package/dist/index.d.ts

@@ -878,6 +878,8 @@ interface BookingFormProps {
     submitLabel?: string;
     /** Whether the current user is an admin. When false (default), questions with admin_only=true are hidden. */
     isAdmin?: boolean;
+    /** When true, renders each question's help_text directly below the label (or legend/heading) instead of below the input. Defaults to false. */
+    displayHelpTextBelowLabel?: boolean;
     /** Class name for the form element */
     className?: string;
     /** @deprecated Use classNames.label instead */
@@ -907,7 +909,7 @@ interface BookingUIConfig {
  * />
  * ```
  */
-declare function BookingForm({ questions, onSubmit, submitLabel, isAdmin, className, labelClassName, classNames: classNamesProp, }: BookingFormProps): react_jsx_runtime.JSX.Element;
+declare function BookingForm({ questions, onSubmit, submitLabel, isAdmin, displayHelpTextBelowLabel, className, labelClassName, classNames: classNamesProp, }: BookingFormProps): react_jsx_runtime.JSX.Element;
 
 /**
  * A reusable, accessible registration form component.

package/dist/index.js

@@ -24,7 +24,8 @@ function DateInputGroup({
   itemCls,
   sublabelCls,
   dateInputCls,
-  renderHelpText,
+  helpTextAbove,
+  helpTextBelow,
   renderError
 }) {
   const parseValue = (raw) => {
@@ -64,6 +65,7 @@ function DateInputGroup({
       question.name,
       question.required && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-red-500 ml-1", "aria-hidden": "true", children: "*" })
     ] }),
+    helpTextAbove,
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: groupCls, role: "group", children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: itemCls, children: [
         /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: dayId, className: sublabelCls, children: "Day" }),
@@ -120,7 +122,7 @@ function DateInputGroup({
         )
       ] })
     ] }),
-    renderHelpText(),
+    helpTextBelow,
     renderError()
   ] });
 }
@@ -129,7 +131,8 @@ function FormField({
   value,
   error,
   onChange,
-  classNames
+  classNames,
+  displayHelpTextBelowLabel = false
 }) {
   const inputId = `question-${question.id}`;
   const errorId = `${inputId}-error`;
@@ -162,6 +165,8 @@ function FormField({
       }
     );
   };
+  const helpTextAbove = displayHelpTextBelowLabel ? renderHelpText() : null;
+  const helpTextBelow = displayHelpTextBelowLabel ? null : renderHelpText();
   const renderError = () => {
     if (!error) return null;
     return /* @__PURE__ */ jsxRuntime.jsx("p", { id: errorId, className: classNames?.errorText ?? defaultErrorText, role: "alert", children: error });
@@ -180,6 +185,7 @@ function FormField({
     case "text_field":
       return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classNames?.fieldWrapper ?? defaultFieldWrapper, children: [
         renderLabel(),
+        helpTextAbove,
         /* @__PURE__ */ jsxRuntime.jsx(
           "input",
           {
@@ -192,12 +198,13 @@ function FormField({
             ...ariaProps
           }
         ),
-        renderHelpText(),
+        helpTextBelow,
         renderError()
       ] });
     case "text_area":
       return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classNames?.fieldWrapper ?? defaultFieldWrapper, children: [
         renderLabel(),
+        helpTextAbove,
         /* @__PURE__ */ jsxRuntime.jsx(
           "textarea",
           {
@@ -210,12 +217,13 @@ function FormField({
             ...ariaProps
           }
         ),
-        renderHelpText(),
+        helpTextBelow,
         renderError()
       ] });
     case "select":
       return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classNames?.fieldWrapper ?? defaultFieldWrapper, children: [
         renderLabel(),
+        helpTextAbove,
         /* @__PURE__ */ jsxRuntime.jsxs(
           "select",
           {
@@ -230,12 +238,13 @@ function FormField({
             ]
           }
         ),
-        renderHelpText(),
+        helpTextBelow,
         renderError()
       ] });
     case "radio":
       return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classNames?.fieldWrapper ?? defaultFieldWrapper, children: [
         renderLabel(),
+        helpTextAbove,
         /* @__PURE__ */ jsxRuntime.jsx(
           "div",
           {
@@ -263,7 +272,7 @@ function FormField({
             })
           }
         ),
-        renderHelpText(),
+        helpTextBelow,
         renderError()
       ] });
     case "date": {
@@ -289,7 +298,8 @@ function FormField({
           itemCls,
           sublabelCls,
           dateInputCls,
-          renderHelpText,
+          helpTextAbove,
+          helpTextBelow,
           renderError
         }
       );
@@ -297,6 +307,7 @@ function FormField({
     case "number":
       return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classNames?.fieldWrapper ?? defaultFieldWrapper, children: [
         renderLabel(),
+        helpTextAbove,
         /* @__PURE__ */ jsxRuntime.jsx(
           "input",
           {
@@ -311,11 +322,12 @@ function FormField({
             ...ariaProps
           }
         ),
-        renderHelpText(),
+        helpTextBelow,
         renderError()
       ] });
     case "check":
       return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classNames?.fieldWrapper ?? defaultFieldWrapper, children: [
+        helpTextAbove,
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-2", children: [
           /* @__PURE__ */ jsxRuntime.jsx(
             "input",
@@ -333,7 +345,7 @@ function FormField({
             question.required && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-red-500 ml-1", "aria-hidden": "true", children: "*" })
           ] })
         ] }),
-        renderHelpText(),
+        helpTextBelow,
         renderError()
       ] });
     default:
@@ -345,6 +357,7 @@ function BookingForm({
   onSubmit,
   submitLabel = "Submit",
   isAdmin = false,
+  displayHelpTextBelowLabel = false,
   className = "",
   labelClassName,
   classNames: classNamesProp
@@ -541,7 +554,8 @@ function BookingForm({
         value: values[question.id],
         error: touched[question.id] ? errors[question.id] : void 0,
         onChange: (value) => handleChange(question.id, value),
-        classNames
+        classNames,
+        displayHelpTextBelowLabel
       },
       question.id
     )),