@bookinglab/booking-ui-react 1.13.0 → 1.15.0

package/dist/index.d.cts

@@ -810,6 +810,15 @@ interface QuestionSettings {
     max?: number;
     placeholder?: string;
 }
+interface DateLimiter {
+    enabled: boolean;
+    /** ISO date string (e.g. "2025-01-01" or full ISO 8601). Only the date portion is used. */
+    minimumDate?: string;
+    /** ISO date string (e.g. "2025-12-31" or full ISO 8601). Only the date portion is used. */
+    maximumDate?: string;
+    /** Custom error message shown when the entered date falls outside the configured range. */
+    errorText?: string;
+}
 interface Question {
     id: number;
     name: string;
@@ -828,6 +837,8 @@ interface Question {
     hide_on_customer_journey?: boolean;
     /** Whether the question field is disabled */
     disabled?: boolean;
+    /** Optional date validation config. Only applies when detail_type is 'date'. */
+    dateLimiter?: DateLimiter;
 }
 type FormValues = Record<number, string | number | boolean>;
 type FormErrors = Record<number, string>;
@@ -869,8 +880,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[];
@@ -1017,4 +1034,4 @@ declare function minLen(min: number): (value: string) => string | null;
  */
 declare function compose(...validators: Array<(value: string) => string | null>): (value: string) => string | null;
 
-export { type AppConfig, type AwsLookupConfig, type AwsLookupMatchEntry, type AwsLookupSetPayload, BookingForm, type BookingFormClassNames, type BookingFormProps, type BookingUIConfig, type ConditionClause, type ContactDetailsAnswerEntry, type ContactDetailsFieldSettings, ContactDetailsForm, type ContactDetailsFormClassNames, type ContactDetailsFormProps, type ContactDetailsFormRef, type ContactDetailsInitialValues, type ContactDetailsQuestionEntry, type ContactDetailsValues, type ContactFieldSettings, type CopyDataConfig, type DropdownOption, type ExtraItemEntry, type FieldConfig, type FieldError, type FieldOption, type FormErrors, type FormReadyPayload, type FormSchemaStatus, type FormValues, type Question, type QuestionOption, type QuestionSettings, type RadioOption, type RawSchemaField, type RegistrationFieldSettings, RegistrationForm, type RegistrationFormClassNames, type RegistrationFormErrors, type RegistrationFormProps, type RegistrationFormRef, type RegistrationFormValues, ResetPasswordForm, type ResetPasswordFormClassNames, type ResetPasswordFormProps, type ResetPasswordFormRef, type ResetPasswordFormValues, type SchemaField, SchemaFormBuilder, type SchemaFormBuilderProps, type ShowRules, type UpdateDatastorePayload, type ValidationMaxDate, type ValidationMaxLength, type ValidationMinDate, type ValidationMinLength, type ValidationRule, type ValidationShorthand, type VenueSetPayload, compose, email, hydrateField, minLen, phone, required, ukPostcode };
+export { type AppConfig, type AwsLookupConfig, type AwsLookupMatchEntry, type AwsLookupSetPayload, BookingForm, type BookingFormClassNames, type BookingFormProps, type BookingUIConfig, type ConditionClause, type ContactDetailsAnswerEntry, type ContactDetailsFieldSettings, ContactDetailsForm, type ContactDetailsFormClassNames, type ContactDetailsFormProps, type ContactDetailsFormRef, type ContactDetailsInitialValues, type ContactDetailsQuestionEntry, type ContactDetailsValues, type ContactFieldSettings, type CopyDataConfig, type DateLimiter, type DropdownOption, type ExtraItemEntry, type FieldConfig, type FieldError, type FieldOption, type FormErrors, type FormReadyPayload, type FormSchemaStatus, type FormValues, type Question, type QuestionOption, type QuestionSettings, type RadioOption, type RawSchemaField, type RegistrationFieldSettings, RegistrationForm, type RegistrationFormClassNames, type RegistrationFormErrors, type RegistrationFormProps, type RegistrationFormRef, type RegistrationFormValues, ResetPasswordForm, type ResetPasswordFormClassNames, type ResetPasswordFormProps, type ResetPasswordFormRef, type ResetPasswordFormValues, type SchemaField, SchemaFormBuilder, type SchemaFormBuilderProps, type ShowRules, type UpdateDatastorePayload, type ValidationMaxDate, type ValidationMaxLength, type ValidationMinDate, type ValidationMinLength, type ValidationRule, type ValidationShorthand, type VenueSetPayload, compose, email, hydrateField, minLen, phone, required, ukPostcode };

package/dist/index.d.ts

@@ -810,6 +810,15 @@ interface QuestionSettings {
     max?: number;
     placeholder?: string;
 }
+interface DateLimiter {
+    enabled: boolean;
+    /** ISO date string (e.g. "2025-01-01" or full ISO 8601). Only the date portion is used. */
+    minimumDate?: string;
+    /** ISO date string (e.g. "2025-12-31" or full ISO 8601). Only the date portion is used. */
+    maximumDate?: string;
+    /** Custom error message shown when the entered date falls outside the configured range. */
+    errorText?: string;
+}
 interface Question {
     id: number;
     name: string;
@@ -828,6 +837,8 @@ interface Question {
     hide_on_customer_journey?: boolean;
     /** Whether the question field is disabled */
     disabled?: boolean;
+    /** Optional date validation config. Only applies when detail_type is 'date'. */
+    dateLimiter?: DateLimiter;
 }
 type FormValues = Record<number, string | number | boolean>;
 type FormErrors = Record<number, string>;
@@ -869,8 +880,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[];
@@ -1017,4 +1034,4 @@ declare function minLen(min: number): (value: string) => string | null;
  */
 declare function compose(...validators: Array<(value: string) => string | null>): (value: string) => string | null;
 
-export { type AppConfig, type AwsLookupConfig, type AwsLookupMatchEntry, type AwsLookupSetPayload, BookingForm, type BookingFormClassNames, type BookingFormProps, type BookingUIConfig, type ConditionClause, type ContactDetailsAnswerEntry, type ContactDetailsFieldSettings, ContactDetailsForm, type ContactDetailsFormClassNames, type ContactDetailsFormProps, type ContactDetailsFormRef, type ContactDetailsInitialValues, type ContactDetailsQuestionEntry, type ContactDetailsValues, type ContactFieldSettings, type CopyDataConfig, type DropdownOption, type ExtraItemEntry, type FieldConfig, type FieldError, type FieldOption, type FormErrors, type FormReadyPayload, type FormSchemaStatus, type FormValues, type Question, type QuestionOption, type QuestionSettings, type RadioOption, type RawSchemaField, type RegistrationFieldSettings, RegistrationForm, type RegistrationFormClassNames, type RegistrationFormErrors, type RegistrationFormProps, type RegistrationFormRef, type RegistrationFormValues, ResetPasswordForm, type ResetPasswordFormClassNames, type ResetPasswordFormProps, type ResetPasswordFormRef, type ResetPasswordFormValues, type SchemaField, SchemaFormBuilder, type SchemaFormBuilderProps, type ShowRules, type UpdateDatastorePayload, type ValidationMaxDate, type ValidationMaxLength, type ValidationMinDate, type ValidationMinLength, type ValidationRule, type ValidationShorthand, type VenueSetPayload, compose, email, hydrateField, minLen, phone, required, ukPostcode };
+export { type AppConfig, type AwsLookupConfig, type AwsLookupMatchEntry, type AwsLookupSetPayload, BookingForm, type BookingFormClassNames, type BookingFormProps, type BookingUIConfig, type ConditionClause, type ContactDetailsAnswerEntry, type ContactDetailsFieldSettings, ContactDetailsForm, type ContactDetailsFormClassNames, type ContactDetailsFormProps, type ContactDetailsFormRef, type ContactDetailsInitialValues, type ContactDetailsQuestionEntry, type ContactDetailsValues, type ContactFieldSettings, type CopyDataConfig, type DateLimiter, type DropdownOption, type ExtraItemEntry, type FieldConfig, type FieldError, type FieldOption, type FormErrors, type FormReadyPayload, type FormSchemaStatus, type FormValues, type Question, type QuestionOption, type QuestionSettings, type RadioOption, type RawSchemaField, type RegistrationFieldSettings, RegistrationForm, type RegistrationFormClassNames, type RegistrationFormErrors, type RegistrationFormProps, type RegistrationFormRef, type RegistrationFormValues, ResetPasswordForm, type ResetPasswordFormClassNames, type ResetPasswordFormProps, type ResetPasswordFormRef, type ResetPasswordFormValues, type SchemaField, SchemaFormBuilder, type SchemaFormBuilderProps, type ShowRules, type UpdateDatastorePayload, type ValidationMaxDate, type ValidationMaxLength, type ValidationMinDate, type ValidationMinLength, type ValidationRule, type ValidationShorthand, type VenueSetPayload, compose, email, hydrateField, minLen, phone, required, ukPostcode };

package/dist/index.js

@@ -24,6 +24,9 @@ function DateInputGroup({
   itemCls,
   sublabelCls,
   dateInputCls,
+  dayInputCls,
+  monthInputCls,
+  yearInputCls,
   helpTextAbove,
   helpTextBelow,
   renderError
@@ -63,7 +66,7 @@ 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: [
@@ -79,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
           }
@@ -97,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
           }
@@ -115,7 +118,7 @@ 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
           }
@@ -152,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 = () => {
@@ -283,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,
         {
@@ -298,6 +305,9 @@ function FormField({
           itemCls,
           sublabelCls,
           dateInputCls,
+          dayInputCls,
+          monthInputCls,
+          yearInputCls,
           helpTextAbove,
           helpTextBelow,
           renderError
@@ -342,7 +352,7 @@ 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: "*" })
           ] })
         ] }),
         helpTextBelow,
@@ -481,6 +491,24 @@ function BookingForm({
         return `Maximum value is ${question.settings.max}`;
       }
     }
+    if (question.detail_type === "date" && question.dateLimiter?.enabled && typeof value === "string" && value !== "") {
+      const toDatePart = (iso) => {
+        if (!iso || typeof iso !== "string") return null;
+        const m = iso.match(/^(\d{4}-\d{2}-\d{2})/);
+        return m ? m[1] : null;
+      };
+      const min = toDatePart(question.dateLimiter.minimumDate);
+      const max = toDatePart(question.dateLimiter.maximumDate);
+      const v = value;
+      const outOfRange = min && v < min || max && v > max;
+      if (outOfRange) {
+        if (question.dateLimiter.errorText) return question.dateLimiter.errorText;
+        if (min && max) return `Date must be between ${min} and ${max}`;
+        if (min) return `Date must be on or after ${min}`;
+        if (max) return `Date must be on or before ${max}`;
+        return "Date is outside the allowed range";
+      }
+    }
     return null;
   }, []);
   const validateAll = React.useCallback(() => {