@planetaexo/design-system 0.4.6 → 0.4.8

package/dist/index.d.cts

@@ -549,6 +549,7 @@ interface RegistrationFormLabels {
     nationalityLabel?: string;
     selectPlaceholder?: string;
     optionalLabel?: string;
+    requiredFieldError?: string;
 }
 interface RegistrationFormProps {
     /** Logo shown above the title. Defaults to "/logo-planetaexo.png" (matching Offer). Pass null to hide. */
@@ -656,9 +657,10 @@ interface BirthDateFieldProps {
     required?: boolean;
     value: Date | undefined;
     onChange: (date: Date | undefined) => void;
+    error?: string;
     className?: string;
 }
-declare function BirthDateField({ label, required, value, onChange, className, }: BirthDateFieldProps): react_jsx_runtime.JSX.Element;
+declare function BirthDateField({ label, required, value, onChange, error, className, }: BirthDateFieldProps): react_jsx_runtime.JSX.Element;
 
 interface FilterItem {
     id: string;

package/dist/index.d.ts

@@ -549,6 +549,7 @@ interface RegistrationFormLabels {
     nationalityLabel?: string;
     selectPlaceholder?: string;
     optionalLabel?: string;
+    requiredFieldError?: string;
 }
 interface RegistrationFormProps {
     /** Logo shown above the title. Defaults to "/logo-planetaexo.png" (matching Offer). Pass null to hide. */
@@ -656,9 +657,10 @@ interface BirthDateFieldProps {
     required?: boolean;
     value: Date | undefined;
     onChange: (date: Date | undefined) => void;
+    error?: string;
     className?: string;
 }
-declare function BirthDateField({ label, required, value, onChange, className, }: BirthDateFieldProps): react_jsx_runtime.JSX.Element;
+declare function BirthDateField({ label, required, value, onChange, error, className, }: BirthDateFieldProps): react_jsx_runtime.JSX.Element;
 
 interface FilterItem {
     id: string;

package/dist/index.js

@@ -320,14 +320,16 @@ var FloatingInput = React21.forwardRef(
 FloatingInput.displayName = "FloatingInput";
 var FloatingSelect = React21.forwardRef(
   (_a, ref) => {
-    var _b = _a, { label, error, id, className, required, children } = _b, props = __objRest(_b, ["label", "error", "id", "className", "required", "children"]);
+    var _b = _a, { label, error, id, className, required, children, value } = _b, props = __objRest(_b, ["label", "error", "id", "className", "required", "children", "value"]);
     const inputId = id != null ? id : React21.useId();
+    const hasValue = typeof value === "string" ? value !== "" : value !== void 0 && value !== null;
     return /* @__PURE__ */ jsxs("div", { className: cn("relative", className), children: [
       /* @__PURE__ */ jsx(
         "select",
         __spreadProps(__spreadValues({
           id: inputId,
           ref,
+          value,
           className: cn(
             "peer block w-full h-14 appearance-none rounded-lg border border-border bg-background",
             "px-3 pt-6 pb-2 text-base text-foreground font-ui",
@@ -361,7 +363,7 @@ var FloatingSelect = React21.forwardRef(
             "pointer-events-none absolute left-3 top-1/2 -translate-y-1/2",
             "text-base text-muted-foreground font-ui transition-all duration-150",
             "peer-focus:top-2 peer-focus:translate-y-0 peer-focus:text-xs peer-focus:text-primary",
-            "peer-not-placeholder-shown:top-2 peer-not-placeholder-shown:translate-y-0 peer-not-placeholder-shown:text-xs"
+            hasValue && "top-2 translate-y-0 text-xs"
           ),
           children: [
             label,
@@ -889,6 +891,7 @@ function BirthDateField({
   required,
   value,
   onChange,
+  error,
   className
 }) {
   const [open, setOpen] = React21.useState(false);
@@ -931,7 +934,7 @@ function BirthDateField({
       {
         className: cn(
           "flex items-center rounded-lg border border-border bg-background h-14 transition-colors",
-          open ? "border-primary ring-1 ring-primary" : "focus-within:border-primary focus-within:ring-1 focus-within:ring-primary"
+          error ? "border-destructive focus-within:border-destructive focus-within:ring-destructive" : open ? "border-primary ring-1 ring-primary" : "focus-within:border-primary focus-within:ring-1 focus-within:ring-primary"
         ),
         children: [
           /* @__PURE__ */ jsxs("div", { className: "relative flex-1 h-full", children: [
@@ -3963,7 +3966,7 @@ function BookingForm({
   );
 }
 var DEFAULT_LABELS3 = {
-  formSubtitle: "Free enquiry \u2013 no commitment",
+  formSubtitle: "To confirm your participation, please complete this short form. It's required for all travellers and helps us coordinate logistics with our local partners and tailor the experience to you.",
   detailsSectionTitle: "Your details",
   tripInfoSectionTitle: "Trip info",
   termsSectionTitle: "Terms & conditions",
@@ -3983,7 +3986,8 @@ var DEFAULT_LABELS3 = {
   emergencyContactPhoneLabel: "Contact phone",
   nationalityLabel: "Nationality",
   selectPlaceholder: "Select an option\u2026",
-  optionalLabel: "(optional)"
+  optionalLabel: "(optional)",
+  requiredFieldError: "Required"
 };
 var TERMS_ACCEPT_KEY = "__registrationTermsAccepted";
 function emptyName() {
@@ -4086,7 +4090,34 @@ function FormSection2({
     children
   ] });
 }
-function PhoneInput({ id, label, required, value, onChange }) {
+function isFieldEmpty(field, value) {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i;
+  if (value === void 0 || value === null) return true;
+  switch (field.type) {
+    case "phone": {
+      const p = value;
+      return !((_a = p == null ? void 0 : p.nationalNumber) == null ? void 0 : _a.trim());
+    }
+    case "name": {
+      const n = value;
+      return !((_b = n == null ? void 0 : n.firstName) == null ? void 0 : _b.trim()) && !((_c = n == null ? void 0 : n.lastName) == null ? void 0 : _c.trim());
+    }
+    case "emergencyContact": {
+      const ec = value;
+      return !((_e = (_d = ec == null ? void 0 : ec.contactName) == null ? void 0 : _d.firstName) == null ? void 0 : _e.trim()) && !((_g = (_f = ec == null ? void 0 : ec.contactName) == null ? void 0 : _f.lastName) == null ? void 0 : _g.trim()) && !((_i = (_h = ec == null ? void 0 : ec.phone) == null ? void 0 : _h.nationalNumber) == null ? void 0 : _i.trim());
+    }
+    case "checkbox":
+      if (Array.isArray(value)) return value.length === 0;
+      return value === false;
+    case "date":
+    case "birthDate":
+      if (value instanceof Date) return false;
+      return typeof value !== "string" || !value.trim();
+    default:
+      return typeof value === "string" ? !value.trim() : false;
+  }
+}
+function PhoneInput({ id, label, required, value, onChange, error }) {
   return /* @__PURE__ */ jsxs("div", { className: "flex w-full min-w-0", children: [
     /* @__PURE__ */ jsx(
       PhoneCountrySelect,
@@ -4110,7 +4141,8 @@ function PhoneInput({ id, label, required, value, onChange }) {
             "peer block h-14 w-full rounded-r-lg border border-border bg-background",
             "px-3 pt-5 pb-2 text-base text-foreground font-ui",
             "transition-colors placeholder-transparent",
-            "focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary"
+            "focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary",
+            error && "border-destructive focus:border-destructive focus:ring-destructive"
           )
         }
       ),
@@ -4139,7 +4171,8 @@ function FloatingTextarea({
   required,
   optionalHint,
   value,
-  onChange
+  onChange,
+  error
 }) {
   return /* @__PURE__ */ jsxs("div", { className: "relative", children: [
     /* @__PURE__ */ jsx(
@@ -4155,7 +4188,8 @@ function FloatingTextarea({
           "peer block w-full resize-none rounded-lg border border-border bg-background",
           "px-3 pt-6 pb-3 text-base text-foreground font-ui",
           "transition-colors placeholder-transparent",
-          "focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary"
+          "focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary",
+          error && "border-destructive focus:border-destructive focus:ring-destructive"
         )
       }
     ),
@@ -4182,7 +4216,8 @@ function FieldRenderer({
   value,
   onChange,
   defaultPhoneCountry,
-  labels
+  labels,
+  error
 }) {
   var _a, _b, _c;
   const fieldId = `rf-${field.id}`;
@@ -4200,7 +4235,8 @@ function FieldRenderer({
             label: labels.firstNameLabel,
             required: field.required,
             value: v.firstName,
-            onChange: (e) => onChange(__spreadProps(__spreadValues({}, v), { firstName: e.target.value }))
+            onChange: (e) => onChange(__spreadProps(__spreadValues({}, v), { firstName: e.target.value })),
+            error: error && !v.firstName.trim() ? error : void 0
           }
         ),
         /* @__PURE__ */ jsx(
@@ -4209,7 +4245,8 @@ function FieldRenderer({
             label: labels.lastNameLabel,
             required: field.required,
             value: v.lastName,
-            onChange: (e) => onChange(__spreadProps(__spreadValues({}, v), { lastName: e.target.value }))
+            onChange: (e) => onChange(__spreadProps(__spreadValues({}, v), { lastName: e.target.value })),
+            error: error && !v.lastName.trim() ? error : void 0
           }
         )
       ] })
@@ -4224,7 +4261,8 @@ function FieldRenderer({
         label: field.label,
         required: field.required,
         value: v,
-        onChange
+        onChange,
+        error
       }
     );
   }
@@ -4247,7 +4285,8 @@ function FieldRenderer({
                 contactName: __spreadProps(__spreadValues({}, v.contactName), {
                   firstName: e.target.value
                 })
-              }))
+              })),
+              error: error && !v.contactName.firstName.trim() ? error : void 0
             }
           ),
           /* @__PURE__ */ jsx(
@@ -4260,7 +4299,8 @@ function FieldRenderer({
                 contactName: __spreadProps(__spreadValues({}, v.contactName), {
                   lastName: e.target.value
                 })
-              }))
+              })),
+              error: error && !v.contactName.lastName.trim() ? error : void 0
             }
           )
         ] }),
@@ -4271,7 +4311,8 @@ function FieldRenderer({
             label: labels.emergencyContactPhoneLabel,
             required: field.required,
             value: v.phone,
-            onChange: (phone) => onChange(__spreadProps(__spreadValues({}, v), { phone }))
+            onChange: (phone) => onChange(__spreadProps(__spreadValues({}, v), { phone })),
+            error: error && !v.phone.nationalNumber.trim() ? error : void 0
           }
         )
       ] })
@@ -4286,7 +4327,8 @@ function FieldRenderer({
         required: field.required,
         optionalHint: !field.required ? labels.optionalLabel : void 0,
         value: typeof value === "string" ? value : "",
-        onChange
+        onChange,
+        error
       }
     );
   }
@@ -4299,6 +4341,7 @@ function FieldRenderer({
         required: field.required,
         value: typeof value === "string" ? value : "",
         onChange: (e) => onChange(e.target.value),
+        error,
         children: [
           /* @__PURE__ */ jsx("option", { value: "", disabled: true, hidden: true }),
           options.map((opt) => /* @__PURE__ */ jsx("option", { value: opt.value, children: opt.label }, opt.value))
@@ -4404,25 +4447,15 @@ function FieldRenderer({
       }
     );
   }
-  if (field.type === "date") {
-    return /* @__PURE__ */ jsx(
-      DatePickerField,
-      {
-        label: field.label,
-        required: field.required,
-        value: asDate(value),
-        onChange: (d) => onChange(d)
-      }
-    );
-  }
-  if (field.type === "birthDate") {
+  if (field.type === "date" || field.type === "birthDate") {
     return /* @__PURE__ */ jsx(
       BirthDateField,
       {
         label: field.label,
         required: field.required,
         value: asDate(value),
-        onChange: (d) => onChange(d)
+        onChange: (d) => onChange(d),
+        error
       }
     );
   }
@@ -4434,7 +4467,8 @@ function FieldRenderer({
         required: field.required,
         type: "number",
         value: value == null ? "" : String(value),
-        onChange: (e) => onChange(e.target.value)
+        onChange: (e) => onChange(e.target.value),
+        error
       }
     );
   }
@@ -4446,7 +4480,8 @@ function FieldRenderer({
       required: field.required,
       type: htmlType,
       value: typeof value === "string" ? value : "",
-      onChange: (e) => onChange(e.target.value)
+      onChange: (e) => onChange(e.target.value),
+      error
     }
   );
 }
@@ -4495,6 +4530,7 @@ function RegistrationForm({
       includeTerms
     )
   );
+  const [submitAttempted, setSubmitAttempted] = React21.useState(false);
   React21.useEffect(() => {
     if (isControlled) return;
     setInternal((prev) => {
@@ -4516,15 +4552,28 @@ function RegistrationForm({
     if (!isControlled) setInternal(next);
     onChange == null ? void 0 : onChange(next);
   };
+  const termsAccepted = current[TERMS_ACCEPT_KEY] === true;
+  const termsEnabled = includeTerms && !!terms;
+  const acceptControl = (_a = terms == null ? void 0 : terms.acceptControl) != null ? _a : "checkbox";
   const handleSubmit = (e) => {
     e.preventDefault();
+    setSubmitAttempted(true);
+    const hasRequiredEmpty = sortedFields.some(
+      (f) => f.required && isFieldEmpty(f, current[f.id])
+    );
+    if (hasRequiredEmpty || termsEnabled && !termsAccepted) return;
     onSubmit == null ? void 0 : onSubmit(current);
   };
-  const termsAccepted = current[TERMS_ACCEPT_KEY] === true;
-  const termsEnabled = includeTerms && !!terms;
-  const acceptControl = (_a = terms == null ? void 0 : terms.acceptControl) != null ? _a : "checkbox";
   const dateRange = formatDateRange(adventure, dateFormatter);
   const hasTripInfo = !!adventure || !!booking || !!traveller;
+  const fieldErrors = {};
+  if (submitAttempted) {
+    for (const field of sortedFields) {
+      if (field.required && isFieldEmpty(field, current[field.id])) {
+        fieldErrors[field.id] = L.requiredFieldError;
+      }
+    }
+  }
   return /* @__PURE__ */ jsxs(
     "form",
     {
@@ -4576,26 +4625,26 @@ 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) => {
@@ -4608,7 +4657,8 @@ function RegistrationForm({
                   value: current[field.id],
                   onChange: (v) => setField(field.id, v),
                   defaultPhoneCountry,
-                  labels: L
+                  labels: L,
+                  error: fieldErrors[field.id]
                 }
               ),
               ((_a2 = field.helpText) == null ? void 0 : _a2.trim()) && /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground font-ui leading-relaxed", children: field.helpText.trim() })
@@ -4787,9 +4837,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]
       ) })