@bookinglab/booking-ui-react 1.11.1 → 1.12.0

package/dist/index.d.cts

@@ -859,6 +859,18 @@ interface BookingFormClassNames {
     errorText?: string;
     /** Submit button */
     button?: string;
+    /** Date field <fieldset> wrapper */
+    dateFieldset?: string;
+    /** Date field <legend> */
+    dateLegend?: string;
+    /** Flex row containing day/month/year items */
+    dateInputGroup?: string;
+    /** Each day/month/year wrapper */
+    dateInputItem?: string;
+    /** Small "Day"/"Month"/"Year" label */
+    dateInputLabel?: string;
+    /** Date sub-input element (falls back to `input` / `inputError`) */
+    dateInput?: string;
 }
 interface BookingFormProps {
     questions: Question[];

package/dist/index.d.ts

@@ -859,6 +859,18 @@ interface BookingFormClassNames {
     errorText?: string;
     /** Submit button */
     button?: string;
+    /** Date field <fieldset> wrapper */
+    dateFieldset?: string;
+    /** Date field <legend> */
+    dateLegend?: string;
+    /** Flex row containing day/month/year items */
+    dateInputGroup?: string;
+    /** Each day/month/year wrapper */
+    dateInputItem?: string;
+    /** Small "Day"/"Month"/"Year" label */
+    dateInputLabel?: string;
+    /** Date sub-input element (falls back to `input` / `inputError`) */
+    dateInput?: string;
 }
 interface BookingFormProps {
     questions: Question[];

package/dist/index.js

@@ -56,7 +56,10 @@ function FormField({
   };
   switch (question.detail_type) {
     case "heading":
-      return /* @__PURE__ */ jsxRuntime.jsx("h3", { className: classNames?.heading ?? defaultHeading, children: question.name });
+      return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classNames?.fieldWrapper ?? defaultFieldWrapper, children: [
+        /* @__PURE__ */ jsxRuntime.jsx("h3", { className: classNames?.heading ?? defaultHeading, children: question.name }),
+        renderHelpText()
+      ] });
     case "text_field":
       return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classNames?.fieldWrapper ?? defaultFieldWrapper, children: [
         renderLabel(),
@@ -146,25 +149,120 @@ function FormField({
         renderHelpText(),
         renderError()
       ] });
-    case "date":
-      return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classNames?.fieldWrapper ?? defaultFieldWrapper, children: [
-        renderLabel(),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "input",
-          {
-            id: inputId,
-            type: "date",
-            value: value || "",
-            onChange: (e) => onChange(e.target.value),
-            min: question.settings?.min?.toString(),
-            max: question.settings?.max?.toString(),
-            className: inputClasses,
-            ...ariaProps
+    case "date": {
+      const raw = typeof value === "string" ? value : "";
+      const match2 = raw.match(/^(\d{0,4})-?(\d{0,2})-?(\d{0,2})$/);
+      const yearPart = match2?.[1] ?? "";
+      const monthPart = match2?.[2] ? String(Number(match2[2])) : "";
+      const dayPart = match2?.[3] ? String(Number(match2[3])) : "";
+      const dayId = `${inputId}-day`;
+      const monthId = `${inputId}-month`;
+      const yearId = `${inputId}-year`;
+      const buildValue = (d, m, y) => {
+        const dt = d.trim();
+        const mt = m.trim();
+        const yt = y.trim();
+        if (!dt && !mt && !yt) return "";
+        if (/^\d{1,2}$/.test(dt) && /^\d{1,2}$/.test(mt) && /^\d{4}$/.test(yt)) {
+          const dn = Number(dt);
+          const mn = Number(mt);
+          const yn = Number(yt);
+          const date = new Date(yn, mn - 1, dn);
+          if (date.getFullYear() === yn && date.getMonth() === mn - 1 && date.getDate() === dn) {
+            return `${String(yn).padStart(4, "0")}-${String(mn).padStart(2, "0")}-${String(dn).padStart(2, "0")}`;
           }
-        ),
-        renderHelpText(),
-        renderError()
-      ] });
+        }
+        return "";
+      };
+      const dateInputBase = classNames?.dateInput ?? classNames?.input ?? defaultInput;
+      const dateInputCls = hasError ? cx(dateInputBase, classNames?.inputError ?? defaultInputError) : dateInputBase;
+      const sublabelCls = classNames?.dateInputLabel ?? "block text-xs font-medium mb-1 text-gray-700";
+      const itemCls = classNames?.dateInputItem ?? "flex flex-col";
+      const groupCls = classNames?.dateInputGroup ?? "flex flex-row gap-3 items-end";
+      const legendCls = classNames?.dateLegend ?? labelClasses;
+      const fieldsetCls = classNames?.dateFieldset ?? (classNames?.fieldWrapper ?? defaultFieldWrapper);
+      const handleSubChange = (part, v) => {
+        const sanitized = v.replace(/[^\d]/g, "");
+        const next = {
+          day: part === "day" ? sanitized : dayPart,
+          month: part === "month" ? sanitized : monthPart,
+          year: part === "year" ? sanitized : yearPart
+        };
+        const combined = buildValue(next.day, next.month, next.year);
+        onChange(combined);
+      };
+      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: "*" })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: groupCls, role: "group", "aria-labelledby": void 0, children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: itemCls, children: [
+                /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: dayId, className: sublabelCls, children: "Day" }),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "input",
+                  {
+                    id: dayId,
+                    type: "text",
+                    inputMode: "numeric",
+                    pattern: "[0-9]*",
+                    maxLength: 2,
+                    value: dayPart,
+                    onChange: (e) => handleSubChange("day", e.target.value),
+                    className: cx(dateInputCls, "w-16"),
+                    "aria-invalid": hasError ? true : void 0,
+                    "aria-required": question.required || void 0
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: itemCls, children: [
+                /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: monthId, className: sublabelCls, children: "Month" }),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "input",
+                  {
+                    id: monthId,
+                    type: "text",
+                    inputMode: "numeric",
+                    pattern: "[0-9]*",
+                    maxLength: 2,
+                    value: monthPart,
+                    onChange: (e) => handleSubChange("month", e.target.value),
+                    className: cx(dateInputCls, "w-16"),
+                    "aria-invalid": hasError ? true : void 0,
+                    "aria-required": question.required || void 0
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: itemCls, children: [
+                /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: yearId, className: sublabelCls, children: "Year" }),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "input",
+                  {
+                    id: yearId,
+                    type: "text",
+                    inputMode: "numeric",
+                    pattern: "[0-9]*",
+                    maxLength: 4,
+                    value: yearPart,
+                    onChange: (e) => handleSubChange("year", e.target.value),
+                    className: cx(dateInputCls, "w-24"),
+                    "aria-invalid": hasError ? true : void 0,
+                    "aria-required": question.required || void 0
+                  }
+                )
+              ] })
+            ] }),
+            renderHelpText(),
+            renderError()
+          ]
+        }
+      );
+    }
     case "number":
       return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classNames?.fieldWrapper ?? defaultFieldWrapper, children: [
         renderLabel(),