@planetaexo/design-system 0.4.21 → 0.5.0

package/dist/index.cjs

@@ -16,6 +16,7 @@ var checkbox = require('@base-ui/react/checkbox');
 var accordion = require('@base-ui/react/accordion');
 var mergeProps = require('@base-ui/react/merge-props');
 var useRender = require('@base-ui/react/use-render');
+var reactDom = require('react-dom');
 var input = require('@base-ui/react/input');
 
 function _interopNamespace(e) {
@@ -628,7 +629,8 @@ var PHONE_COUNTRIES = [...PHONE_PRIORITY, ...PHONE_REST];
 function PhoneCountrySelect({
   value,
   onChange,
-  className
+  className,
+  disabled
 }) {
   var _a;
   const [open, setOpen] = React22__namespace.useState(false);
@@ -652,6 +654,7 @@ function PhoneCountrySelect({
     activeEl == null ? void 0 : activeEl.scrollIntoView({ block: "nearest" });
   }, [open]);
   const handleSelect = (code) => {
+    if (disabled) return;
     onChange(code);
     setOpen(false);
   };
@@ -660,14 +663,19 @@ function PhoneCountrySelect({
       "button",
       {
         type: "button",
-        onClick: () => setOpen((v) => !v),
+        onClick: () => {
+          if (disabled) return;
+          setOpen((v) => !v);
+        },
         "aria-haspopup": "listbox",
         "aria-expanded": open,
+        disabled,
         className: cn(
           "flex h-14 items-center gap-1.5 rounded-l-lg border border-r-0 border-border bg-muted",
           "px-3 font-ui text-sm text-foreground transition-colors",
           "focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary",
-          open && "border-primary ring-1 ring-primary"
+          open && "border-primary ring-1 ring-primary",
+          disabled && "opacity-50 cursor-not-allowed pointer-events-none"
         ),
         children: [
           /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-base leading-none", children: selected.flag }),
@@ -939,7 +947,8 @@ function BirthDateField({
   value,
   onChange,
   error,
-  className
+  className,
+  disabled
 }) {
   const [open, setOpen] = React22__namespace.useState(false);
   const [text, setText] = React22__namespace.useState(
@@ -1004,8 +1013,9 @@ function BirthDateField({
                 inputMode: "numeric",
                 value: text,
                 onChange: handleTextChange,
+                disabled,
                 placeholder: "dd/mm/yyyy",
-                className: "block h-full w-full bg-transparent px-3 pt-5 pb-2 text-base text-foreground font-ui focus:outline-none placeholder:text-muted-foreground/50"
+                className: "block h-full w-full bg-transparent px-3 pt-5 pb-2 text-base text-foreground font-ui focus:outline-none placeholder:text-muted-foreground/50 disabled:opacity-50 disabled:cursor-not-allowed"
               }
             )
           ] }),
@@ -1013,10 +1023,14 @@ function BirthDateField({
             "button",
             {
               type: "button",
-              onClick: () => setOpen((v) => !v),
+              onClick: () => {
+                if (disabled) return;
+                setOpen((v) => !v);
+              },
               tabIndex: -1,
+              disabled,
               "aria-label": "Open calendar",
-              className: "px-3 h-full flex items-center text-muted-foreground hover:text-primary transition-colors focus:outline-none",
+              className: "px-3 h-full flex items-center text-muted-foreground hover:text-primary transition-colors focus:outline-none disabled:opacity-50 disabled:cursor-not-allowed",
               children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CalendarIcon, { className: "h-4 w-4" })
             }
           )
@@ -1149,7 +1163,8 @@ function CountrySearchField({
   label = "Country",
   countries,
   placeholder = "Search country\u2026",
-  className
+  className,
+  disabled
 }) {
   var _a;
   const list = countries != null ? countries : COUNTRIES;
@@ -1173,6 +1188,7 @@ function CountrySearchField({
     return () => document.removeEventListener("mousedown", handler);
   }, [open]);
   const handleOpen = () => {
+    if (disabled) return;
     setOpen(true);
     setQuery("");
     setTimeout(() => {
@@ -1191,9 +1207,11 @@ function CountrySearchField({
       {
         type: "button",
         onClick: handleOpen,
+        disabled,
         className: cn(
           "relative flex w-full items-center rounded-lg border border-border bg-background h-14 px-3 text-left transition-colors",
-          open && "border-primary ring-1 ring-primary"
+          open && "border-primary ring-1 ring-primary",
+          disabled && "opacity-50 cursor-not-allowed pointer-events-none"
         ),
         children: [
           /* @__PURE__ */ jsxRuntime.jsxs(
@@ -4203,14 +4221,15 @@ function isFieldEmpty(field, value) {
       return typeof value === "string" ? !value.trim() : false;
   }
 }
-function PhoneInput({ id, label, required, value, onChange, error }) {
+function PhoneInput({ id, label, required, value, onChange, error, disabled }) {
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full min-w-0", children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       PhoneCountrySelect,
       {
         value: value.country,
         onChange: (country) => onChange(__spreadProps(__spreadValues({}, value), { country })),
-        className: "shrink-0"
+        className: "shrink-0",
+        disabled
       }
     ),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative min-w-0 flex-1", children: [
@@ -4222,6 +4241,7 @@ function PhoneInput({ id, label, required, value, onChange, error }) {
           placeholder: " ",
           value: value.nationalNumber,
           required,
+          disabled,
           onChange: (e) => onChange(__spreadProps(__spreadValues({}, value), { nationalNumber: e.target.value })),
           className: cn(
             "peer block h-14 w-full rounded-r-lg border border-border bg-background",
@@ -4258,7 +4278,8 @@ function FloatingTextarea({
   optionalHint,
   value,
   onChange,
-  error
+  error,
+  disabled
 }) {
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
     /* @__PURE__ */ jsxRuntime.jsx(
@@ -4269,6 +4290,7 @@ function FloatingTextarea({
         rows: 5,
         value,
         required,
+        disabled,
         onChange: (e) => onChange(e.target.value),
         className: cn(
           "peer block w-full resize-none rounded-lg border border-border bg-background",
@@ -4297,7 +4319,7 @@ function FloatingTextarea({
     )
   ] });
 }
-function SelectField({ field, value, onChange, error }) {
+function SelectField({ field, value, onChange, error, disabled }) {
   var _a, _b, _c;
   const [open, setOpen] = React22__namespace.useState(false);
   const containerRef = React22__namespace.useRef(null);
@@ -4318,11 +4340,16 @@ function SelectField({ field, value, onChange, error }) {
       "button",
       {
         type: "button",
-        onClick: () => setOpen((o) => !o),
+        onClick: () => {
+          if (disabled) return;
+          setOpen((o) => !o);
+        },
+        disabled,
         className: cn(
           "relative flex w-full items-center rounded-lg border border-border bg-background h-14 px-3 text-left transition-colors",
           open && "border-primary ring-1 ring-primary",
-          error && !open && "border-destructive"
+          error && !open && "border-destructive",
+          disabled && "opacity-50 cursor-not-allowed pointer-events-none"
         ),
         children: [
           /* @__PURE__ */ jsxRuntime.jsxs(
@@ -4380,7 +4407,8 @@ function FieldRenderer({
   onChange,
   defaultPhoneCountry,
   labels,
-  error
+  error,
+  disabled
 }) {
   var _a, _b;
   const fieldId = `rf-${field.id}`;
@@ -4397,6 +4425,7 @@ function FieldRenderer({
           {
             label: labels.firstNameLabel,
             required: field.required,
+            disabled,
             value: v.firstName,
             onChange: (e) => onChange(__spreadProps(__spreadValues({}, v), { firstName: e.target.value })),
             error: error && !v.firstName.trim() ? error : void 0
@@ -4407,6 +4436,7 @@ function FieldRenderer({
           {
             label: labels.lastNameLabel,
             required: field.required,
+            disabled,
             value: v.lastName,
             onChange: (e) => onChange(__spreadProps(__spreadValues({}, v), { lastName: e.target.value })),
             error: error && !v.lastName.trim() ? error : void 0
@@ -4425,7 +4455,8 @@ function FieldRenderer({
         required: field.required,
         value: v,
         onChange,
-        error
+        error,
+        disabled
       }
     );
   }
@@ -4443,6 +4474,7 @@ function FieldRenderer({
             {
               label: labels.emergencyContactFirstName,
               required: field.required,
+              disabled,
               value: v.contactName.firstName,
               onChange: (e) => onChange(__spreadProps(__spreadValues({}, v), {
                 contactName: __spreadProps(__spreadValues({}, v.contactName), {
@@ -4457,6 +4489,7 @@ function FieldRenderer({
             {
               label: labels.emergencyContactLastName,
               required: field.required,
+              disabled,
               value: v.contactName.lastName,
               onChange: (e) => onChange(__spreadProps(__spreadValues({}, v), {
                 contactName: __spreadProps(__spreadValues({}, v.contactName), {
@@ -4475,7 +4508,8 @@ function FieldRenderer({
             required: field.required,
             value: v.phone,
             onChange: (phone) => onChange(__spreadProps(__spreadValues({}, v), { phone })),
-            error: error && !v.phone.nationalNumber.trim() ? error : void 0
+            error: error && !v.phone.nationalNumber.trim() ? error : void 0,
+            disabled
           }
         )
       ] })
@@ -4491,7 +4525,8 @@ function FieldRenderer({
         optionalHint: !field.required ? labels.optionalLabel : void 0,
         value: typeof value === "string" ? value : "",
         onChange,
-        error
+        error,
+        disabled
       }
     );
   }
@@ -4502,7 +4537,8 @@ function FieldRenderer({
         field,
         value: typeof value === "string" ? value : "",
         onChange: (v) => onChange(v),
-        error
+        error,
+        disabled
       }
     );
   }
@@ -4532,6 +4568,7 @@ function FieldRenderer({
                     value: opt.value,
                     checked: value === opt.value,
                     required: field.required,
+                    disabled,
                     onChange: () => onChange(opt.value),
                     className: "h-4 w-4 shrink-0 accent-primary cursor-pointer"
                   }
@@ -4555,6 +4592,7 @@ function FieldRenderer({
           {
             type: "checkbox",
             checked: value === true,
+            disabled,
             onChange: (e) => onChange(e.target.checked),
             className: "h-4 w-4 shrink-0 accent-primary cursor-pointer"
           }
@@ -4580,6 +4618,7 @@ function FieldRenderer({
                 {
                   type: "checkbox",
                   checked,
+                  disabled,
                   onChange: (e) => onChange(
                     e.target.checked ? [...selected, opt.value] : selected.filter((x) => x !== opt.value)
                   ),
@@ -4601,7 +4640,8 @@ function FieldRenderer({
         label: field.label,
         required: field.required,
         value: typeof value === "string" ? value : "",
-        onChange: (code) => onChange(code)
+        onChange: (code) => onChange(code),
+        disabled
       }
     );
   }
@@ -4613,7 +4653,8 @@ function FieldRenderer({
         required: field.required,
         value: asDate(value),
         onChange: (d) => onChange(d),
-        error
+        error,
+        disabled
       }
     );
   }
@@ -4624,6 +4665,7 @@ function FieldRenderer({
         label: field.label,
         required: field.required,
         type: "number",
+        disabled,
         value: value == null ? "" : String(value),
         onChange: (e) => onChange(e.target.value),
         error
@@ -4637,6 +4679,7 @@ function FieldRenderer({
       label: field.label,
       required: field.required,
       type: htmlType,
+      disabled,
       value: typeof value === "string" ? value : "",
       onChange: (e) => onChange(e.target.value),
       error
@@ -4667,7 +4710,8 @@ function RegistrationForm({
   defaultPhoneCountry = "BR",
   dateFormatter,
   labels,
-  className
+  className,
+  readOnly = false
 }) {
   var _a;
   const L = React22__namespace.useMemo(
@@ -4841,7 +4885,8 @@ function RegistrationForm({
                   onChange: (v) => setField(field.id, v),
                   defaultPhoneCountry,
                   labels: L,
-                  error: fieldErrors[field.id]
+                  error: fieldErrors[field.id],
+                  disabled: readOnly
                 }
               ),
               ((_a2 = field.helpText) == null ? void 0 : _a2.trim()) && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-muted-foreground font-ui leading-relaxed", children: field.helpText.trim() })
@@ -4864,6 +4909,7 @@ function RegistrationForm({
                         type: "checkbox",
                         checked: termsAccepted,
                         required: true,
+                        disabled: readOnly,
                         onChange: (e) => setField(TERMS_ACCEPT_KEY, e.target.checked),
                         className: "mt-0.5 h-4 w-4 shrink-0 accent-primary cursor-pointer"
                       }
@@ -4899,6 +4945,7 @@ function RegistrationForm({
                               name: "registration-terms-accept",
                               checked: termsAccepted,
                               required: true,
+                              disabled: readOnly,
                               onChange: () => setField(TERMS_ACCEPT_KEY, true),
                               className: "h-4 w-4 shrink-0 accent-primary cursor-pointer"
                             }
@@ -4915,6 +4962,7 @@ function RegistrationForm({
                           type: "radio",
                           name: "registration-terms-accept",
                           checked: current[TERMS_ACCEPT_KEY] === false,
+                          disabled: readOnly,
                           onChange: () => setField(TERMS_ACCEPT_KEY, false),
                           className: "h-4 w-4 shrink-0 accent-primary cursor-pointer"
                         }
@@ -4928,7 +4976,7 @@ function RegistrationForm({
             ] })
           ] }) }),
           error && /* @__PURE__ */ jsxRuntime.jsx("p", { role: "alert", className: "text-sm text-destructive font-ui", children: error }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-center pt-2", children: /* @__PURE__ */ jsxRuntime.jsx(
+          !readOnly && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-center pt-2", children: /* @__PURE__ */ jsxRuntime.jsx(
             "button",
             {
               type: "submit",
@@ -7900,6 +7948,66 @@ function ActivityCard({
     }
   );
 }
+var variantStyles = {
+  info: "bg-[oklch(0.96_0.015_174)] border-[#47bca9] text-[#2e2d2c]",
+  success: "bg-[oklch(0.96_0.055_160)] border-green-500 text-[#2e2d2c]",
+  warning: "bg-amber-50 border-amber-400 text-[#2e2d2c]",
+  error: "bg-red-50 border-red-400 text-[#2e2d2c]"
+};
+function Toast({
+  message,
+  variant = "info",
+  onClose,
+  duration = 6e3,
+  className
+}) {
+  const [mounted, setMounted] = React22__namespace.useState(false);
+  const [visible, setVisible] = React22__namespace.useState(true);
+  React22__namespace.useEffect(() => {
+    setMounted(true);
+  }, []);
+  React22__namespace.useEffect(() => {
+    if (duration === 0) return;
+    const t = setTimeout(() => {
+      setVisible(false);
+      setTimeout(() => onClose == null ? void 0 : onClose(), 300);
+    }, duration);
+    return () => clearTimeout(t);
+  }, [duration, onClose]);
+  if (!mounted || !visible) return null;
+  return reactDom.createPortal(
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        role: "alert",
+        className: cn(
+          "fixed top-4 left-4 z-[9999] flex items-start gap-3 rounded-lg border px-4 py-3 shadow-lg",
+          "max-w-sm text-sm font-ui leading-snug",
+          "animate-in fade-in slide-in-from-left-4 duration-300",
+          variantStyles[variant],
+          className
+        ),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1", children: message }),
+          onClose && /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              onClick: () => {
+                setVisible(false);
+                setTimeout(() => onClose(), 300);
+              },
+              className: "shrink-0 opacity-60 hover:opacity-100 transition-opacity",
+              "aria-label": "Fechar",
+              children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.XIcon, { size: 14 })
+            }
+          )
+        ]
+      }
+    ),
+    document.body
+  );
+}
 function PaymentModalShell({
   open,
   title,
@@ -8608,6 +8716,7 @@ exports.SiteHeader = SiteHeader;
 exports.TERMS_ACCEPT_KEY = TERMS_ACCEPT_KEY;
 exports.TermsSection = TermsSection;
 exports.ThemeToggle = ThemeToggle;
+exports.Toast = Toast;
 exports.TravellerFormInviteEmail = TravellerFormInviteEmail;
 exports.TripCard = TripCard;
 exports.TripHeader = TripHeader;