@chekinapp/ui 0.0.1 → 0.0.2

package/dist/index.cjs

@@ -157,6 +157,7 @@ __export(index_exports, {
   OverlayLoader: () => OverlayLoader,
   PageLoader: () => PageLoader,
   Pagination: () => Pagination,
+  PhoneField: () => PhoneField,
   Popover: () => Popover,
   PopoverAnchor: () => PopoverAnchor,
   PopoverClose: () => PopoverClose,
@@ -9389,6 +9390,10 @@ var AirbnbInput = React31.forwardRef(
 );
 AirbnbInput.displayName = "Input";
 
+// src/airbnb/phone-field/PhoneField.tsx
+var React37 = __toESM(require("react"), 1);
+var import_lucide_react43 = require("lucide-react");
+
 // src/airbnb/select/Select.tsx
 var React36 = __toESM(require("react"), 1);
 
@@ -10453,17 +10458,170 @@ function AirbnbSelect({
   ] });
 }
 
+// src/airbnb/phone-field/PhoneField.tsx
+var import_jsx_runtime131 = require("react/jsx-runtime");
+function PhoneField({
+  variant = "default",
+  label,
+  topLabel,
+  value,
+  onChange,
+  options,
+  placeholder = "Phone number",
+  disabled,
+  error,
+  className,
+  name,
+  codeName,
+  numberName,
+  mobileTitle,
+  codePlaceholder = "+00"
+}) {
+  const inputId = React37.useId();
+  const codeOptions = React37.useMemo(
+    () => options.map((option) => ({
+      value: option.value,
+      label: option.label,
+      disabled: option.disabled
+    })),
+    [options]
+  );
+  const selectedCodeOption = React37.useMemo(
+    () => codeOptions.find((option) => option.value === value?.code) ?? null,
+    [codeOptions, value?.code]
+  );
+  const combinedValue = value?.code || value?.number ? `${value?.code ?? ""}${value?.number ?? ""}` : "";
+  return /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)("div", { className: cn("w-full max-w-[480px]", className), children: [
+    name && /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("input", { type: "hidden", name, value: combinedValue, disabled }),
+    codeName && /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
+      "input",
+      {
+        type: "hidden",
+        name: codeName,
+        value: value?.code ?? "",
+        disabled
+      }
+    ),
+    numberName && /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
+      "input",
+      {
+        type: "hidden",
+        name: numberName,
+        value: value?.number ?? "",
+        disabled
+      }
+    ),
+    topLabel && /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
+      "label",
+      {
+        htmlFor: inputId,
+        className: "mb-3 block text-[16px] font-medium leading-5 text-[#1F1F1B]",
+        children: topLabel
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)("div", { className: "flex items-stretch", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
+        AirbnbSelect,
+        {
+          variant,
+          options: codeOptions,
+          value: selectedCodeOption,
+          onChange: (option) => onChange({
+            code: String(option.value),
+            number: value?.number ?? ""
+          }),
+          label: `${label} country code`,
+          placeholder: codePlaceholder,
+          disabled,
+          className: "max-w-none shrink-0 basis-[96px]",
+          mobileTitle: mobileTitle ?? "Select country code",
+          dropdownClassName: "right-auto w-[280px]",
+          getValueLabel: (option) => String(option.value),
+          renderTrigger: ({
+            id,
+            open,
+            variant: selectVariant,
+            disabled: triggerDisabled,
+            listboxId,
+            triggerRef,
+            onClick,
+            onKeyDown,
+            valueLabel
+          }) => /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)(
+            "button",
+            {
+              id,
+              ref: triggerRef,
+              type: "button",
+              "aria-label": `${label} country code`,
+              "aria-haspopup": "listbox",
+              "aria-expanded": open,
+              "aria-controls": listboxId,
+              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"
+              ),
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("span", { children: valueLabel ?? codePlaceholder }),
+                /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
+                  import_lucide_react43.ChevronDown,
+                  {
+                    className: cn("h-5 w-5 transition-transform", open ? "rotate-180" : ""),
+                    strokeWidth: 2
+                  }
+                )
+              ]
+            }
+          )
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
+        AirbnbInput,
+        {
+          id: inputId,
+          variant,
+          type: "tel",
+          inputMode: "tel",
+          label,
+          helperText: placeholder,
+          value: value?.number ?? "",
+          placeholder,
+          disabled,
+          error,
+          renderErrorMessage: false,
+          wrapperClassName: "min-w-0 flex-1",
+          fieldClassName: cn(
+            variant === "airbnb" ? "min-h-[60px] rounded-l-none rounded-r-[16px] border-l-0" : "rounded-l-none rounded-r-[10px] border-l-0"
+          ),
+          contentClassName: cn(variant === "airbnb" ? "h-[40px] py-2" : "h-[48px]"),
+          inputClassName: "text-[16px] leading-7",
+          onChange: (event) => onChange({
+            code: value?.code ?? "",
+            number: event.target.value
+          })
+        }
+      )
+    ] }),
+    error && /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(FieldErrorMessage, { message: error })
+  ] });
+}
+
 // src/airbnb/search-input/SearchInput.tsx
