@bookinglab/booking-ui-react 1.13.0 → 1.15.0

package/dist/index.mjs

@@ -18,6 +18,9 @@ function DateInputGroup({
   itemCls,
   sublabelCls,
   dateInputCls,
+  dayInputCls,
+  monthInputCls,
+  yearInputCls,
   helpTextAbove,
   helpTextBelow,
   renderError
@@ -57,7 +60,7 @@ function DateInputGroup({
   return /* @__PURE__ */ jsxs("fieldset", { className: fieldsetCls, "aria-describedby": hasError ? errorId : void 0, children: [
     /* @__PURE__ */ jsxs("legend", { className: legendCls, children: [
       question.name,
-      question.required && /* @__PURE__ */ jsx("span", { className: "text-red-500 ml-1", "aria-hidden": "true", children: "*" })
+      question.required && /* @__PURE__ */ jsx("span", { className: "ml-1", style: { color: "#DD2D1D" }, "aria-hidden": "true", children: "*" })
     ] }),
     helpTextAbove,
     /* @__PURE__ */ jsxs("div", { className: groupCls, role: "group", children: [
@@ -73,7 +76,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
           }
@@ -91,7 +94,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
           }
@@ -109,7 +112,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
           }
@@ -146,7 +149,7 @@ function FormField({
     if (question.detail_type === "heading") return null;
     return /* @__PURE__ */ jsxs("label", { htmlFor: inputId, className: labelClasses, children: [
       question.name,
-      question.required && /* @__PURE__ */ jsx("span", { className: "text-red-500 ml-1", "aria-hidden": "true", children: "*" })
+      question.required && /* @__PURE__ */ jsx("span", { className: "ml-1", style: { color: "#DD2D1D" }, "aria-hidden": "true", children: "*" })
     ] });
   };
   const renderHelpText = () => {
@@ -277,6 +280,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__ */ jsx(
         DateInputGroup,
         {
@@ -292,6 +299,9 @@ function FormField({
           itemCls,
           sublabelCls,
           dateInputCls,
+          dayInputCls,
+          monthInputCls,
+          yearInputCls,
           helpTextAbove,
           helpTextBelow,
           renderError
@@ -336,7 +346,7 @@ function FormField({
           ),
           /* @__PURE__ */ jsxs("label", { htmlFor: inputId, className: checkboxLabelClasses, children: [
             question.name,
-            question.required && /* @__PURE__ */ jsx("span", { className: "text-red-500 ml-1", "aria-hidden": "true", children: "*" })
+            question.required && /* @__PURE__ */ jsx("span", { className: "ml-1", style: { color: "#DD2D1D" }, "aria-hidden": "true", children: "*" })
           ] })
         ] }),
         helpTextBelow,
@@ -475,6 +485,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 = useCallback(() => {