@chekinapp/ui 0.0.6 → 0.0.8

package/dist/index.d.cts

@@ -1,5 +1,5 @@
 import * as React$1 from 'react';
-import { ReactNode, ElementType, InputHTMLAttributes, ComponentProps, PropsWithChildren, MouseEvent, SVGProps, FC, ImgHTMLAttributes, ComponentType, AnchorHTMLAttributes, ForwardedRef, ButtonHTMLAttributes, HTMLAttributes, TdHTMLAttributes, ThHTMLAttributes, ComponentPropsWithoutRef, ReactElement, TextareaHTMLAttributes } from 'react';
+import { ReactNode, ElementType, InputHTMLAttributes, ComponentProps, PropsWithChildren, MouseEvent, SVGProps, FC, ImgHTMLAttributes, ComponentType, AnchorHTMLAttributes, ForwardedRef, ButtonHTMLAttributes, HTMLAttributes, TdHTMLAttributes, ThHTMLAttributes, ComponentPropsWithoutRef, ReactElement, TextareaHTMLAttributes, FocusEventHandler } from 'react';
 import * as AccordionPrimitive from '@radix-ui/react-accordion';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as AvatarPrimitive from '@radix-ui/react-avatar';
@@ -2224,6 +2224,7 @@ type DatePickerProps = {
     value?: DatePickerValue;
     defaultValue?: DatePickerValue;
     onChange: (value: Date | null) => void;
+    onBlur?: React$1.FocusEventHandler<HTMLButtonElement>;
     placeholder?: string;
     disabled?: boolean;
     error?: string;
@@ -2400,6 +2401,7 @@ type PhoneFieldProps = {
     topLabel?: string;
     value?: PhoneFieldValue | null;
     onChange: (value: PhoneFieldValue) => void;
+    onBlur?: React$1.FocusEventHandler<HTMLInputElement>;
     options: PhoneFieldOption[];
     placeholder?: string;
     disabled?: boolean;
@@ -2439,11 +2441,13 @@ type SelectRenderTriggerProps<T = undefined, V extends SelectValue = string, L e
     triggerRef: React$1.Ref<HTMLButtonElement>;
     onClick: () => void;
     onKeyDown: React$1.KeyboardEventHandler<HTMLButtonElement>;
+    onBlur?: React$1.FocusEventHandler<HTMLButtonElement>;
 };
 type AirbnbSelectProps<T = undefined, V extends SelectValue = string, L extends string | number | React$1.ReactNode = string> = {
-    options: SelectOption<T, V, L>[];
+    options?: SelectOption<T, V, L>[];
     value?: SelectOption<T, V, L> | null;
     onChange: (option: SelectOption<T, V, L>) => void;
+    onBlur?: React$1.FocusEventHandler<HTMLButtonElement>;
     variant?: 'default' | 'airbnb';
     label: string;
     topLabel?: string;
@@ -2481,6 +2485,7 @@ type SearchableSelectProps<T = undefined, V extends SearchableSelectValue = stri
     options: SelectOption<T, V, L>[];
     value?: SelectOption<T, V, L> | null;
     onChange: (option: SelectOption<T, V, L>) => void;
+    onBlur?: FocusEventHandler<HTMLButtonElement>;
     onOpenChange?: (open: boolean) => void;
     searchValue?: string;
     onSearchChange?: (value: string) => void;

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import * as React$1 from 'react';
-import { ReactNode, ElementType, InputHTMLAttributes, ComponentProps, PropsWithChildren, MouseEvent, SVGProps, FC, ImgHTMLAttributes, ComponentType, AnchorHTMLAttributes, ForwardedRef, ButtonHTMLAttributes, HTMLAttributes, TdHTMLAttributes, ThHTMLAttributes, ComponentPropsWithoutRef, ReactElement, TextareaHTMLAttributes } from 'react';
+import { ReactNode, ElementType, InputHTMLAttributes, ComponentProps, PropsWithChildren, MouseEvent, SVGProps, FC, ImgHTMLAttributes, ComponentType, AnchorHTMLAttributes, ForwardedRef, ButtonHTMLAttributes, HTMLAttributes, TdHTMLAttributes, ThHTMLAttributes, ComponentPropsWithoutRef, ReactElement, TextareaHTMLAttributes, FocusEventHandler } from 'react';
 import * as AccordionPrimitive from '@radix-ui/react-accordion';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as AvatarPrimitive from '@radix-ui/react-avatar';
@@ -2224,6 +2224,7 @@ type DatePickerProps = {
     value?: DatePickerValue;
     defaultValue?: DatePickerValue;
     onChange: (value: Date | null) => void;
+    onBlur?: React$1.FocusEventHandler<HTMLButtonElement>;
     placeholder?: string;
     disabled?: boolean;
     error?: string;
@@ -2400,6 +2401,7 @@ type PhoneFieldProps = {
     topLabel?: string;
     value?: PhoneFieldValue | null;
     onChange: (value: PhoneFieldValue) => void;
+    onBlur?: React$1.FocusEventHandler<HTMLInputElement>;
     options: PhoneFieldOption[];
     placeholder?: string;
     disabled?: boolean;
@@ -2439,11 +2441,13 @@ type SelectRenderTriggerProps<T = undefined, V extends SelectValue = string, L e
     triggerRef: React$1.Ref<HTMLButtonElement>;
     onClick: () => void;
     onKeyDown: React$1.KeyboardEventHandler<HTMLButtonElement>;
+    onBlur?: React$1.FocusEventHandler<HTMLButtonElement>;
 };
 type AirbnbSelectProps<T = undefined, V extends SelectValue = string, L extends string | number | React$1.ReactNode = string> = {
-    options: SelectOption<T, V, L>[];
+    options?: SelectOption<T, V, L>[];
     value?: SelectOption<T, V, L> | null;
     onChange: (option: SelectOption<T, V, L>) => void;
+    onBlur?: React$1.FocusEventHandler<HTMLButtonElement>;
     variant?: 'default' | 'airbnb';
     label: string;
     topLabel?: string;
@@ -2481,6 +2485,7 @@ type SearchableSelectProps<T = undefined, V extends SearchableSelectValue = stri
     options: SelectOption<T, V, L>[];
     value?: SelectOption<T, V, L> | null;
     onChange: (option: SelectOption<T, V, L>) => void;
+    onBlur?: FocusEventHandler<HTMLButtonElement>;
     onOpenChange?: (open: boolean) => void;
     searchValue?: string;
     onSearchChange?: (value: string) => void;

package/dist/index.js

@@ -8937,6 +8937,7 @@ var DatePicker = React30.forwardRef(
     value,
     defaultValue,
     onChange,
+    onBlur,
     placeholder = "Select a date",
     disabled,
     error,
@@ -9043,7 +9044,7 @@ var DatePicker = React30.forwardRef(
         setIsOpen(false);
       }
     }, [isBlocked]);
-    return /* @__PURE__ */ jsxs78("div", { className: cn("relative w-full max-w-[425px]", className), children: [
+    return /* @__PURE__ */ jsxs78("div", { className: cn("relative w-full max-w-[var(--max-field-width)]", className), children: [
       name && /* @__PURE__ */ jsx121(
         "input",
         {
@@ -9078,6 +9079,7 @@ var DatePicker = React30.forwardRef(
           "aria-expanded": isOpen,
           onClick: handleTriggerClick,
           onKeyDown: handleTriggerKeyDown,
+          onBlur,
           trailingAdornment: /* @__PURE__ */ jsx121(Calendar2, { className: "h-5 w-5 text-[#1F1F1B]", strokeWidth: 2 })
         }
       ),
@@ -9307,7 +9309,7 @@ var AirbnbInput = React31.forwardRef(
       setIsFocused(false);
       onBlur?.(event);
     };
-    return /* @__PURE__ */ jsx123("div", { className: cn("w-full", wrapperClassName), children: /* @__PURE__ */ jsx123(
+    return /* @__PURE__ */ jsx123("div", { className: cn("w-full max-w-[var(--max-field-width)]", wrapperClassName), children: /* @__PURE__ */ jsx123(
       FieldTrigger,
       {
         as: "div",
@@ -9749,7 +9751,8 @@ var SelectTrigger2 = React32.forwardRef(
     listboxId,
     describedBy,
     onClick,
-    onKeyDown
+    onKeyDown,
+    onBlur
   }, ref) => {
     return /* @__PURE__ */ jsx128(
       FieldTrigger,
@@ -9779,6 +9782,7 @@ var SelectTrigger2 = React32.forwardRef(
         disabled,
         onClick,
         onKeyDown,
+        onBlur,
         trailingAdornment: /* @__PURE__ */ jsx128(
           ChevronDown,
           {
@@ -10195,9 +10199,10 @@ function useOutsideClick(elementRef, onOutsideClick, nested) {
 // src/airbnb/select/Select.tsx
 import { jsx as jsx129, jsxs as jsxs83 } from "react/jsx-runtime";
 var AirbnbSelect = React36.forwardRef(function AirbnbSelect2({
-  options,
+  options = [],
   value,
   onChange,
+  onBlur,
   variant = "default",
   label,
   topLabel,
@@ -10365,109 +10370,118 @@ var AirbnbSelect = React36.forwardRef(function AirbnbSelect2({
       handleMobileOpenChange(false);
     }
   };
-  return /* @__PURE__ */ jsxs83("div", { ref: containerRef, className: cn("relative w-full max-w-[425px]", className), children: [
-    name && /* @__PURE__ */ jsx129("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__ */ jsx129(
-      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__ */ jsx129(
-      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__ */ jsx129(
-      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__ */ jsxs83(
+    "div",
+    {
+      ref: containerRef,
+      className: cn("relative w-full max-w-[var(--max-field-width)]", className),
+      children: [
+        name && /* @__PURE__ */ jsx129("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__ */ jsx129(
+          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__ */ jsx129(
+          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__ */ jsx129(
+          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
@@ -10479,6 +10493,7 @@ var PhoneField = React37.forwardRef(
     topLabel,
     value,
     onChange,
+    onBlur,
     options,
     placeholder = "Phone number",
     disabled,
@@ -10499,7 +10514,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]
@@ -10512,7 +10527,7 @@ var PhoneField = React37.forwardRef(
     const hasInvalidState = Boolean(error) || Boolean(invalid);
     const isBlocked = Boolean(disabled) || Boolean(loading);
     const isCodeBlocked = isBlocked || Boolean(codeReadOnly);
-    return /* @__PURE__ */ jsxs84("div", { className: cn("w-full max-w-[425px]", className), children: [
+    return /* @__PURE__ */ jsxs84("div", { className: cn("w-full max-w-[var(--max-field-width)]", className), children: [
       name && /* @__PURE__ */ jsx130("input", { type: "hidden", name, value: combinedValue, disabled }),
       codeName && /* @__PURE__ */ jsx130(
         "input",
@@ -10634,7 +10649,8 @@ var PhoneField = React37.forwardRef(
             onChange: (event) => onChange({
               code: value?.code ?? "",
               number: event.target.value
-            })
+            }),
+            onBlur
           }
         )
       ] }),
@@ -10702,6 +10718,7 @@ var SearchableSelectInternal = ({
   options,
   value,
   onChange,
+  onBlur,
   onOpenChange,
   searchValue,
   onSearchChange,
@@ -10878,82 +10895,90 @@ var SearchableSelectInternal = ({
     }
   );
   React39.useImperativeHandle(ref, () => triggerRef.current, []);
-  return /* @__PURE__ */ jsxs86("div", { ref: containerRef, className: cn("relative w-full max-w-[425px]", className), children: [
-    name && /* @__PURE__ */ jsx132("input", { type: "hidden", name, value: value ? String(value.value) : "" }),
-    /* @__PURE__ */ jsx132(
-      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__ */ jsx132(
-          ChevronDown3,
+  return /* @__PURE__ */ jsxs86(
+    "div",
+    {
+      ref: containerRef,
+      className: cn("relative w-full max-w-[var(--max-field-width)]", className),
+      children: [
+        name && /* @__PURE__ */ jsx132("input", { type: "hidden", name, value: value ? String(value.value) : "" }),
+        /* @__PURE__ */ jsx132(
+          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__ */ jsx132(
+              ChevronDown3,
+              {
+                className: cn(
+                  "h-6 w-6 text-[#1F1F1B] transition-transform",
+                  open && "rotate-180"
+                )
+              }
             )
           }
-        )
-      }
-    ),
-    isMobile ? /* @__PURE__ */ jsx132(
-      Drawer,
-      {
-        open,
-        onOpenChange: (nextOpen) => {
-          if (isBlocked && nextOpen) return;
-          if (nextOpen) {
-            setSelectOpen(true);
-            return;
-          }
-          closeSelect();
-        },
-        children: /* @__PURE__ */ jsxs86(DrawerContent, { onClose: closeSelect, lockScroll: false, children: [
-          /* @__PURE__ */ jsx132(DrawerTitle, { className: "sr-only", children: mobileTitle ?? label }),
-          /* @__PURE__ */ jsx132(DrawerDescription, { className: "sr-only", children: label }),
-          /* @__PURE__ */ jsx132("div", { className: "px-5 pb-5 pt-1", children: content })
-        ] })
-      }
-    ) : open ? /* @__PURE__ */ jsx132(
-      "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__ */ jsx132(
+          Drawer,
+          {
+            open,
+            onOpenChange: (nextOpen) => {
+              if (isBlocked && nextOpen) return;
+              if (nextOpen) {
+                setSelectOpen(true);
+                return;
+              }
+              closeSelect();
+            },
+            children: /* @__PURE__ */ jsxs86(DrawerContent, { onClose: closeSelect, lockScroll: false, children: [
+              /* @__PURE__ */ jsx132(DrawerTitle, { className: "sr-only", children: mobileTitle ?? label }),
+              /* @__PURE__ */ jsx132(DrawerDescription, { className: "sr-only", children: label }),
+              /* @__PURE__ */ jsx132("div", { className: "px-5 pb-5 pt-1", children: content })
+            ] })
+          }
+        ) : open ? /* @__PURE__ */ jsx132(
+          "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