-var React37 = __toESM(require("react"), 1);
+var React38 = __toESM(require("react"), 1);
 var import_react_i18next22 = require("react-i18next");
-var import_lucide_react43 = require("lucide-react");
-var import_jsx_runtime131 = require("react/jsx-runtime");
-var AirbnbSearchInput = React37.forwardRef(({ onReset, placeholder, wrapperClassName, ...props }, ref) => {
+var import_lucide_react44 = require("lucide-react");
+var import_jsx_runtime132 = require("react/jsx-runtime");
+var AirbnbSearchInput = React38.forwardRef(({ onReset, placeholder, wrapperClassName, ...props }, ref) => {
   const { t } = (0, import_react_i18next22.useTranslation)();
   const placeholderText = placeholder || t("search_property") + "...";
-  return /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)("div", { className: cn("input-wrapper relative", wrapperClassName), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(import_lucide_react43.Search, { className: "absolute left-4 top-1/2 h-5 w-5 -translate-y-1/2 transform text-[#9696B9]" }),
-    /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime132.jsxs)("div", { className: cn("input-wrapper relative", wrapperClassName), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime132.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_runtime132.jsx)(
       "input",
       {
         ...props,
@@ -10482,13 +10640,13 @@ var AirbnbSearchInput = React37.forwardRef(({ onReset, placeholder, wrapperClass
         )
       }
     ),
-    onReset && /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
+    onReset && /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(
       Button,
       {
         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_runtime131.jsx)(import_lucide_react43.X, { className: "h-5 w-5" })
+        children: /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(import_lucide_react44.X, { className: "h-5 w-5" })
       }
     )
   ] });
@@ -10496,10 +10654,10 @@ var AirbnbSearchInput = React37.forwardRef(({ onReset, placeholder, wrapperClass
 AirbnbSearchInput.displayName = "SearchInput";
 
 // src/searchable-select/SearchableSelect.tsx
-var React38 = __toESM(require("react"), 1);
-var import_lucide_react44 = require("lucide-react");
+var React39 = __toESM(require("react"), 1);
+var import_lucide_react45 = require("lucide-react");
 var import_react_virtual = require("@tanstack/react-virtual");
-var import_jsx_runtime132 = require("react/jsx-runtime");
+var import_jsx_runtime133 = require("react/jsx-runtime");
 var ROW_HEIGHT = 48;
 var DESKTOP_LIST_HEIGHT = 280;
 var MOBILE_LIST_HEIGHT = 420;
@@ -10536,13 +10694,13 @@ var SearchableSelectInternal = ({
   loadingMessage
 }, ref) => {
   const { isMatch: isMobile } = useScreenResize(DEVICE.mobileXL);
-  const reactId = React38.useId();
-  const [open, setOpen] = React38.useState(false);
-  const [internalSearchValue, setInternalSearchValue] = React38.useState("");
-  const [highlightedIndex, setHighlightedIndex] = React38.useState(-1);
-  const containerRef = React38.useRef(null);
-  const triggerRef = React38.useRef(null);
-  const inputRef = React38.useRef(null);
+  const reactId = React39.useId();
+  const [open, setOpen] = React39.useState(false);
+  const [internalSearchValue, setInternalSearchValue] = React39.useState("");
+  const [highlightedIndex, setHighlightedIndex] = React39.useState(-1);
+  const containerRef = React39.useRef(null);
+  const triggerRef = React39.useRef(null);
+  const inputRef = React39.useRef(null);
   const listboxId = `${reactId}-listbox`;
   const labelId = `${reactId}-label`;
   const valueId = `${reactId}-value`;
@@ -10551,13 +10709,13 @@ var SearchableSelectInternal = ({
   const searchInputId = `${reactId}-search`;
   const effectiveSearchValue = searchValue ?? internalSearchValue;
   const shouldFilterLocally = !onSearchChange && filterOption !== null;
-  const visibleOptions = React38.useMemo(() => {
+  const visibleOptions = React39.useMemo(() => {
     if (!shouldFilterLocally || !effectiveSearchValue) {
       return options;
     }
     return options.filter((option) => filterOption(option, effectiveSearchValue));
   }, [effectiveSearchValue, filterOption, options, shouldFilterLocally]);
-  const selectedIndex = React38.useMemo(
+  const selectedIndex = React39.useMemo(
     () => visibleOptions.findIndex((option) => option.value === value?.value),
     [value?.value, visibleOptions]
   );
@@ -10566,7 +10724,7 @@ var SearchableSelectInternal = ({
   const describedBy = error && !hideErrorMessage ? errorId : void 0;
   const activeOptionId = highlightedIndex >= 0 ? getOptionId(reactId, highlightedIndex) : void 0;
   useOutsideClick(containerRef, open && !isMobile ? () => closeSelect() : null);
-  React38.useEffect(() => {
+  React39.useEffect(() => {
     if (!open) return;
     const frameId = window.requestAnimationFrame(() => {
       inputRef.current?.focus();
@@ -10575,7 +10733,7 @@ var SearchableSelectInternal = ({
       window.cancelAnimationFrame(frameId);
     };
   }, [open]);
-  React38.useEffect(() => {
+  React39.useEffect(() => {
     if (!open) {
       setHighlightedIndex(-1);
       return;
@@ -10650,7 +10808,7 @@ var SearchableSelectInternal = ({
       }
     }
   }
-  const content = /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(
+  const content = /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(
     SearchableSelectContent,
     {
       inputId: searchInputId,
@@ -10677,10 +10835,10 @@ var SearchableSelectInternal = ({
       onOptionHover: setHighlightedIndex
     }
   );
-  React38.useImperativeHandle(ref, () => triggerRef.current, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime132.jsxs)("div", { ref: containerRef, className: cn("relative w-full max-w-[480px]", className), children: [
-    name && /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("input", { type: "hidden", name, value: value ? String(value.value) : "" }),
-    /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(
+  React39.useImperativeHandle(ref, () => triggerRef.current, []);
+  return /* @__PURE__ */ (0, import_jsx_runtime133.jsxs)("div", { ref: containerRef, className: cn("relative w-full max-w-[480px]", className), children: [
+    name && /* @__PURE__ */ (0, import_jsx_runtime133.jsx)("input", { type: "hidden", name, value: value ? String(value.value) : "" }),
+    /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(
       FieldTrigger,
       {
         id: `${reactId}-trigger`,
@@ -10710,8 +10868,8 @@ var SearchableSelectInternal = ({
           openSelect();
         },
         onKeyDown: handleTriggerKeyDown,
-        trailingAdornment: /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(
-          import_lucide_react44.ChevronDown,
+        trailingAdornment: /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(
+          import_lucide_react45.ChevronDown,
           {
             className: cn(
               "h-6 w-6 text-[#1F1F1B] transition-transform",
@@ -10721,7 +10879,7 @@ var SearchableSelectInternal = ({
         )
       }
     ),
-    isMobile ? /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(
+    isMobile ? /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(
       Drawer,
       {
         open,
@@ -10732,13 +10890,13 @@ var SearchableSelectInternal = ({
           }
           closeSelect();
         },
-        children: /* @__PURE__ */ (0, import_jsx_runtime132.jsxs)(DrawerContent, { onClose: closeSelect, lockScroll: false, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(DrawerTitle, { className: "sr-only", children: mobileTitle ?? label }),
-          /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(DrawerDescription, { className: "sr-only", children: label }),
-          /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("div", { className: "px-5 pb-5 pt-1", children: content })
+        children: /* @__PURE__ */ (0, import_jsx_runtime133.jsxs)(DrawerContent, { onClose: closeSelect, lockScroll: false, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(DrawerTitle, { className: "sr-only", children: mobileTitle ?? label }),
+          /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(DrawerDescription, { className: "sr-only", children: label }),
+          /* @__PURE__ */ (0, import_jsx_runtime133.jsx)("div", { className: "px-5 pb-5 pt-1", children: content })
         ] })
       }
-    ) : open ? /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(
+    ) : open ? /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(
       "div",
       {
         className: cn(
@@ -10750,7 +10908,7 @@ var SearchableSelectInternal = ({
     ) : null
   ] });
 };
-var SearchableSelect = React38.forwardRef(
+var SearchableSelect = React39.forwardRef(
   SearchableSelectInternal
 );
 function SearchableSelectContent({
@@ -10777,9 +10935,9 @@ function SearchableSelectContent({
   onOptionClick,
   onOptionHover
 }) {
-  const listRef = React38.useRef(null);
-  const lastLoadMoreOptionsLengthRef = React38.useRef(null);
-  const previousHighlightedIndexRef = React38.useRef(highlightedIndex);
+  const listRef = React39.useRef(null);
+  const lastLoadMoreOptionsLengthRef = React39.useRef(null);
+  const previousHighlightedIndexRef = React39.useRef(highlightedIndex);
   const rowCount = options.length + (loading && options.length > 0 ? 1 : 0);
   const virtualizer = (0, import_react_virtual.useVirtualizer)({
     count: rowCount,
@@ -10790,7 +10948,7 @@ function SearchableSelectContent({
   const virtualItems = virtualizer.getVirtualItems();
   const emptyMessage = noOptionsMessage?.() ?? "No matches found";
   const loadingText = loadingMessage?.() ?? "Loading...";
-  React38.useEffect(() => {
+  React39.useEffect(() => {
     const lastItem = virtualItems[virtualItems.length - 1];
     const shouldLoadMore = !!lastItem && hasNextPage && !loading && lastItem.index >= options.length - LOAD_MORE_THRESHOLD;
     if (shouldLoadMore && lastLoadMoreOptionsLengthRef.current !== options.length) {
@@ -10798,23 +10956,23 @@ function SearchableSelectContent({
       onLoadMore?.();
     }
   }, [hasNextPage, loading, onLoadMore, options.length, virtualItems]);
-  React38.useEffect(() => {
+  React39.useEffect(() => {
     const hasHighlightedIndexChanged = previousHighlightedIndexRef.current !== highlightedIndex;
     previousHighlightedIndexRef.current = highlightedIndex;
     if (highlightedIndex >= 0 && hasHighlightedIndexChanged) {
       virtualizer.scrollToIndex(highlightedIndex, { align: "auto" });
     }
   }, [highlightedIndex, virtualizer]);
-  return /* @__PURE__ */ (0, import_jsx_runtime132.jsxs)("div", { className: "p-2", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime132.jsxs)("div", { className: "relative mb-2", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(
-        import_lucide_react44.Search,
+  return /* @__PURE__ */ (0, import_jsx_runtime133.jsxs)("div", { className: "p-2", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime133.jsxs)("div", { className: "relative mb-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(
+        import_lucide_react45.Search,
         {
           "aria-hidden": "true",
           className: "absolute left-4 top-1/2 h-5 w-5 -translate-y-1/2 text-[#9696B9]"
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(
         "input",
         {
           id: inputId,
@@ -10833,7 +10991,7 @@ function SearchableSelectContent({
         }
       )
     ] }),
-    loading && options.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("div", { className: "px-4 py-5 text-center text-base leading-6 text-[#6C6C6C]", children: loadingText }) : options.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("div", { className: "px-4 py-5 text-center text-base leading-6 text-[#6C6C6C]", children: emptyMessage }) : /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(
+    loading && options.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime133.jsx)("div", { className: "px-4 py-5 text-center text-base leading-6 text-[#6C6C6C]", children: loadingText }) : options.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime133.jsx)("div", { className: "px-4 py-5 text-center text-base leading-6 text-[#6C6C6C]", children: emptyMessage }) : /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(
       "div",
       {
         id: listboxId,
@@ -10842,7 +11000,7 @@ function SearchableSelectContent({
         "aria-labelledby": labelId,
         className: cn("overflow-y-auto outline-none", menuClassName),
         style: { height: Math.min(height, rowCount * ROW_HEIGHT) },
-        children: /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(
           "div",
           {
             className: "relative w-full",
@@ -10850,7 +11008,7 @@ function SearchableSelectContent({
             children: virtualItems.map((virtualItem) => {
               const option = options[virtualItem.index];
               if (!option) {
-                return /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(
+                return /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(
                   "div",
                   {
                     className: "absolute left-0 top-0 flex w-full items-center px-4 text-base leading-6 text-[#6C6C6C]",
@@ -10865,7 +11023,7 @@ function SearchableSelectContent({
               }
               const isSelected = value?.value === option.value;
               const isHighlighted = virtualItem.index === highlightedIndex;
-              return /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(
+              return /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(
                 "button",
                 {
                   id: getOptionId(idPrefix, virtualItem.index),
@@ -10887,7 +11045,7 @@ function SearchableSelectContent({
                     height: `${virtualItem.size}px`,
                     transform: `translateY(${virtualItem.start}px)`
                   },
-                  children: /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("span", { className: "truncate text-center", children: String(option.label) })
+                  children: /* @__PURE__ */ (0, import_jsx_runtime133.jsx)("span", { className: "truncate text-center", children: String(option.label) })
                 },
                 `${String(option.value)}-${virtualItem.index}`
               );
@@ -11043,6 +11201,7 @@ function getNextEnabledIndex(options, startIndex, step) {
   OverlayLoader,
   PageLoader,
   Pagination,
+  PhoneField,
   Popover,
   PopoverAnchor,
   PopoverClose,