@planetaexo/design-system 0.4.7 → 0.4.9

package/dist/index.d.cts

@@ -571,6 +571,15 @@ interface RegistrationFormProps {
     defaultValues?: RegistrationFormValues;
     onChange?: (values: RegistrationFormValues) => void;
     onSubmit?: (values: RegistrationFormValues) => void;
+    /**
+     * Synchronous format/business validator called inside handleSubmit.
+     * Return a record of fieldId → error message to block submit and show inline errors.
+     * Called after the required-empty check, so values are guaranteed non-empty for required fields.
+     * For validating optional fields or additional format checks, use this instead of onSubmit.
+     */
+    onValidate?: (values: RegistrationFormValues) => Record<string, string>;
+    /** @deprecated Use onValidate instead. Per-field errors injected by the parent. */
+    externalErrors?: Record<string, string>;
     terms?: RegistrationTerms;
     includeTerms?: boolean;
     loading?: boolean;
@@ -580,7 +589,7 @@ interface RegistrationFormProps {
     labels?: RegistrationFormLabels;
     className?: string;
 }
-declare function RegistrationForm({ logo, logoAlt, heroImage, heroImageAlt, title, subtitle, adventure, booking, traveller, fields, values, defaultValues, onChange, onSubmit, terms, includeTerms, loading, error, defaultPhoneCountry, dateFormatter, labels, className, }: RegistrationFormProps): react_jsx_runtime.JSX.Element;
+declare function RegistrationForm({ logo, logoAlt, heroImage, heroImageAlt, title, subtitle, adventure, booking, traveller, fields, values, defaultValues, onChange, onSubmit, onValidate, externalErrors, terms, includeTerms, loading, error, defaultPhoneCountry, dateFormatter, labels, className, }: RegistrationFormProps): react_jsx_runtime.JSX.Element;
 interface RegistrationSuccessCardProps {
     title?: string;
     message?: string;

package/dist/index.d.ts

@@ -571,6 +571,15 @@ interface RegistrationFormProps {
     defaultValues?: RegistrationFormValues;
     onChange?: (values: RegistrationFormValues) => void;
     onSubmit?: (values: RegistrationFormValues) => void;
+    /**
+     * Synchronous format/business validator called inside handleSubmit.
+     * Return a record of fieldId → error message to block submit and show inline errors.
+     * Called after the required-empty check, so values are guaranteed non-empty for required fields.
+     * For validating optional fields or additional format checks, use this instead of onSubmit.
+     */
+    onValidate?: (values: RegistrationFormValues) => Record<string, string>;
+    /** @deprecated Use onValidate instead. Per-field errors injected by the parent. */
+    externalErrors?: Record<string, string>;
     terms?: RegistrationTerms;
     includeTerms?: boolean;
     loading?: boolean;
@@ -580,7 +589,7 @@ interface RegistrationFormProps {
     labels?: RegistrationFormLabels;
     className?: string;
 }
-declare function RegistrationForm({ logo, logoAlt, heroImage, heroImageAlt, title, subtitle, adventure, booking, traveller, fields, values, defaultValues, onChange, onSubmit, terms, includeTerms, loading, error, defaultPhoneCountry, dateFormatter, labels, className, }: RegistrationFormProps): react_jsx_runtime.JSX.Element;
+declare function RegistrationForm({ logo, logoAlt, heroImage, heroImageAlt, title, subtitle, adventure, booking, traveller, fields, values, defaultValues, onChange, onSubmit, onValidate, externalErrors, terms, includeTerms, loading, error, defaultPhoneCountry, dateFormatter, labels, className, }: RegistrationFormProps): react_jsx_runtime.JSX.Element;
 interface RegistrationSuccessCardProps {
     title?: string;
     message?: string;

package/dist/index.js

@@ -4500,6 +4500,8 @@ function RegistrationForm({
   defaultValues,
   onChange,
   onSubmit,
+  onValidate,
+  externalErrors,
   terms,
   includeTerms = false,
   loading = false,
@@ -4531,6 +4533,7 @@ function RegistrationForm({
     )
   );
   const [submitAttempted, setSubmitAttempted] = React21.useState(false);
+  const [validationErrors, setValidationErrors] = React21.useState({});
   React21.useEffect(() => {
     if (isControlled) return;
     setInternal((prev) => {
@@ -4556,12 +4559,15 @@ function RegistrationForm({
   const termsEnabled = includeTerms && !!terms;
   const acceptControl = (_a = terms == null ? void 0 : terms.acceptControl) != null ? _a : "checkbox";
   const handleSubmit = (e) => {
+    var _a2;
     e.preventDefault();
     setSubmitAttempted(true);
     const hasRequiredEmpty = sortedFields.some(
       (f) => f.required && isFieldEmpty(f, current[f.id])
     );
-    if (hasRequiredEmpty || termsEnabled && !termsAccepted) return;
+    const extraErrors = (_a2 = onValidate == null ? void 0 : onValidate(current)) != null ? _a2 : {};
+    setValidationErrors(extraErrors);
+    if (hasRequiredEmpty || Object.keys(extraErrors).length > 0 || termsEnabled && !termsAccepted) return;
     onSubmit == null ? void 0 : onSubmit(current);
   };
   const dateRange = formatDateRange(adventure, dateFormatter);
@@ -4573,7 +4579,24 @@ function RegistrationForm({
         fieldErrors[field.id] = L.requiredFieldError;
       }
     }
+    for (const [id, msg] of Object.entries(validationErrors)) {
+      if (!fieldErrors[id]) fieldErrors[id] = msg;
+    }
+    if (externalErrors) {
+      for (const [id, msg] of Object.entries(externalErrors)) {
+        if (!fieldErrors[id]) fieldErrors[id] = msg;
+      }
+    }
   }
+  const firstErrorFieldId = Object.keys(fieldErrors)[0];
+  React21.useEffect(() => {
+    if (!submitAttempted || !firstErrorFieldId) return;
+    const timer = setTimeout(() => {
+      const elem = document.getElementById(`rf-${firstErrorFieldId}`);
+      if (elem) elem.scrollIntoView({ behavior: "smooth", block: "center" });
+    }, 50);
+    return () => clearTimeout(timer);
+  }, [submitAttempted, firstErrorFieldId, validationErrors]);
   return /* @__PURE__ */ jsxs(
     "form",
     {
@@ -4625,31 +4648,31 @@ function RegistrationForm({
             /* @__PURE__ */ jsx("h2", { className: "text-2xl font-black uppercase tracking-wide text-foreground font-heading leading-tight", children: title }),
             /* @__PURE__ */ jsx("p", { className: "mt-1.5 text-sm text-muted-foreground font-ui", children: subtitle != null ? subtitle : L.formSubtitle })
           ] }),
-          hasTripInfo && /* @__PURE__ */ jsx(FormSection2, { title: L.tripInfoSectionTitle, children: /* @__PURE__ */ jsxs("dl", { className: "grid grid-cols-1 gap-x-6 gap-y-3 text-sm font-ui sm:grid-cols-[max-content_1fr]", children: [
-            adventure && /* @__PURE__ */ jsxs(Fragment, { children: [
+          hasTripInfo && /* @__PURE__ */ jsx(FormSection2, { title: L.tripInfoSectionTitle, children: /* @__PURE__ */ jsxs("dl", { className: "flex flex-col gap-y-3 text-sm font-ui", children: [
+            adventure && /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-x-4", children: [
               /* @__PURE__ */ jsx("dt", { className: "text-muted-foreground", children: L.adventureLabel }),
-              /* @__PURE__ */ jsx("dd", { className: "text-foreground font-medium", children: adventure.name })
+              /* @__PURE__ */ jsx("dd", { className: "text-foreground font-medium text-right min-w-0 break-words", children: adventure.name })
             ] }),
-            dateRange && /* @__PURE__ */ jsxs(Fragment, { children: [
+            dateRange && /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-x-4", children: [
               /* @__PURE__ */ jsx("dt", { className: "text-muted-foreground", children: (adventure == null ? void 0 : adventure.startDate) && (adventure == null ? void 0 : adventure.endDate) ? "Dates" : "Date" }),
-              /* @__PURE__ */ jsx("dd", { className: "text-foreground", children: dateRange })
+              /* @__PURE__ */ jsx("dd", { className: "text-foreground text-right min-w-0", children: dateRange })
             ] }),
-            (adventure == null ? void 0 : adventure.partnerName) && /* @__PURE__ */ jsxs(Fragment, { children: [
+            (adventure == null ? void 0 : adventure.partnerName) && /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-x-4", children: [
               /* @__PURE__ */ jsx("dt", { className: "text-muted-foreground", children: L.partnerLabel }),
-              /* @__PURE__ */ jsx("dd", { className: "text-foreground", children: adventure.partnerName })
+              /* @__PURE__ */ jsx("dd", { className: "text-foreground text-right min-w-0", children: adventure.partnerName })
             ] }),
-            booking && /* @__PURE__ */ jsxs(Fragment, { children: [
+            booking && /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-x-4", children: [
               /* @__PURE__ */ jsx("dt", { className: "text-muted-foreground", children: L.bookingLabel }),
-              /* @__PURE__ */ jsx("dd", { className: "text-foreground font-mono tabular-nums", children: booking.id })
+              /* @__PURE__ */ jsx("dd", { className: "text-foreground font-mono tabular-nums text-right min-w-0", children: booking.id })
             ] }),
-            traveller && /* @__PURE__ */ jsxs(Fragment, { children: [
+            traveller && /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-x-4", children: [
               /* @__PURE__ */ jsx("dt", { className: "text-muted-foreground", children: L.travellerLabel }),
-              /* @__PURE__ */ jsx("dd", { className: "text-foreground font-medium", children: traveller.fullName })
+              /* @__PURE__ */ jsx("dd", { className: "text-foreground font-medium text-right min-w-0 break-words", children: traveller.fullName })
             ] })
           ] }) }),
           /* @__PURE__ */ jsx(FormSection2, { title: L.detailsSectionTitle, children: sortedFields.map((field) => {
             var _a2;
-            return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1.5", children: [
+            return /* @__PURE__ */ jsxs("div", { id: `rf-${field.id}`, className: "flex flex-col gap-1.5", children: [
               /* @__PURE__ */ jsx(
                 FieldRenderer,
                 {
@@ -4837,9 +4860,9 @@ function RegistrationSuccessCard({
       /* @__PURE__ */ jsx("h2", { className: "text-2xl font-black uppercase tracking-wide text-foreground font-heading leading-tight", children: title }),
       /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground font-ui", children: message })
     ] }),
-    sorted.length > 0 && /* @__PURE__ */ jsx(FormSection2, { title: answersTitle, children: /* @__PURE__ */ jsx("dl", { className: "grid grid-cols-1 gap-x-6 gap-y-3 text-sm font-ui sm:grid-cols-[max-content_1fr]", children: sorted.map((f) => /* @__PURE__ */ jsxs(React21.Fragment, { children: [
+    sorted.length > 0 && /* @__PURE__ */ jsx(FormSection2, { title: answersTitle, children: /* @__PURE__ */ jsx("dl", { className: "flex flex-col gap-y-3 text-sm font-ui", children: sorted.map((f) => /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-x-4", children: [
       /* @__PURE__ */ jsx("dt", { className: "text-muted-foreground", children: f.label }),
-      /* @__PURE__ */ jsx("dd", { className: "text-foreground", children: (formatAnswer != null ? formatAnswer : ((field, v) => defaultFormatAnswer(field, v, dateFormatter)))(
+      /* @__PURE__ */ jsx("dd", { className: "text-foreground text-right min-w-0 break-words", children: (formatAnswer != null ? formatAnswer : ((field, v) => defaultFormatAnswer(field, v, dateFormatter)))(
         f,
         answers[f.id]
       ) })