@chekinapp/ui 0.0.6 → 0.0.8

package/dist/index.cjs

@@ -9203,6 +9203,7 @@ var DatePicker = React30.forwardRef(
     value,
     defaultValue,
     onChange,
+    onBlur,
     placeholder = "Select a date",
     disabled,
     error,
@@ -9309,7 +9310,7 @@ var DatePicker = React30.forwardRef(
         setIsOpen(false);
       }
     }, [isBlocked]);
-    return /* @__PURE__ */ (0, import_jsx_runtime123.jsxs)("div", { className: cn("relative w-full max-w-[425px]", className), children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime123.jsxs)("div", { className: cn("relative w-full max-w-[var(--max-field-width)]", className), children: [
       name && /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(
         "input",
         {
@@ -9344,6 +9345,7 @@ var DatePicker = React30.forwardRef(
           "aria-expanded": isOpen,
           onClick: handleTriggerClick,
           onKeyDown: handleTriggerKeyDown,
+          onBlur,
           trailingAdornment: /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(import_lucide_react42.Calendar, { className: "h-5 w-5 text-[#1F1F1B]", strokeWidth: 2 })
         }
       ),
@@ -9573,7 +9575,7 @@ var AirbnbInput = React31.forwardRef(
       setIsFocused(false);
       onBlur?.(event);
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime125.jsx)("div", { className: cn("w-full", wrapperClassName), children: /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime125.jsx)("div", { className: cn("w-full max-w-[var(--max-field-width)]", wrapperClassName), children: /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(
       FieldTrigger,
       {
         as: "div",
@@ -10015,7 +10017,8 @@ var SelectTrigger2 = React32.forwardRef(
     listboxId,
     describedBy,
     onClick,
-    onKeyDown
+    onKeyDown,
+    onBlur
   }, ref) => {
     return /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
       FieldTrigger,
@@ -10045,6 +10048,7 @@ var SelectTrigger2 = React32.forwardRef(
         disabled,
         onClick,
         onKeyDown,
+        onBlur,
         trailingAdornment: /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
           import_lucide_react43.ChevronDown,
           {
@@ -10461,9 +10465,10 @@ function useOutsideClick(elementRef, onOutsideClick, nested) {
 // src/airbnb/select/Select.tsx
 var import_jsx_runtime131 = require("react/jsx-runtime");
 var AirbnbSelect = React36.forwardRef(function AirbnbSelect2({
-  options,
+  options = [],
   value,
   onChange,
+  onBlur,
   variant = "default",
   label,
   topLabel,
@@ -10631,109 +10636,118 @@ var AirbnbSelect = React36.forwardRef(function AirbnbSelect2({
       handleMobileOpenChange(false);
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)("div", { ref: containerRef, className: cn("relative w-full max-w-[425px]", className), children: [
-    name && /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("input", { type: "hidden", name, value: value ? String(value.value) : "" }),
-    renderTrigger ? renderTrigger({
-      id: triggerId,
-      open: isOpen,
-      variant,
-      label,
-      topLabel,
-      helperText,
-      value,
-      valueLabel,
-      disabled: isBlocked,
-      loading,
-      optional,
-      tooltip,
-      error,
-      invalid,
-      listboxId,
-      describedBy,
-      triggerRef: combinedRef,
-      onClick: handleTriggerClick,
-      onKeyDown: handleRootTriggerKeyDown
-    }) : /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
-      SelectTrigger2,
-      {
-        id: triggerId,
-        ref: combinedRef,
-        open: isOpen,
-        variant,
-        label,
-        topLabel,
-        helperText,
-        valueLabel,
-        disabled,
-        loading,
-        optional,
-        tooltip,
-        error: triggerError,
-        hideErrorMessage,
-        labelId,
-        valueId,
-        helperTextId,
-        errorId: error ? errorId : void 0,
-        listboxId,
-        describedBy,
-        onClick: handleTriggerClick,
-        onKeyDown: handleRootTriggerKeyDown
-      }
-    ),
-    isMobile ? /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
-      SelectMobileContent,
-      {
-        open: isOpen,
-        onOpenChange: handleMobileOpenChange,
-        onClose: () => handleMobileOpenChange(false),
-        listboxId,
-        labelId,
-        label,
-        mobileTitle,
-        doneLabel,
-        errorId: describedErrorId,
-        options,
-        disabled: isBlocked,
-        menuClassName,
-        scrollTop: mobileScrollTop,
-        activeIndex: activeMobileIndex,
-        listRef: mobileListRef,
-        onScroll: handleScroll,
-        onOptionClick: handleOptionClick,
-        onKeyDown: handleMobileWheelKeyDown,
-        onDone: handleMobileDone,
-        getOptionId: getOptionId2,
-        noOptionsMessage
-      }
-    ) : /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
-      SelectDesktopContent,
-      {
-        isOpen,
-        listboxId,
-        labelId,
-        errorId: describedErrorId,
-        options,
-        value,
-        highlightedIndex,
-        onOptionClick: (option) => {
-          handleDesktopSelect(option);
-          setIsOpen(false);
-          focusTrigger();
-        },
-        onOptionHover: setHighlightedIndex,
-        onKeyDown: (event) => {
-          handleMenuKeyDown(event, () => setIsOpen(false));
-        },
-        disabled: isBlocked,
-        menuClassName,
-        dropdownClassName,
-        listRef: desktopListRef,
-        setOptionRef,
-        getOptionId: getOptionId2,
-        noOptionsMessage
-      }
-    )
-  ] });
+  return /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)(
+    "div",
+    {
+      ref: containerRef,
+      className: cn("relative w-full max-w-[var(--max-field-width)]", className),
+      children: [
+        name && /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("input", { type: "hidden", name, value: value ? String(value.value) : "" }),
+        renderTrigger ? renderTrigger({
+          id: triggerId,
+          open: isOpen,
+          variant,
+          label,
+          topLabel,
+          helperText,
+          value,
+          valueLabel,
+          disabled: isBlocked,
+          loading,
+          optional,
+          tooltip,
+          error,
+          invalid,
+          listboxId,
+          describedBy,
+          triggerRef: combinedRef,
+          onClick: handleTriggerClick,
+          onKeyDown: handleRootTriggerKeyDown,
+          onBlur
+        }) : /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
+          SelectTrigger2,
+          {
+            id: triggerId,
+            ref: combinedRef,
+            open: isOpen,
+            variant,
+            label,
+            topLabel,
+            helperText,
+            valueLabel,
+            disabled,
+            loading,
+            optional,
+            tooltip,
+            error: triggerError,
+            hideErrorMessage,
+            labelId,
+            valueId,
+            helperTextId,
+            errorId: error ? errorId : void 0,
+            listboxId,
+            describedBy,
+            onClick: handleTriggerClick,
+            onKeyDown: handleRootTriggerKeyDown,
+            onBlur
+          }
+        ),
+        isMobile ? /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
+          SelectMobileContent,
+          {
+            open: isOpen,
+            onOpenChange: handleMobileOpenChange,
+            onClose: () => handleMobileOpenChange(false),
+            listboxId,
+            labelId,
+            label,
+            mobileTitle,
+            doneLabel,
+            errorId: describedErrorId,
+            options,
+            disabled: isBlocked,
+            menuClassName,
+            scrollTop: mobileScrollTop,
+            activeIndex: activeMobileIndex,
+            listRef: mobileListRef,
+            onScroll: handleScroll,
+            onOptionClick: handleOptionClick,
+            onKeyDown: handleMobileWheelKeyDown,
+            onDone: handleMobileDone,
+            getOptionId: getOptionId2,
+            noOptionsMessage
+          }
+        ) : /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
+          SelectDesktopContent,
+          {
+            isOpen,
+            listboxId,
+            labelId,
+            errorId: describedErrorId,
+            options,
+            value,
+            highlightedIndex,
+            onOptionClick: (option) => {
+              handleDesktopSelect(option);
+              setIsOpen(false);
+              focusTrigger();
+            },
+            onOptionHover: setHighlightedIndex,
+            onKeyDown: (event) => {
+              handleMenuKeyDown(event, () => setIsOpen(false));
+            },
+            disabled: isBlocked,
+            menuClassName,
+            dropdownClassName,
+            listRef: desktopListRef,
+            setOptionRef,
+            getOptionId: getOptionId2,
+            noOptionsMessage
+          }
+        )
+      ]
+    }
+  );
 });
 
 // src/airbnb/phone-field/PhoneField.tsx
@@ -10745,6 +10759,7 @@ var PhoneField = React37.forwardRef(
     topLabel,
     value,
     onChange,
+    onBlur,
     options,
     placeholder = "Phone number",
     disabled,
@@ -10765,7 +10780,7 @@ var PhoneField = React37.forwardRef(
     const codeOptions = React37.useMemo(
       () => options.map((option) => ({
         value: option.value,
-        label: option.label,
+        label: `${option.label} (${option.value})`,
         disabled: option.disabled
       })),
       [options]
@@ -10778,7 +10793,7 @@ var PhoneField = React37.forwardRef(
     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: [
+    return /* @__PURE__ */ (0, import_jsx_runtime132.jsxs)("div", { className: cn("w-full max-w-[var(--max-field-width)]", className), children: [
       name && /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("input", { type: "hidden", name, value: combinedValue, disabled }),
       codeName && /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(
         "input",
@@ -10900,7 +10915,8 @@ var PhoneField = React37.forwardRef(
             onChange: (event) => onChange({
               code: value?.code ?? "",
               number: event.target.value
-            })
+            }),
+            onBlur
           }
         )
       ] }),
@@ -10968,6 +10984,7 @@ var SearchableSelectInternal = ({
   options,
   value,
   onChange,
+  onBlur,
   onOpenChange,
   searchValue,
   onSearchChange,
@@ -11144,82 +11161,90 @@ var SearchableSelectInternal = ({
     }
   );
   React39.useImperativeHandle(ref, () => triggerRef.current, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime134.jsxs)("div", { ref: containerRef, className: cn("relative w-full max-w-[425px]", className), children: [
-    name && /* @__PURE__ */ (0, import_jsx_runtime134.jsx)("input", { type: "hidden", name, value: value ? String(value.value) : "" }),
-    /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(
-      FieldTrigger,
-      {
-        id: `${reactId}-trigger`,
-        ref: triggerRef,
-        variant,
-        "aria-haspopup": "listbox",
-        "aria-expanded": open,
-        "aria-controls": listboxId,
-        label,
-        topLabel,
-        labelId,
-        valueId,
-        helperTextId,
-        errorId: error ? errorId : void 0,
-        labelText: topLabel ? helperText : void 0,
-        valueText: valueLabel,
-        placeholder: helperText,
-        describedBy,
-        error: triggerError,
-        loading,
-        optional,
-        tooltip,
-        forceLabelText: Boolean(optional) || Boolean(tooltip),
-        hideErrorMessage,
-        disabled,
-        onClick: () => {
-          if (open) {
-            closeSelect();
-            return;
-          }
-          openSelect();
-        },
-        onKeyDown: handleTriggerKeyDown,
-        trailingAdornment: /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(
-          import_lucide_react46.ChevronDown,
+  return /* @__PURE__ */ (0, import_jsx_runtime134.jsxs)(
+    "div",
+    {
+      ref: containerRef,
+      className: cn("relative w-full max-w-[var(--max-field-width)]", className),
+      children: [
+        name && /* @__PURE__ */ (0, import_jsx_runtime134.jsx)("input", { type: "hidden", name, value: value ? String(value.value) : "" }),
+        /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(
+          FieldTrigger,
           {
-            className: cn(
-              "h-6 w-6 text-[#1F1F1B] transition-transform",
-              open && "rotate-180"
+            id: `${reactId}-trigger`,
+            ref: triggerRef,
+            variant,
+            "aria-haspopup": "listbox",
+            "aria-expanded": open,
+            "aria-controls": listboxId,
+            label,
+            topLabel,
+            labelId,
+            valueId,
+            helperTextId,
+            errorId: error ? errorId : void 0,
+            labelText: topLabel ? helperText : void 0,
+            valueText: valueLabel,
+            placeholder: helperText,
+            describedBy,
+            error: triggerError,
+            loading,
+            optional,
+            tooltip,
+            forceLabelText: Boolean(optional) || Boolean(tooltip),
+            hideErrorMessage,
+            disabled,
+            onClick: () => {
+              if (open) {
+                closeSelect();
+                return;
+              }
+              openSelect();
+            },
+            onKeyDown: handleTriggerKeyDown,
+            onBlur,
+            trailingAdornment: /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(
+              import_lucide_react46.ChevronDown,
+              {
+                className: cn(
+                  "h-6 w-6 text-[#1F1F1B] transition-transform",
+                  open && "rotate-180"
+                )
+              }
             )
           }
-        )
-      }
-    ),
-    isMobile ? /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(
-      Drawer,
-      {
-        open,
-        onOpenChange: (nextOpen) => {
-          if (isBlocked && nextOpen) return;
-          if (nextOpen) {
-            setSelectOpen(true);
-            return;
-          }
-          closeSelect();
-        },
-        children: /* @__PURE__ */ (0, import_jsx_runtime134.jsxs)(DrawerContent, { onClose: closeSelect, lockScroll: false, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(DrawerTitle, { className: "sr-only", children: mobileTitle ?? label }),
-          /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(DrawerDescription, { className: "sr-only", children: label }),
-          /* @__PURE__ */ (0, import_jsx_runtime134.jsx)("div", { className: "px-5 pb-5 pt-1", children: content })
-        ] })
-      }
-    ) : open ? /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(
-      "div",
-      {
-        className: cn(
-          "absolute left-0 right-0 top-[calc(100%+8px)] z-20 overflow-hidden rounded-[20px] border border-[#DEDAD2] bg-white shadow-[0_14px_30px_rgba(18,18,18,0.08)]",
-          dropdownClassName
         ),
-        children: content
-      }
-    ) : null
-  ] });
+        isMobile ? /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(
+          Drawer,
+          {
+            open,
+            onOpenChange: (nextOpen) => {
+              if (isBlocked && nextOpen) return;
+              if (nextOpen) {
+                setSelectOpen(true);
+                return;
+              }
+              closeSelect();
+            },
+            children: /* @__PURE__ */ (0, import_jsx_runtime134.jsxs)(DrawerContent, { onClose: closeSelect, lockScroll: false, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(DrawerTitle, { className: "sr-only", children: mobileTitle ?? label }),
+              /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(DrawerDescription, { className: "sr-only", children: label }),
+              /* @__PURE__ */ (0, import_jsx_runtime134.jsx)("div", { className: "px-5 pb-5 pt-1", children: content })
+            ] })
+          }
+        ) : open ? /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(
+          "div",
+          {
+            className: cn(
+              "absolute left-0 right-0 top-[calc(100%+8px)] z-20 overflow-hidden rounded-[20px] border border-[#DEDAD2] bg-white shadow-[0_14px_30px_rgba(18,18,18,0.08)]",
+              dropdownClassName
+            ),
+            children: content
+          }
+        ) : null
+      ]
+    }
+  );
 };
 var SearchableSelect = React39.forwardRef(
   SearchableSelectInternal