@chekinapp/ui 0.0.4 → 0.0.6

package/dist/index.cjs

@@ -115,6 +115,7 @@ __export(index_exports, {
   ErrorMessage: () => ErrorMessage,
   ExternalLink: () => ExternalLink,
   FeatureCard: () => FeatureCard,
+  FieldErrorMessage: () => FieldErrorMessage,
   FieldTrigger: () => FieldTrigger,
   FileInputButton: () => FileInputButton,
   FormBox: () => FormBox,
@@ -3593,27 +3594,31 @@ function HelpTooltip({
   className,
   contentClassName,
   size = 16,
-  label = "More info"
+  label = "More info",
+  triggerAs = "button"
 }) {
+  const triggerClassName = cn(
+    "relative flex shrink-0 cursor-help items-center justify-center rounded-full",
+    "text-chekin-gray-2 outline-none transition-colors hover:text-chekin-blue",
+    triggerAs === "button" && "focus-visible:shadow-chekin-focus",
+    className
+  );
+  const triggerStyle = { width: size, height: size };
+  const triggerContent = /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(import_jsx_runtime57.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(import_lucide_react16.CircleQuestionMark, { "aria-hidden": "true", style: { width: size, height: size } }),
+    /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("span", { className: "absolute -left-0.5 -top-0.5 h-5 w-5" })
+  ] });
   return /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(TooltipProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(TooltipRoot, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(TooltipTrigger, { asChild: true, onClick, children: /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(TooltipTrigger, { asChild: true, onClick, children: triggerAs === "button" ? /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
       "button",
       {
         type: "button",
         "aria-label": label,
-        className: cn(
-          "relative flex shrink-0 cursor-help items-center justify-center rounded-full",
-          "text-chekin-gray-2 outline-none transition-colors hover:text-chekin-blue",
-          "focus-visible:shadow-chekin-focus",
-          className
-        ),
-        style: { width: size, height: size },
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(import_lucide_react16.CircleQuestionMark, { "aria-hidden": "true", style: { width: size, height: size } }),
-          /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("span", { className: "absolute -left-0.5 -top-0.5 h-5 w-5" })
-        ]
+        className: triggerClassName,
+        style: triggerStyle,
+        children: triggerContent
       }
-    ) }),
+    ) : /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("span", { "aria-label": label, className: triggerClassName, style: triggerStyle, children: triggerContent }) }),
     /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
       TooltipContent,
       {
@@ -5848,38 +5853,70 @@ var import_lucide_react30 = require("lucide-react");
 var import_react_i18next18 = require("react-i18next");
 var import_jsx_runtime87 = require("react/jsx-runtime");
 function SearchInput({
+  disabled,
+  invalid,
+  label,
+  loading,
   onReset,
+  optional,
   placeholder,
+  tooltip,
   wrapperClassName,
   className,
   ...props
 }) {
   const { t } = (0, import_react_i18next18.useTranslation)();
   const placeholderText = placeholder || `${t("search_property")}...`;
-  return /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)("div", { className: cn("input-wrapper relative", wrapperClassName), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(import_lucide_react30.Search, { className: "absolute left-4 top-1/2 h-5 w-5 -translate-y-1/2 text-chekin-gray-2" }),
-    /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(
-      Input,
-      {
-        ...props,
-        type: "text",
-        placeholder: placeholderText,
-        className: cn(
-          "w-full py-3 pl-12 pr-10 text-base text-chekin-navy focus:border-chekin-gray-3",
-          className
+  const isBlocked = Boolean(disabled) || Boolean(loading);
+  const optionalLabel = optional ? typeof optional === "string" ? optional : t("optional") : void 0;
+  const hasLabelMeta = Boolean(optionalLabel) || Boolean(tooltip);
+  return /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)("div", { className: cn("input-wrapper", wrapperClassName), children: [
+    (label || hasLabelMeta) && /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)("div", { className: "mb-2 inline-flex max-w-full items-center gap-1.5 text-sm font-medium text-chekin-navy", children: [
+      label && /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("span", { className: "min-w-0 truncate", children: label }),
+      optionalLabel && /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("span", { className: "shrink-0 text-xs font-normal text-chekin-gray-2", children: optionalLabel }),
+      tooltip && /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(HelpTooltip, { content: tooltip, side: "top", size: 16 })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)("div", { className: "relative", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(import_lucide_react30.Search, { className: "absolute left-4 top-1/2 h-5 w-5 -translate-y-1/2 text-chekin-gray-2" }),
+      /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(
+        Input,
+        {
+          ...props,
+          type: "text",
+          disabled: isBlocked,
+          placeholder: placeholderText,
+          "aria-busy": loading,
+          "aria-invalid": invalid,
+          className: cn(
+            "w-full py-3 pl-12 pr-10 text-base text-chekin-navy focus:border-chekin-gray-3",
+            (loading || onReset) && "pr-20",
+            invalid && "border-[var(--status-danger)] text-[var(--status-danger)] placeholder:text-[var(--status-danger)]",
+            loading && "cursor-progress",
+            className
+          )
+        }
+      ),
+      (loading || onReset) && /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)("div", { className: "absolute right-2 top-1/2 flex -translate-y-1/2 items-center gap-1", children: [
+        loading && /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(
+          import_lucide_react30.Loader2,
+          {
+            "aria-hidden": "true",
+            className: "h-5 w-5 animate-spin text-chekin-gray-2"
+          }
+        ),
+        onReset && /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(
+          Button,
+          {
+            variant: "ghost",
+            onClick: onReset,
+            disabled: isBlocked,
+            className: "h-7 w-7 p-0 text-chekin-gray-2",
+            "aria-label": t("reset_search"),
+            children: /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(import_lucide_react30.X, { className: "h-5 w-5" })
+          }
         )
-      }
-    ),
-    onReset && /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(
-      Button,
-      {
-        variant: "ghost",
-        onClick: onReset,
-        className: "absolute right-2 top-1/2 h-7 w-7 -translate-y-1/2 p-0 text-chekin-gray-2",
-        "aria-label": t("reset_search"),
-        children: /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(import_lucide_react30.X, { className: "h-5 w-5" })
-      }
-    )
+      ] })
+    ] })
   ] });
 }
 
@@ -8094,7 +8131,7 @@ function WideButton({ className, disabled, ...props }) {
 
 // src/datepicker/DatePicker.tsx
 var React30 = __toESM(require("react"), 1);
-var import_lucide_react41 = require("lucide-react");
+var import_lucide_react42 = require("lucide-react");
 
 // src/drawer/Drawer.tsx
 var React27 = __toESM(require("react"), 1);
@@ -8277,6 +8314,13 @@ function stripTime(date) {
 function isValidDate(value) {
   return value instanceof Date && !Number.isNaN(value.getTime());
 }
+function normalizeDateValue(value) {
+  if (value === "" || value === null || value === void 0) {
+    return null;
+  }
+  const date = value instanceof Date ? value : new Date(value);
+  return isValidDate(date) ? date : null;
+}
 function clampDate(date, minDate, maxDate) {
   const normalizedDate = stripTime(date);
   const normalizedMinDate = isValidDate(minDate) ? stripTime(minDate) : null;
@@ -8941,6 +8985,8 @@ var DEVICE = {
 
 // src/field-trigger/FieldTrigger.tsx
 var React29 = __toESM(require("react"), 1);
+var import_lucide_react41 = require("lucide-react");
+var import_react_i18next22 = require("react-i18next");
 
 // src/field-error-message/FieldErrorMessage.tsx
 var import_lucide_react40 = require("lucide-react");
@@ -8998,27 +9044,60 @@ var FieldTrigger = React29.forwardRef(
     placeholder,
     disabled,
     error,
+    loading,
+    optional,
+    tooltip,
     describedBy,
     className,
     contentClassName,
     trailingAdornment,
     forceFloatingLabel = false,
+    forceLabelText = false,
     hideErrorMessage = false,
     children,
     onClick,
     onKeyDown,
     ...props
   }, ref) => {
+    const { t } = (0, import_react_i18next22.useTranslation)();
     const hasValue = Boolean(valueText);
     const isRaised = hasValue || forceFloatingLabel;
-    const animatedLabel = isRaised ? labelText ?? label : label ?? placeholder;
+    const optionalLabel = optional ? typeof optional === "string" ? optional : t("optional") : void 0;
+    const visibleLabelText = labelText ?? label;
+    const hasLabelMeta = Boolean(optionalLabel) || Boolean(tooltip);
+    const resolvedLabelText = visibleLabelText && hasLabelMeta ? /* @__PURE__ */ (0, import_jsx_runtime122.jsxs)("span", { className: "inline-flex max-w-full items-center gap-1.5 align-middle", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime122.jsx)("span", { className: "min-w-0 truncate", children: visibleLabelText }),
+      optionalLabel && /* @__PURE__ */ (0, import_jsx_runtime122.jsxs)("span", { className: "shrink-0 text-[12px] relative top-[1px] font-normal leading-4 text-current opacity-70", children: [
+        "(",
+        optionalLabel,
+        ")"
+      ] }),
+      tooltip && /* @__PURE__ */ (0, import_jsx_runtime122.jsx)(
+        HelpTooltip,
+        {
+          content: tooltip,
+          side: "top",
+          size: 16,
+          triggerAs: as === "button" ? "span" : "button",
+          className: "pointer-events-auto text-current opacity-70 hover:text-current hover:opacity-100"
+        }
+      )
+    ] }) : visibleLabelText;
+    const animatedLabel = forceLabelText ? resolvedLabelText ?? placeholder : isRaised ? resolvedLabelText : label ?? placeholder;
     const isAirbnbVariant = variant === "airbnb";
+    const hasInvalidState = Boolean(error);
+    const errorMessage = typeof error === "string" ? error : void 0;
+    const isBlocked = Boolean(disabled) || Boolean(loading);
+    const resolvedTrailingAdornment = loading || trailingAdornment ? /* @__PURE__ */ (0, import_jsx_runtime122.jsxs)("span", { className: "flex items-center gap-2", children: [
+      trailingAdornment,
+      loading && /* @__PURE__ */ (0, import_jsx_runtime122.jsx)(import_lucide_react41.Loader2, { "aria-hidden": "true", className: "h-5 w-5 animate-spin text-[#7A8399]" })
+    ] }) : void 0;
     const sharedClasses = cn(
       "relative flex border w-full items-center bg-[var(--form-background-color,#fff)] text-left transition-colors focus-visible:outline-none",
       isAirbnbVariant ? "rounded-[var(--form-input-border-radius,12px)] border-[var(--form-border-color,#8c8c8c)] pl-4 pr-4 focus-visible:ring-2 focus-visible:ring-[var(--form-title-color,#222222)] focus-visible:ring-offset-2" : "rounded-[10px] px-3.5 focus-visible:border-[#315EFB]",
       isAirbnbVariant ? isRaised ? "min-h-[60px]" : "h-[60px]" : "min-h-[48px]",
-      error ? isAirbnbVariant ? "border-[var(--status-danger)] bg-[var(--form-error-background,#FFF5F3)]" : "border-[var(--status-danger)] bg-white" : isAirbnbVariant ? "border-[var(--form-border-color,#8c8c8c)]" : "border-[#A8A8A4] bg-white",
-      disabled ? "cursor-not-allowed opacity-50" : isAirbnbVariant ? "cursor-pointer" : "cursor-text",
+      hasInvalidState ? isAirbnbVariant ? "border-[var(--status-danger)] bg-[var(--form-error-background,#FFF5F3)]" : "border-[var(--status-danger)] bg-white" : isAirbnbVariant ? "border-[var(--form-border-color,#8c8c8c)]" : "border-[#A8A8A4] bg-white",
+      disabled ? "cursor-not-allowed opacity-50" : loading ? "cursor-progress" : isAirbnbVariant ? "cursor-pointer" : "cursor-text",
       className
     );
     const sharedContent = /* @__PURE__ */ (0, import_jsx_runtime122.jsxs)(import_jsx_runtime122.Fragment, { children: [
@@ -9036,9 +9115,10 @@ var FieldTrigger = React29.forwardRef(
               {
                 id: labelId,
                 className: cn(
-                  "pointer-events-none absolute left-0 origin-left truncate transition-all duration-200 ease-out",
+                  "absolute left-0 origin-left truncate transition-all duration-200 ease-out",
+                  hasLabelMeta ? "" : "pointer-events-none",
                   isAirbnbVariant ? isRaised ? "top-0 translate-y-0 text-xs leading-5" : "top-1/2 -translate-y-1/2 text-[16px] leading-7" : isRaised ? "-top-2 translate-y-0 bg-[var(--form-background-color,#fff)] px-1 text-[12px] font-medium leading-4" : "top-1/2 -translate-y-1/2 text-[16px] leading-6",
-                  error ? "text-[var(--status-danger)]" : isAirbnbVariant ? "text-[var(--form-placeholder-color,#6c6c6c)]" : "text-[#7A8399]"
+                  hasInvalidState ? "text-[var(--status-danger)]" : isAirbnbVariant ? "text-[var(--form-placeholder-color,#6c6c6c)]" : "text-[#7A8399]"
                 ),
                 children: animatedLabel
               }
@@ -9050,7 +9130,7 @@ var FieldTrigger = React29.forwardRef(
                 className: cn(
                   "absolute left-0 block truncate transition-all duration-200 ease-out",
                   isAirbnbVariant ? "bottom-0 translate-y-0 text-[16px] leading-6 opacity-100" : "bottom-[11px] text-[16px] leading-6",
-                  error ? "text-[var(--status-danger)]" : "text-[var(--form-field-text-color,#222222)]"
+                  hasInvalidState ? "text-[var(--status-danger)]" : "text-[var(--form-field-text-color,#222222)]"
                 ),
                 children: valueText
               }
@@ -9058,7 +9138,7 @@ var FieldTrigger = React29.forwardRef(
           ]
         }
       ),
-      trailingAdornment && /* @__PURE__ */ (0, import_jsx_runtime122.jsx)(
+      resolvedTrailingAdornment && /* @__PURE__ */ (0, import_jsx_runtime122.jsx)(
         "span",
         {
           "aria-hidden": "true",
@@ -9066,7 +9146,7 @@ var FieldTrigger = React29.forwardRef(
             "pointer-events-none absolute top-1/2 -translate-y-1/2",
             isAirbnbVariant ? "right-5" : "right-4"
           ),
-          children: trailingAdornment
+          children: resolvedTrailingAdornment
         }
       )
     ] });
@@ -9080,10 +9160,11 @@ var FieldTrigger = React29.forwardRef(
           type: "button",
           "aria-labelledby": hasValue && valueId ? `${labelId} ${valueId}` : labelId,
           "aria-describedby": describedBy,
-          "aria-invalid": Boolean(error),
-          disabled,
-          onClick,
-          onKeyDown,
+          "aria-invalid": hasInvalidState,
+          "aria-busy": loading,
+          disabled: isBlocked,
+          onClick: isBlocked ? void 0 : onClick,
+          onKeyDown: isBlocked ? void 0 : onKeyDown,
           className: sharedClasses,
           ...props,
           children: sharedContent
@@ -9095,16 +9176,17 @@ var FieldTrigger = React29.forwardRef(
           ref,
           "aria-labelledby": hasValue && valueId ? `${labelId} ${valueId}` : labelId,
           "aria-describedby": describedBy,
-          "aria-invalid": Boolean(error),
-          "aria-disabled": disabled,
-          onClick,
-          onKeyDown,
+          "aria-invalid": hasInvalidState,
+          "aria-busy": loading,
+          "aria-disabled": isBlocked,
+          onClick: isBlocked ? void 0 : onClick,
+          onKeyDown: isBlocked ? void 0 : onKeyDown,
           className: sharedClasses,
           ...props,
           children: sharedContent
         }
       ),
-      error && !hideErrorMessage && /* @__PURE__ */ (0, import_jsx_runtime122.jsx)(FieldErrorMessage, { id: errorId, message: error })
+      errorMessage && !hideErrorMessage && /* @__PURE__ */ (0, import_jsx_runtime122.jsx)(FieldErrorMessage, { id: errorId, message: errorMessage })
     ] });
   }
 );
