@bookinglab/booking-ui-react 1.13.0 → 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[];

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[];

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,