@bookinglab/booking-ui-react 1.12.1 → 1.14.0

package/dist/index.d.cts

@@ -869,8 +869,14 @@ interface BookingFormClassNames {
     dateInputItem?: string;
     /** Small "Day"/"Month"/"Year" label */
     dateInputLabel?: string;
-    /** Date sub-input element (falls back to `input` / `inputError`) */
+    /** Date sub-input element (falls back to `input` / `inputError`). Applies to all 3 inputs unless overridden by dateInputDay/Month/Year. */
     dateInput?: string;
+    /** Day input specifically (falls back to `dateInput`) */
+    dateInputDay?: string;
+    /** Month input specifically (falls back to `dateInput`) */
+    dateInputMonth?: string;
+    /** Year input specifically (falls back to `dateInput`) */
+    dateInputYear?: string;
 }
 interface BookingFormProps {
     questions: Question[];
@@ -878,6 +884,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 +915,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

@@ -869,8 +869,14 @@ interface BookingFormClassNames {
     dateInputItem?: string;
     /** Small "Day"/"Month"/"Year" label */
     dateInputLabel?: string;
-    /** Date sub-input element (falls back to `input` / `inputError`) */
+    /** Date sub-input element (falls back to `input` / `inputError`). Applies to all 3 inputs unless overridden by dateInputDay/Month/Year. */
     dateInput?: string;
+    /** Day input specifically (falls back to `dateInput`) */
+    dateInputDay?: string;
+    /** Month input specifically (falls back to `dateInput`) */
+    dateInputMonth?: string;
+    /** Year input specifically (falls back to `dateInput`) */
+    dateInputYear?: string;
 }
 interface BookingFormProps {
     questions: Question[];
@@ -878,6 +884,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 +915,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,11 @@ function DateInputGroup({
   itemCls,
   sublabelCls,
   dateInputCls,
-  renderHelpText,
+  dayInputCls,
+  monthInputCls,
+  yearInputCls,
+  helpTextAbove,
+  helpTextBelow,
   renderError
 }) {
   const parseValue = (raw) => {
@@ -62,8 +66,9 @@ function DateInputGroup({
   return /* @__PURE__ */ jsxRuntime.jsxs("fieldset", { className: fieldsetCls, "aria-describedby": hasError ? errorId : void 0, children: [
     /* @__PURE__ */ jsxRuntime.jsxs("legend", { className: legendCls, children: [
       question.name,
-      question.required && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-red-500 ml-1", "aria-hidden": "true", children: "*" })
+      question.required && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-1", style: { color: "#DD2D1D" }, "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" }),
@@ -77,7 +82,7 @@ function DateInputGroup({
             maxLength: 2,
             value: parts.day,
             onChange: (e) => handleSubChange("day", e.target.value),
-            className: cx(dateInputCls, "w-16"),
+            className: cx(dayInputCls ?? dateInputCls, "w-16"),
             "aria-invalid": hasError ? true : void 0,
             "aria-required": question.required || void 0
           }
@@ -95,7 +100,7 @@ function DateInputGroup({
             maxLength: 2,
             value: parts.month,
             onChange: (e) => handleSubChange("month", e.target.value),
-            className: cx(dateInputCls, "w-16"),
+            className: cx(monthInputCls ?? dateInputCls, "w-16"),
             "aria-invalid": hasError ? true : void 0,
             "aria-required": question.required || void 0
           }
@@ -113,14 +118,14 @@ function DateInputGroup({
             maxLength: 4,
             value: parts.year,
             onChange: (e) => handleSubChange("year", e.target.value),
-            className: cx(dateInputCls, "w-24"),
+            className: cx(yearInputCls ?? dateInputCls, "w-24"),
             "aria-invalid": hasError ? true : void 0,
             "aria-required": question.required || void 0
           }
         )
       ] })
     ] }),
-    renderHelpText(),
+    helpTextBelow,
     renderError()
   ] });
 }
@@ -129,7 +134,8 @@ function FormField({
   value,
   error,
   onChange,
-  classNames
+  classNames,
+  displayHelpTextBelowLabel = false
 }) {
   const inputId = `question-${question.id}`;
   const errorId = `${inputId}-error`;
@@ -149,7 +155,7 @@ function FormField({
     if (question.detail_type === "heading") return null;
     return /* @__PURE__ */ jsxRuntime.jsxs("label", { htmlFor: inputId, className: labelClasses, children: [
       question.name,
-      question.required && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-red-500 ml-1", "aria-hidden": "true", children: "*" })
+      question.required && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-1", style: { color: "#DD2D1D" }, "aria-hidden": "true", children: "*" })
     ] });
   };
   const renderHelpText = () => {
@@ -162,6 +168,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 +188,7 @@ function FormField({
     case "text_field":
       return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classNames?.fieldWrapper ?? defaultFieldWrapper, children: [
         renderLabel(),
+        helpTextAbove,
         /* @__PURE__ */ jsxRuntime.jsx(
           "input",
           {
@@ -192,12 +201,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 +220,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 +241,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 +275,7 @@ function FormField({
             })
           }
         ),
-        renderHelpText(),
+        helpTextBelow,
         renderError()
       ] });
     case "date": {
@@ -274,6 +286,10 @@ function FormField({
       const groupCls = classNames?.dateInputGroup ?? "flex flex-row gap-3 items-end";
       const legendCls = classNames?.dateLegend ?? labelClasses;
       const fieldsetCls = classNames?.dateFieldset ?? (classNames?.fieldWrapper ?? defaultFieldWrapper);
+      const wrapPerInput = (cls) => cls === void 0 ? void 0 : hasError ? cx(cls, classNames?.inputError ?? defaultInputError) : cls;
+      const dayInputCls = wrapPerInput(classNames?.dateInputDay);
+      const monthInputCls = wrapPerInput(classNames?.dateInputMonth);
+      const yearInputCls = wrapPerInput(classNames?.dateInputYear);
       return /* @__PURE__ */ jsxRuntime.jsx(
         DateInputGroup,
         {
@@ -289,7 +305,11 @@ function FormField({
           itemCls,
           sublabelCls,
           dateInputCls,
-          renderHelpText,
+          dayInputCls,
+          monthInputCls,
+          yearInputCls,
+          helpTextAbove,
+          helpTextBelow,
           renderError
         }
       );
@@ -297,6 +317,7 @@ function FormField({
     case "number":
       return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classNames?.fieldWrapper ?? defaultFieldWrapper, children: [
         renderLabel(),
+        helpTextAbove,
         /* @__PURE__ */ jsxRuntime.jsx(
           "input",
           {
@@ -311,11 +332,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",
@@ -330,10 +352,10 @@ function FormField({
           ),
           /* @__PURE__ */ jsxRuntime.jsxs("label", { htmlFor: inputId, className: checkboxLabelClasses, children: [
             question.name,
-            question.required && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-red-500 ml-1", "aria-hidden": "true", children: "*" })
+            question.required && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-1", style: { color: "#DD2D1D" }, "aria-hidden": "true", children: "*" })
           ] })
         ] }),
-        renderHelpText(),
+        helpTextBelow,
         renderError()
       ] });
     default:
@@ -345,6 +367,7 @@ function BookingForm({
   onSubmit,
   submitLabel = "Submit",
   isAdmin = false,
+  displayHelpTextBelowLabel = false,
   className = "",
   labelClassName,
   classNames: classNamesProp
@@ -541,7 +564,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
     )),