@@ -9124,6 +9206,10 @@ var DatePicker = React30.forwardRef(
     placeholder = "Select a date",
     disabled,
     error,
+    invalid,
+    loading,
+    optional,
+    tooltip,
     className,
     name,
     minDate,
@@ -9146,11 +9232,18 @@ var DatePicker = React30.forwardRef(
     const monthLabels = React30.useMemo(() => getMonthLabels(locale), [locale]);
     const resolvedMinDate = React30.useMemo(() => minDate ?? DEFAULT_MIN_DATE, [minDate]);
     const resolvedMaxDate = React30.useMemo(() => maxDate ?? /* @__PURE__ */ new Date(), [maxDate]);
+    const normalizedValue = React30.useMemo(() => normalizeDateValue(value), [value]);
+    const normalizedDefaultValue = React30.useMemo(
+      () => normalizeDateValue(defaultValue),
+      [defaultValue]
+    );
     const resolvedValue = React30.useMemo(
-      () => value ? clampDate(value, resolvedMinDate, resolvedMaxDate) : null,
-      [resolvedMaxDate, resolvedMinDate, value]
+      () => normalizedValue ? clampDate(normalizedValue, resolvedMinDate, resolvedMaxDate) : null,
+      [normalizedValue, resolvedMaxDate, resolvedMinDate]
     );
     const hasValue = Boolean(resolvedValue);
+    const isBlocked = Boolean(disabled) || Boolean(loading);
+    const triggerError = error ?? invalid;
     const {
       dayIndex,
       dayListRef,
@@ -9171,34 +9264,51 @@ var DatePicker = React30.forwardRef(
     } = useDatePickerWheel({
       isOpen,
       value: resolvedValue,
-      defaultValue,
+      defaultValue: normalizedDefaultValue,
       minDate: resolvedMinDate,
       maxDate: resolvedMaxDate
     });
-    const handleOpenChange = React30.useCallback((nextOpen) => {
-      setIsOpen(nextOpen);
-      if (!nextOpen) {
-        internalRef.current?.focus();
-      }
-    }, []);
+    const handleOpenChange = React30.useCallback(
+      (nextOpen) => {
+        if (isBlocked && nextOpen) return;
+        setIsOpen(nextOpen);
+        if (!nextOpen) {
+          internalRef.current?.focus();
+        }
+      },
+      [isBlocked]
+    );
     const handleDone = React30.useCallback(() => {
+      if (isBlocked) return;
       onChange(clampDate(draftDate, resolvedMinDate, resolvedMaxDate));
       handleOpenChange(false);
-    }, [draftDate, handleOpenChange, onChange, resolvedMaxDate, resolvedMinDate]);
+    }, [
+      draftDate,
+      handleOpenChange,
+      isBlocked,
+      onChange,
+      resolvedMaxDate,
+      resolvedMinDate
+    ]);
     const handleTriggerClick = React30.useCallback(() => {
-      if (disabled) return;
+      if (isBlocked) return;
       setIsOpen(true);
-    }, [disabled]);
+    }, [isBlocked]);
     const handleTriggerKeyDown = React30.useCallback(
       (event) => {
-        if (disabled) return;
+        if (isBlocked) return;
         if (event.key === "ArrowDown" || event.key === "ArrowUp" || event.key === "Enter" || event.key === " ") {
           event.preventDefault();
           setIsOpen(true);
         }
       },
-      [disabled]
+      [isBlocked]
     );
