@chekinapp/ui 0.0.5 → 0.0.7

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,
@@ -9308,7 +9309,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",
         {
@@ -9572,7 +9573,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",
@@ -10630,109 +10631,116 @@ 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
+        }) : /* @__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
+          }
+        )
+      ]
+    }
+  );
 });
 
 // src/airbnb/phone-field/PhoneField.tsx
@@ -10777,7 +10785,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",
@@ -11143,82 +11151,89 @@ 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,
+            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
@@ -11471,6 +11486,7 @@ function getNextEnabledIndex(options, startIndex, step) {
   ErrorMessage,
   ExternalLink,
   FeatureCard,
+  FieldErrorMessage,
   FieldTrigger,
   FileInputButton,
   FormBox,