@planetaexo/design-system 0.4.8 → 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",
     {
@@ -4649,7 +4672,7 @@ function RegistrationForm({
           ] }) }),
           /* @__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,
                 {