+    React30.useEffect(() => {
+      if (isBlocked) {
+        setIsOpen(false);
+      }
+    }, [isBlocked]);
     return /* @__PURE__ */ (0, import_jsx_runtime123.jsxs)("div", { className: cn("relative w-full max-w-[425px]", className), children: [
       name && /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(
         "input",
@@ -9225,12 +9335,16 @@ var DatePicker = React30.forwardRef(
           valueText: resolvedValue ? formatValue(resolvedValue) : void 0,
           placeholder,
           disabled,
-          error,
+          error: triggerError,
+          loading,
+          optional,
+          tooltip,
+          forceLabelText: Boolean(optional) || Boolean(tooltip),
           "aria-haspopup": "dialog",
           "aria-expanded": isOpen,
           onClick: handleTriggerClick,
           onKeyDown: handleTriggerKeyDown,
-          trailingAdornment: /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(import_lucide_react41.Calendar, { className: "h-5 w-5 text-[#1F1F1B]", strokeWidth: 2 })
+          trailingAdornment: /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(import_lucide_react42.Calendar, { className: "h-5 w-5 text-[#1F1F1B]", strokeWidth: 2 })
         }
       ),
       /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(
@@ -9385,6 +9499,10 @@ var AirbnbInput = React31.forwardRef(
     topLabel,
     helperText,
     error,
+    invalid,
+    loading,
+    optional,
+    tooltip,
     wrapperClassName,
     fieldClassName,
     contentClassName,
@@ -9409,7 +9527,7 @@ var AirbnbInput = React31.forwardRef(
     const fieldId = `${inputId}-field`;
     const labelId = `${inputId}-label`;
     const errorId = `${inputId}-error`;
-    const accessibleLabel = label ?? placeholder;
+    const accessibleLabel = placeholder ?? label;
     const [isFocused, setIsFocused] = React31.useState(false);
     const [currentValue, setCurrentValue] = React31.useState(
       () => value != null ? getInputValue(value) : getInputValue(defaultValue)
@@ -9417,6 +9535,10 @@ var AirbnbInput = React31.forwardRef(
     const resolvedValue = value != null ? getInputValue(value) : currentValue;
     const hasValue = resolvedValue.length > 0;
     const shouldShowLabel = hasValue || isFocused;
+    const hasInvalidState = Boolean(error) || Boolean(invalid);
+    const triggerError = error ?? invalid;
+    const hasLabelMeta = Boolean(optional) || Boolean(tooltip);
+    const isBlocked = Boolean(disabled) || Boolean(loading);
     React31.useLayoutEffect(() => {
       const nextValue = value != null ? getInputValue(value) : getInputValue(inputRef.current?.value);
       setCurrentValue((prevValue) => prevValue === nextValue ? prevValue : nextValue);
@@ -9465,7 +9587,10 @@ var AirbnbInput = React31.forwardRef(
         labelText: helperText ?? label,
         placeholder: placeholder ?? label,
         disabled,
-        error,
+        error: triggerError,
+        loading,
+        optional,
+        tooltip,
         describedBy: error && renderErrorMessage ? errorId : void 0,
         className: cn(
           variant === "airbnb" ? "px-4 focus-within:ring-2 focus-within:ring-[#1F1F1B] focus-within:ring-offset-2" : "px-3.5 focus-within:border-[#315EFB]",
@@ -9478,6 +9603,7 @@ var AirbnbInput = React31.forwardRef(
         ),
         trailingAdornment,
         forceFloatingLabel: shouldShowLabel,
+        forceLabelText: hasLabelMeta,
         hideErrorMessage: !renderErrorMessage,
         children: /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(
           "input",
@@ -9486,21 +9612,23 @@ var AirbnbInput = React31.forwardRef(
             id: inputId,
             ref: setRefs,
             type,
-            disabled,
+            disabled: isBlocked,
             value,
             defaultValue,
             onChange: handleChange,
             onFocus: handleFocus,
             onBlur: handleBlur,
             placeholder: "",
-            "aria-invalid": Boolean(error),
+            "aria-invalid": hasInvalidState,
+            "aria-busy": loading,
             "aria-describedby": error && renderErrorMessage ? errorId : void 0,
-            "aria-labelledby": accessibleLabel ? labelId : void 0,
+            "aria-label": accessibleLabel && hasLabelMeta ? accessibleLabel : void 0,
+            "aria-labelledby": accessibleLabel && !hasLabelMeta ? labelId : void 0,
             className: cn(
               "absolute left-0 h-6 w-full border-0 bg-transparent p-0 text-[16px] leading-6 text-[#1F1F1B] outline-none placeholder:text-[#7A8399]",
               variant === "airbnb" ? "bottom-0" : "bottom-[12px]",
-              error ? "text-[var(--status-danger)] placeholder:text-[var(--status-danger)]" : "",
-              disabled ? "cursor-not-allowed" : "",
+              hasInvalidState ? "text-[var(--status-danger)] placeholder:text-[var(--status-danger)]" : "",
+              disabled ? "cursor-not-allowed" : loading ? "cursor-progress" : "",
               inputClassName,
               className
             )
@@ -9514,7 +9642,7 @@ AirbnbInput.displayName = "Input";
 
 // src/airbnb/phone-field/PhoneField.tsx
 var React37 = __toESM(require("react"), 1);
-var import_lucide_react43 = require("lucide-react");
+var import_lucide_react44 = require("lucide-react");
 
 // src/airbnb/select/Select.tsx
 var React36 = __toESM(require("react"), 1);
@@ -9863,7 +9991,7 @@ function SelectMobileContent({
 
 // src/airbnb/select/SelectTrigger.tsx
 var React32 = __toESM(require("react"), 1);
-var import_lucide_react42 = require("lucide-react");
+var import_lucide_react43 = require("lucide-react");
 var import_jsx_runtime130 = require("react/jsx-runtime");
 var SelectTrigger2 = React32.forwardRef(
   ({
@@ -9875,6 +10003,9 @@ var SelectTrigger2 = React32.forwardRef(
     helperText,
     valueLabel,
     disabled,
+    loading,
+    optional,
+    tooltip,
     error,
     hideErrorMessage,
     labelId,
@@ -9906,12 +10037,16 @@ var SelectTrigger2 = React32.forwardRef(
         placeholder: helperText,
         describedBy,
         error,
+        loading,
+        optional,
+        tooltip,
+        forceLabelText: Boolean(optional) || Boolean(tooltip),
         hideErrorMessage,
         disabled,
         onClick,
         onKeyDown,
         trailingAdornment: /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
-          import_lucide_react42.ChevronDown,
+          import_lucide_react43.ChevronDown,
           {
             className: open ? "h-6 w-6 rotate-180 text-[#1F1F1B] transition-transform" : "h-6 w-6 text-[#1F1F1B] transition-transform"
           }
@@ -10336,7 +10471,11 @@ var AirbnbSelect = React36.forwardRef(function AirbnbSelect2({
   getValueLabel,
   renderTrigger,
   disabled,
+  loading,
+  optional,
+  tooltip,
   error,
+  invalid,
   hideErrorMessage,
   className,
   menuClassName,
@@ -10351,6 +10490,8 @@ var AirbnbSelect = React36.forwardRef(function AirbnbSelect2({
   const containerRef = React36.useRef(null);
   const hasValue = Boolean(value);
   const helperText = placeholder ?? label;
+  const isBlocked = Boolean(disabled) || Boolean(loading);
+  const triggerError = error ?? invalid;
   const {
     triggerId,
     labelId,
@@ -10376,7 +10517,7 @@ var AirbnbSelect = React36.forwardRef(function AirbnbSelect2({
     isOpen,
     options,
     value,
-    disabled
+    disabled: isBlocked
   });
   const {
     highlightedIndex,
@@ -10393,13 +10534,18 @@ var AirbnbSelect = React36.forwardRef(function AirbnbSelect2({
     isOpen,
     options,
     value,
-    disabled,
+    disabled: isBlocked,
     onChange
   });
   const combinedRef = useCombinedRef(ref, desktopTriggerRef);
   const activeMobileIndex = getOptionIndex(options, pendingValue);
   const valueLabel = value ? getValueLabel?.(value) ?? String(value.label) : void 0;
   useOutsideClick(containerRef, isOpen && !isMobile ? () => setIsOpen(false) : null);
+  React36.useEffect(() => {
+    if (isBlocked) {
+      setIsOpen(false);
+    }
+  }, [isBlocked]);
   React36.useEffect(
     function setCorrectOptionIfThereIsOnlyValue() {
       if (value?.value === void 0 || value.value === null || value.label !== "") {
@@ -10414,24 +10560,26 @@ var AirbnbSelect = React36.forwardRef(function AirbnbSelect2({
   );
   const handleMobileOpenChange = React36.useCallback(
     (nextOpen) => {
+      if (isBlocked && nextOpen) return;
       setIsOpen(nextOpen);
       syncPendingValue(value ?? null);
       if (!nextOpen) {
         focusTrigger();
       }
     },
-    [focusTrigger, syncPendingValue, value]
+    [focusTrigger, isBlocked, syncPendingValue, value]
   );
   const handleMobileDone = React36.useCallback(() => {
+    if (isBlocked) return;
     const finalOption = pendingValue;
     if (finalOption && finalOption.value !== value?.value) {
       onChange(finalOption);
     }
     setIsOpen(false);
     focusTrigger();
-  }, [focusTrigger, onChange, pendingValue, value]);
+  }, [focusTrigger, isBlocked, onChange, pendingValue, value]);
   const handleTriggerClick = React36.useCallback(() => {
-    if (disabled) return;
+    if (isBlocked) return;
     setIsOpen((prev) => {
       const nextOpen = !prev;
       if (isMobile) {
@@ -10439,10 +10587,10 @@ var AirbnbSelect = React36.forwardRef(function AirbnbSelect2({
       }
       return nextOpen;
     });
-  }, [disabled, isMobile, syncPendingValue, value]);
+  }, [isBlocked, isMobile, syncPendingValue, value]);
   const handleRootTriggerKeyDown = (event) => {
     if (isMobile) {
-      if (disabled) return;
+      if (isBlocked) return;
       if (event.key === "ArrowDown" || event.key === "ArrowUp" || event.key === "Enter" || event.key === " ") {
         event.preventDefault();
         syncPendingValue(value ?? null);
@@ -10494,8 +10642,12 @@ var AirbnbSelect = React36.forwardRef(function AirbnbSelect2({
       helperText,
       value,
       valueLabel,
-      disabled,
+      disabled: isBlocked,
+      loading,
+      optional,
+      tooltip,
       error,
+      invalid,
       listboxId,
       describedBy,
       triggerRef: combinedRef,
@@ -10513,7 +10665,10 @@ var AirbnbSelect = React36.forwardRef(function AirbnbSelect2({
         helperText,
         valueLabel,
         disabled,
-        error,
+        loading,
+        optional,
+        tooltip,
+        error: triggerError,
         hideErrorMessage,
         labelId,
         valueId,
@@ -10538,7 +10693,7 @@ var AirbnbSelect = React36.forwardRef(function AirbnbSelect2({
         doneLabel,
         errorId: describedErrorId,
         options,
-        disabled,
+        disabled: isBlocked,
         menuClassName,
         scrollTop: mobileScrollTop,
         activeIndex: activeMobileIndex,
@@ -10569,7 +10724,7 @@ var AirbnbSelect = React36.forwardRef(function AirbnbSelect2({
         onKeyDown: (event) => {
           handleMenuKeyDown(event, () => setIsOpen(false));
         },
-        disabled,
+        disabled: isBlocked,
         menuClassName,
         dropdownClassName,
         listRef: desktopListRef,
@@ -10593,7 +10748,12 @@ var PhoneField = React37.forwardRef(
     options,
     placeholder = "Phone number",
     disabled,
+    codeReadOnly,
     error,
+    invalid,
+    loading,
+    optional,
+    tooltip,
     className,
     name,
     codeName,
@@ -10615,6 +10775,9 @@ var PhoneField = React37.forwardRef(
       [codeOptions, value?.code]
     );
     const combinedValue = value?.code || value?.number ? `${value?.code ?? ""}${value?.number ?? ""}` : "";
+    const hasInvalidState = Boolean(error) || Boolean(invalid);
+    const isBlocked = Boolean(disabled) || Boolean(loading);
+    const isCodeBlocked = isBlocked || Boolean(codeReadOnly);
     return /* @__PURE__ */ (0, import_jsx_runtime132.jsxs)("div", { className: cn("w-full max-w-[425px]", className), children: [
       name && /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("input", { type: "hidden", name, value: combinedValue, disabled }),
       codeName && /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(
@@ -10657,7 +10820,9 @@ var PhoneField = React37.forwardRef(
             }),
             label: `${label} country code`,
             placeholder: codePlaceholder,
-            disabled,
+            disabled: isCodeBlocked,
+            loading,
+            invalid,
             className: "max-w-none shrink-0 basis-[96px]",
             mobileTitle: mobileTitle ?? "Select country code",
             dropdownClassName: "right-auto w-[280px]",
@@ -10667,6 +10832,7 @@ var PhoneField = React37.forwardRef(
               open,
               variant: selectVariant,
               disabled: triggerDisabled,
+              loading: triggerLoading,
               listboxId,
               triggerRef,
               onClick,
@@ -10682,19 +10848,21 @@ var PhoneField = React37.forwardRef(
                 "aria-haspopup": "listbox",
                 "aria-expanded": open,
                 "aria-controls": listboxId,
+                "aria-busy": triggerLoading,
+                "aria-invalid": hasInvalidState,
                 disabled: triggerDisabled,
                 onClick,
                 onKeyDown,
                 className: cn(
                   "flex w-full items-center justify-center gap-2 border border-r-0 text-[16px] font-medium leading-6 transition-colors focus-visible:outline-none",
                   selectVariant === "airbnb" ? "h-full min-h-[60px] rounded-l-[16px] rounded-r-none px-4 focus-visible:ring-2 focus-visible:ring-[#1F1F1B] focus-visible:ring-offset-2" : "min-h-[48px] rounded-l-[10px] rounded-r-none px-3.5 focus-visible:border-[#315EFB]",
-                  error ? "border-[var(--status-danger)] bg-[#F2F2F2] text-[var(--status-danger)]" : selectVariant === "airbnb" ? "border-[#8C8C8C] bg-[#F4F4F2] text-[#1F1F1B]" : "border-[#A8A8A4] bg-white text-[#1F1F1B]",
-                  triggerDisabled ? "cursor-not-allowed opacity-50" : "cursor-pointer"
+                  hasInvalidState ? "border-[var(--status-danger)] bg-[#F2F2F2] text-[var(--status-danger)]" : selectVariant === "airbnb" ? "border-[#8C8C8C] bg-[#F4F4F2] text-[#1F1F1B]" : "border-[#A8A8A4] bg-white text-[#1F1F1B]",
+                  triggerDisabled ? "cursor-not-allowed opacity-50" : triggerLoading ? "cursor-progress" : "cursor-pointer"
                 ),
                 children: [
                   /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("span", { children: valueLabel ?? codePlaceholder }),
                   /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(
-                    import_lucide_react43.ChevronDown,
+                    import_lucide_react44.ChevronDown,
                     {
                       className: cn("h-5 w-5 transition-transform", open ? "rotate-180" : ""),
                       strokeWidth: 2
@@ -10718,6 +10886,10 @@ var PhoneField = React37.forwardRef(
             placeholder,
             disabled,
             error,
+            invalid,
+            loading,
+            optional,
+            tooltip,
             renderErrorMessage: false,
             wrapperClassName: "min-w-0 flex-1",
             fieldClassName: cn(
@@ -10740,14 +10912,14 @@ PhoneField.displayName = "PhoneField";
 
 // src/airbnb/search-input/SearchInput.tsx
 var React38 = __toESM(require("react"), 1);
-var import_react_i18next22 = require("react-i18next");
-var import_lucide_react44 = require("lucide-react");
+var import_react_i18next23 = require("react-i18next");
+var import_lucide_react45 = require("lucide-react");
 var import_jsx_runtime133 = require("react/jsx-runtime");
 var AirbnbSearchInput = React38.forwardRef(({ onReset, placeholder, wrapperClassName, ...props }, ref) => {
-  const { t } = (0, import_react_i18next22.useTranslation)();
+  const { t } = (0, import_react_i18next23.useTranslation)();
   const placeholderText = placeholder || t("search_property") + "...";
   return /* @__PURE__ */ (0, import_jsx_runtime133.jsxs)("div", { className: cn("input-wrapper relative", wrapperClassName), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(import_lucide_react44.Search, { className: "absolute left-4 top-1/2 h-5 w-5 -translate-y-1/2 transform text-[#9696B9]" }),
+    /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(import_lucide_react45.Search, { className: "absolute left-4 top-1/2 h-5 w-5 -translate-y-1/2 transform text-[#9696B9]" }),
     /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(
       "input",
       {
@@ -10773,7 +10945,7 @@ var AirbnbSearchInput = React38.forwardRef(({ onReset, placeholder, wrapperClass
         variant: "ghost",
         onClick: onReset,
         className: "absolute right-0 top-1/2 h-5 w-5 -translate-y-1/2 transform text-[#9696B9]",
-        children: /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(import_lucide_react44.X, { className: "h-5 w-5" })
+        children: /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(import_lucide_react45.X, { className: "h-5 w-5" })
       }
     )
   ] });
@@ -10782,7 +10954,7 @@ AirbnbSearchInput.displayName = "SearchInput";
 
 // src/searchable-select/SearchableSelect.tsx
 var React39 = __toESM(require("react"), 1);
-var import_lucide_react45 = require("lucide-react");
+var import_lucide_react46 = require("lucide-react");
 var import_react_virtual = require("@tanstack/react-virtual");
 var import_jsx_runtime134 = require("react/jsx-runtime");
 var ROW_HEIGHT = 48;
@@ -10812,6 +10984,9 @@ var SearchableSelectInternal = ({
   getValueLabel,
   disabled,
   error,
+  invalid,
+  optional,
+  tooltip,
   hideErrorMessage,
   name,
   className,
@@ -10848,10 +11023,16 @@ var SearchableSelectInternal = ({
   );
   const helperText = placeholder ?? label;
   const valueLabel = value ? getValueLabel?.(value) ?? String(value.label) : void 0;
+  const isBlocked = Boolean(disabled) || Boolean(loading);
+  const triggerError = error ?? invalid;
   const describedBy = error && !hideErrorMessage ? errorId : void 0;
   const activeOptionId = highlightedIndex >= 0 ? getOptionId(reactId, highlightedIndex) : void 0;
   useOutsideClick(containerRef, open && !isMobile ? () => closeSelect() : null);
   React39.useEffect(() => {
+    if (isBlocked) {
+      setSelectOpen(false);
+      return;
+    }
     if (!open) return;
     const frameId = window.requestAnimationFrame(() => {
       inputRef.current?.focus();
@@ -10859,7 +11040,7 @@ var SearchableSelectInternal = ({
     return () => {
       window.cancelAnimationFrame(frameId);
     };
-  }, [open]);
+  }, [isBlocked, open]);
   React39.useEffect(() => {
     if (!open) {
       setHighlightedIndex(-1);
@@ -10880,7 +11061,7 @@ var SearchableSelectInternal = ({
     }
   }
   function openSelect() {
-    if (disabled) return;
+    if (isBlocked) return;
     setSelectOpen(true);
   }
   function closeSelect() {
@@ -10893,7 +11074,7 @@ var SearchableSelectInternal = ({
     onSearchChange?.(nextValue);
   }
   function handleSelect(option) {
-    if (disabled || option.isDisabled) return;
+    if (isBlocked || option.isDisabled) return;
     onChange(option);
     setSelectOpen(false, { restoreFocus: true });
   }
@@ -10905,7 +11086,7 @@ var SearchableSelectInternal = ({
     }
   }
   function handleTriggerKeyDown(event) {
-    if (disabled) return;
+    if (isBlocked) return;
     if (event.key === "Enter" || event.key === " " || event.key === "ArrowDown" || event.key === "ArrowUp") {
       event.preventDefault();
       openSelect();
@@ -10984,7 +11165,11 @@ var SearchableSelectInternal = ({
         valueText: valueLabel,
         placeholder: helperText,
         describedBy,
-        error,
+        error: triggerError,
+        loading,
+        optional,
+        tooltip,
+        forceLabelText: Boolean(optional) || Boolean(tooltip),
         hideErrorMessage,
         disabled,
         onClick: () => {
@@ -10996,7 +11181,7 @@ var SearchableSelectInternal = ({
         },
         onKeyDown: handleTriggerKeyDown,
         trailingAdornment: /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(
-          import_lucide_react45.ChevronDown,
+          import_lucide_react46.ChevronDown,
           {
             className: cn(
               "h-6 w-6 text-[#1F1F1B] transition-transform",
@@ -11011,6 +11196,7 @@ var SearchableSelectInternal = ({
       {
         open,
         onOpenChange: (nextOpen) => {
+          if (isBlocked && nextOpen) return;
           if (nextOpen) {
             setSelectOpen(true);
             return;
@@ -11093,7 +11279,7 @@ function SearchableSelectContent({
   return /* @__PURE__ */ (0, import_jsx_runtime134.jsxs)("div", { className: "p-2", children: [
     /* @__PURE__ */ (0, import_jsx_runtime134.jsxs)("div", { className: "relative mb-2", children: [
       /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(
-        import_lucide_react45.Search,
+        import_lucide_react46.Search,
         {
           "aria-hidden": "true",
           className: "absolute left-4 top-1/2 h-5 w-5 -translate-y-1/2 text-[#9696B9]"
@@ -11286,6 +11472,7 @@ function getNextEnabledIndex(options, startIndex, step) {
   ErrorMessage,
   ExternalLink,
   FeatureCard,
+  FieldErrorMessage,
   FieldTrigger,
   FileInputButton,
   FormBox,