@chekinapp/ui 0.0.117 → 0.0.119

package/dist/index.cjs

@@ -14203,7 +14203,8 @@ function SelectInternal(props, ref) {
     menuHeader,
     onMenuScrollToBottom,
     leftIcon,
-    formatGroupLabel
+    formatGroupLabel,
+    onReset
   } = props;
   const isSearchInDropdown = searchPosition === "dropdown";
   const isMulti = props.isMulti === true;
@@ -14270,7 +14271,10 @@ function SelectInternal(props, ref) {
   const resolvedLabel = label ?? placeholder;
   const hasInvalidState = state.hasInvalidState || Boolean(invalid);
   const hiddenValue = isMulti ? selectedOptions.map((item) => String(item.value)).join(",") : selectedOptions[0] ? String(selectedOptions[0].value) : "";
-  const handleClear = (event) => state.clearSelection(event);
+  const handleClear = (event) => {
+    state.clearSelection(event);
+    onReset?.();
+  };
   const { Control, MenuList, CreateOption } = components;
   return /* @__PURE__ */ (0, import_jsx_runtime158.jsxs)(
     SelectFieldShell,
@@ -14502,7 +14506,14 @@ function VirtualMenuList(props) {
     if (lastLoadMoreOptionsLengthRef.current === options.length) return;
     lastLoadMoreOptionsLengthRef.current = options.length;
     loadMoreItems();
-  }, [virtualItems, options.length]);
+  }, [
+    virtualItems,
+    options.length,
+    canLoadMore,
+    isLoadingMore,
+    loadMoreItems,
+    loadMoreThreshold
+  ]);
   React51.useEffect(() => {
     const changed = previousHighlightedIndexRef.current !== highlightedIndex;
     previousHighlightedIndexRef.current = highlightedIndex;
@@ -14678,7 +14689,7 @@ function InfiniteScrollSelectInternal(props, ref) {
       if (synthetic) list = [synthetic, ...list];
     }
     return list;
-  }, [rawOptions, inputValue, filterOption, getFullSearchOption, rest.getValueLabel, props]);
+  }, [rawOptions, inputValue, filterOption, getFullSearchOption, props, rest]);
   const contextValue = React52.useMemo(
     () => ({
       canLoadMore,
@@ -14742,13 +14753,7 @@ function hasPaginationProps(props) {
   return props.canLoadMore !== void 0 || props.isLoadingMore !== void 0 || props.loadMoreItems !== void 0 || props.onSearchChange !== void 0 || props.getFullSearchOption !== void 0;
 }
 function SearchingSelectInternal(props, ref) {
-  const {
-    trigger,
-    components: userComponents,
-    searchPlaceholder,
-    searchable = true,
-    ...rest
-  } = props;
+  const { trigger, components: userComponents, searchable = true, ...rest } = props;
   const Control = React53.useMemo(() => {
     if (trigger) return makeTriggerSlot(trigger);
     return StaticControl;
@@ -15215,7 +15220,7 @@ function SelectCheckboxesInternal(props, ref) {
     paginationAndRest
   );
   const [inputValue, setInputValue] = React59.useState("");
-  const selected = value ?? [];
+  const selected = React59.useMemo(() => value ?? [], [value]);
   const flatRawOptions = React59.useMemo(
     () => flattenGroupedOptions(rawOptions),
     [rawOptions]
@@ -16285,7 +16290,7 @@ var Datepicker = React63.forwardRef(
     React63.useImperativeHandle(
       ref,
       () => dayInputRef.current ?? mobileTriggerRef.current,
-      [isMobile3]
+      []
     );
     React63.useEffect(() => {
       if (!isControlled) return;
@@ -18024,7 +18029,6 @@ var import_jsx_runtime184 = require("react/jsx-runtime");
 var AirbnbFieldTrigger = React72.forwardRef(
   ({
     as = "button",
-    variant = "airbnb",
     id,
     label,
     topLabel,
@@ -18077,7 +18081,6 @@ var AirbnbFieldTrigger = React72.forwardRef(
       )
     ] }) : 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);
@@ -18092,11 +18095,11 @@ var AirbnbFieldTrigger = React72.forwardRef(
       )
     ] }) : void 0;
     const sharedClasses = cn(
-      "relative flex w-full items-center border bg-white text-left transition-colors focus-visible:outline-none",
-      isAirbnbVariant ? "rounded-[12px] border-[#8c8c8c] pl-4 pr-4 focus-visible:ring-2 focus-visible:ring-[#222222] focus-visible:ring-offset-2" : "rounded-[10px] px-3.5 focus-visible:border-[var(--chekin-color-brand-blue)]",
-      isAirbnbVariant ? isRaised ? "min-h-[60px]" : "h-[60px]" : "min-h-[48px]",
-      hasInvalidState ? isAirbnbVariant ? "border-[var(--error-message-color)] bg-[#FFF5F3]" : "border-[var(--error-message-color)] bg-white" : isAirbnbVariant ? "border-[#8c8c8c]" : "border-[#A8A8A4] bg-white",
-      disabled ? "cursor-not-allowed opacity-50" : loading ? "cursor-progress" : isAirbnbVariant ? "cursor-pointer" : "cursor-text",
+      "relative flex w-full items-center border bg-transparent text-left transition-colors focus-visible:outline-none",
+      "rounded-[12px] border-[#8c8c8c] pl-4 pr-4 focus-visible:ring-2 focus-visible:ring-[#222222] focus-visible:ring-offset-2",
+      isRaised ? "min-h-[60px]" : "h-[60px]",
+      hasInvalidState ? "border-[var(--error-message-color)] bg-[#FFF5F3]" : "border-[#8c8c8c]",
+      disabled ? "cursor-not-allowed opacity-50" : loading ? "cursor-progress" : "cursor-pointer",
       className
     );
     const sharedContent = /* @__PURE__ */ (0, import_jsx_runtime184.jsxs)(import_jsx_runtime184.Fragment, { children: [
@@ -18105,7 +18108,7 @@ var AirbnbFieldTrigger = React72.forwardRef(
         {
           className: cn(
             "relative min-w-0 flex-1 pr-2",
-            isAirbnbVariant ? isRaised ? "h-[42px]" : "h-[28px]" : "h-[48px]",
+            isRaised ? "h-[42px]" : "h-[28px]",
             contentClassName
           ),
           children: [
@@ -18116,8 +18119,8 @@ var AirbnbFieldTrigger = React72.forwardRef(
                 className: cn(
                   "absolute left-0 origin-left transition-all duration-200 ease-out",
                   hasLabelMeta ? "max-w-full" : "pointer-events-none truncate",
-                  isAirbnbVariant ? isRaised ? "top-[-1px] 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-white px-1 text-[12px] font-medium leading-4" : "top-1/2 -translate-y-1/2 text-[16px] leading-6",
-                  hasInvalidState ? "text-[var(--error-message-color)]" : isAirbnbVariant ? "text-[#6c6c6c]" : "text-[#7A8399]"
+                  isRaised ? "top-[-1px] translate-y-0 text-xs leading-5" : "top-1/2 -translate-y-1/2 text-[16px] leading-7",
+                  hasInvalidState ? "text-[var(--error-message-color)]" : "text-[#6c6c6c]"
                 ),
                 children: animatedLabel
               }
@@ -18128,7 +18131,7 @@ var AirbnbFieldTrigger = React72.forwardRef(
                 id: valueId,
                 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",
+                  "bottom-0 translate-y-0 text-[16px] leading-6 opacity-100",
                   hasInvalidState ? "text-[var(--error-message-color)]" : "text-[#222222]"
                 ),
                 children: valueText
@@ -18141,10 +18144,7 @@ var AirbnbFieldTrigger = React72.forwardRef(
         "span",
         {
           "aria-hidden": "true",
-          className: cn(
-            "pointer-events-none absolute top-1/2 -translate-y-1/2",
-            isAirbnbVariant ? "right-5" : "right-4"
-          ),
+          className: "pointer-events-none absolute right-5 top-1/2 -translate-y-1/2",
           children: resolvedTrailingAdornment
         }
       )
@@ -18196,7 +18196,6 @@ var import_jsx_runtime185 = require("react/jsx-runtime");
 var DEFAULT_MIN_DATE = new Date(1920, 0, 1);
 var AirbnbDatePicker = React73.forwardRef(
   ({
-    variant = "default",
     label,
     topLabel,
     value,
@@ -18323,7 +18322,6 @@ var AirbnbDatePicker = React73.forwardRef(
         {
           id: triggerId,
           ref: combinedRef,
-          variant,
           label,
           topLabel,
           labelId,
@@ -18389,7 +18387,6 @@ var import_jsx_runtime186 = require("react/jsx-runtime");
 var getInputValue = (value) => value != null ? String(value) : "";
 var AirbnbInput = React74.forwardRef(
   ({
-    variant = "default",
     label,
     topLabel,
     helperText,
@@ -18485,7 +18482,6 @@ var AirbnbInput = React74.forwardRef(
       AirbnbFieldTrigger,
       {
         as: "div",
-        variant,
         id: fieldId,
         label: accessibleLabel ?? "",
         topLabel,
@@ -18501,14 +18497,11 @@ var AirbnbInput = React74.forwardRef(
         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]",
+          "px-4 focus-within:ring-2 focus-within:ring-[#1F1F1B] focus-within:ring-offset-2",
           disabled ? "cursor-not-allowed" : "cursor-text",
           fieldClassName
         ),
-        contentClassName: cn(
-          variant === "airbnb" ? "h-[42px]" : "h-[48px]",
-          contentClassName
-        ),
+        contentClassName: cn("h-[42px]", contentClassName),
         trailingAdornment: shouldShowPasswordReveal ? void 0 : trailingAdornment,
         forceFloatingLabel: shouldShowLabel,
         forceLabelText: hasLabelMeta,
@@ -18535,7 +18528,7 @@ var AirbnbInput = React74.forwardRef(
               "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]",
+                "bottom-0",
                 hasInvalidState ? "text-[var(--status-danger)] placeholder:text-[var(--status-danger)]" : "",
                 disabled ? "cursor-not-allowed" : loading ? "cursor-progress" : "",
                 shouldShowPasswordReveal ? "pr-8" : "",
@@ -18550,10 +18543,7 @@ var AirbnbInput = React74.forwardRef(
               type: "button",
               onClick: togglePasswordReveal,
               disabled: isBlocked,
-              className: cn(
-                "absolute right-0 flex h-6 w-6 items-center justify-center border-0 bg-transparent p-0 text-[#7A8399] hover:text-[#1F1F1B] hover:opacity-85 disabled:cursor-not-allowed disabled:opacity-50",
-                variant === "airbnb" ? "bottom-0" : "bottom-[12px]"
-              ),
+              className: "absolute bottom-0 right-0 flex h-6 w-6 items-center justify-center border-0 bg-transparent p-0 text-[#7A8399] hover:text-[#1F1F1B] hover:opacity-85 disabled:cursor-not-allowed disabled:opacity-50",
               "aria-label": isPasswordRevealed ? t("hide_password") : t("show_password"),
               children: /* @__PURE__ */ (0, import_jsx_runtime186.jsx)(
                 import_lucide_react54.Eye,
@@ -18929,7 +18919,6 @@ var AirbnbSelectTrigger = React75.forwardRef(
   ({
     id,
     open,
-    variant,
     label,
     topLabel,
     helperText,
@@ -18955,7 +18944,6 @@ var AirbnbSelectTrigger = React75.forwardRef(
       {
         id,
         ref,
-        variant,
         "aria-haspopup": "listbox",
         "aria-expanded": open,
         "aria-controls": listboxId,
@@ -19347,7 +19335,6 @@ var AirbnbSelect = React79.forwardRef(function AirbnbSelect2({
   value,
   onChange,
   onBlur,
-  variant = "default",
   label,
   topLabel,
   placeholder,
@@ -19366,11 +19353,13 @@ var AirbnbSelect = React79.forwardRef(function AirbnbSelect2({
   doneLabel = "Done",
   mobileTitle,
   name,
-  noOptionsMessage
+  noOptionsMessage,
+  filterOption
 }, ref) {
   const { isMatch: isMobile3 } = useScreenResize(DEVICE.mobileXL);
   const [isOpen, setIsOpen] = React79.useState(false);
   const containerRef = React79.useRef(null);
+  const filteredOptions = filterOption ? options.filter(filterOption) : options;
   const hasValue = Boolean(value);
   const helperText = placeholder ?? label;
   const shouldDescribeHelperText = !hasValue && helperText !== label;
@@ -19401,7 +19390,7 @@ var AirbnbSelect = React79.forwardRef(function AirbnbSelect2({
   } = useMobileSelectWheel({
     isMobile: isMobile3,
     isOpen,
-    options,
+    options: filteredOptions,
     value,
     disabled: isBlocked
   });
@@ -19418,13 +19407,13 @@ var AirbnbSelect = React79.forwardRef(function AirbnbSelect2({
   } = useDesktopSelect({
     isMobile: isMobile3,
     isOpen,
-    options,
+    options: filteredOptions,
     value,
     disabled: isBlocked,
     onChange
   });
   const combinedRef = useCombinedRef(ref, desktopTriggerRef);
-  const activeMobileIndex = getOptionIndex2(options, pendingValue);
+  const activeMobileIndex = getOptionIndex2(filteredOptions, pendingValue);
   const valueLabel = value ? getValueLabel?.(value) ?? String(value.label) : void 0;
   useOutsideClick({
     elementRef: containerRef,
@@ -19441,12 +19430,12 @@ var AirbnbSelect = React79.forwardRef(function AirbnbSelect2({
       if (value?.value === void 0 || value.value === null || value.label !== "") {
         return;
       }
-      const validOption = options.find((option) => option.value === value.value);
+      const validOption = filteredOptions.find((option) => option.value === value.value);
       if (validOption) {
         onChange(validOption);
       }
     },
-    [onChange, options, value]
+    [onChange, filteredOptions, value]
   );
   const handleMobileOpenChange = React79.useCallback(
     (nextOpen) => {
@@ -19531,7 +19520,6 @@ var AirbnbSelect = React79.forwardRef(function AirbnbSelect2({
         renderTrigger ? renderTrigger({
           id: triggerId,
           open: isOpen,
-          variant,
           label,
           topLabel,
           helperText,
@@ -19555,7 +19543,6 @@ var AirbnbSelect = React79.forwardRef(function AirbnbSelect2({
             id: triggerId,
             ref: combinedRef,
             open: isOpen,
-            variant,
             label,
             topLabel,
             helperText,
@@ -19589,7 +19576,7 @@ var AirbnbSelect = React79.forwardRef(function AirbnbSelect2({
             mobileTitle,
             doneLabel,
             errorId: describedErrorId,
-            options,
+            options: filteredOptions,
             disabled: isBlocked,
             menuClassName,
             scrollTop: mobileScrollTop,
@@ -19609,7 +19596,7 @@ var AirbnbSelect = React79.forwardRef(function AirbnbSelect2({
             listboxId,
             labelId,
             errorId: describedErrorId,
-            options,
+            options: filteredOptions,
             value,
             highlightedIndex,
             onOptionClick: (option) => {
@@ -19644,7 +19631,6 @@ function formatPhoneCodeOptionLabel2(option) {
 }
 var AirbnbPhoneField = React80.forwardRef(
   ({
-    variant = "default",
     label,
     topLabel,
     value,
@@ -19716,7 +19702,6 @@ var AirbnbPhoneField = React80.forwardRef(
           AirbnbSelect,
           {
             ref,
-            variant,
             options: codeOptions,
             value: selectedCodeOption,
             onChange: (option) => onChange({
@@ -19735,7 +19720,6 @@ var AirbnbPhoneField = React80.forwardRef(
             renderTrigger: ({
               id,
               open,
-              variant: selectVariant,
               disabled: triggerDisabled,
               loading: triggerLoading,
               listboxId,
@@ -19759,9 +19743,8 @@ var AirbnbPhoneField = React80.forwardRef(
                 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]",
-                  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]",
+                  "flex h-full min-h-[60px] w-full items-center justify-center gap-2 rounded-l-[16px] rounded-r-none border border-r-0 px-4 text-[16px] font-medium leading-6 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#1F1F1B] focus-visible:ring-offset-2",
+                  hasInvalidState ? "border-[var(--status-danger)] bg-[#F2F2F2] text-[var(--status-danger)]" : "border-[#8C8C8C] bg-[#F4F4F2] text-[#1F1F1B]",
                   triggerDisabled ? "cursor-not-allowed opacity-50" : triggerLoading ? "cursor-progress" : "cursor-pointer"
                 ),
                 children: [
@@ -19782,7 +19765,6 @@ var AirbnbPhoneField = React80.forwardRef(
           AirbnbInput,
           {
             id: inputId,
-            variant,
             type: "tel",
             inputMode: "tel",
             label,
@@ -19797,10 +19779,8 @@ var AirbnbPhoneField = React80.forwardRef(
             tooltip,
             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]"),
+            fieldClassName: "min-h-[60px] rounded-l-none rounded-r-[16px] border-l-0",
+            contentClassName: "h-[40px] py-2",
             inputClassName: "text-[16px] leading-7",
             onChange: (event) => onChange({
               code: value?.code ?? "",
@@ -19841,7 +19821,6 @@ var AirbnbSearchableSelectInternal = ({
   loading,
   hasNextPage,
   onLoadMore,
-  variant = "default",
   label,
   topLabel,
   placeholder,
@@ -20025,7 +20004,6 @@ var AirbnbSearchableSelectInternal = ({
       {
         id: `${reactId}-trigger`,
         ref: triggerRef,
-        variant,
         "aria-haspopup": "listbox",
         "aria-expanded": open,
         "aria-controls": listboxId,
@@ -20308,59 +20286,83 @@ var React83 = __toESM(require("react"), 1);
 var SwitchPrimitives2 = __toESM(require("@radix-ui/react-switch"), 1);
 var import_lucide_react59 = require("lucide-react");
 var import_jsx_runtime196 = require("react/jsx-runtime");
-var AirbnbSwitch = React83.forwardRef(({ className, value, onChange, disabled, loading, readOnly, id, label, error, wrapperClassName, ...props }, ref) => {
-  const generatedId = React83.useId();
-  const fieldId = id || generatedId;
-  const switchElement = /* @__PURE__ */ (0, import_jsx_runtime196.jsx)(
-    SwitchPrimitives2.Root,
-    {
-      ref,
-      className: cn(
-        "group inline-flex h-[24px] w-[36px] shrink-0 cursor-pointer items-center rounded-full border border-solid border-transparent p-[2px] transition-colors duration-200",
-        "focus-visible:outline-none focus-visible:shadow-[var(--chekin-shadow-focus)]",
-        "disabled:cursor-not-allowed disabled:opacity-50 aria-busy:cursor-wait aria-busy:opacity-50",
-        "aria-readonly:cursor-default aria-readonly:opacity-100",
-        "data-[state=checked]:bg-[#222222] data-[state=unchecked]:bg-[#E7E7E4]",
-        className
-      ),
-      id: fieldId,
-      disabled,
-      checked: value,
-      value: String(value),
-      onCheckedChange: !disabled && !readOnly ? onChange : void 0,
-      "aria-busy": loading,
-      "aria-readonly": readOnly,
-      ...props,
-      children: /* @__PURE__ */ (0, import_jsx_runtime196.jsx)(
-        SwitchPrimitives2.Thumb,
-        {
-          className: cn(
-            "flex h-[20px] w-[20px] items-center justify-center rounded-full bg-white shadow-[0_1px_3px_rgba(0,0,0,0.22)] transition-transform duration-200",
-            "data-[state=checked]:translate-x-[12px] data-[state=unchecked]:translate-x-0"
-          ),
-          children: /* @__PURE__ */ (0, import_jsx_runtime196.jsx)(
-            import_lucide_react59.Check,
-            {
-              "aria-hidden": "true",
-              className: "h-3 w-3 text-[#222222] opacity-0 transition-opacity duration-150 group-data-[state=checked]:opacity-100",
-              strokeWidth: 3
-            }
-          )
-        }
-      )
+var AirbnbSwitch = React83.forwardRef(
+  ({
+    className,
+    value,
+    onChange,
+    disabled,
+    loading,
+    readOnly,
+    id,
+    label,
+    error,
+    wrapperClassName,
+    ...props
+  }, ref) => {
+    const generatedId = React83.useId();
+    const fieldId = id || generatedId;
+    const switchElement = /* @__PURE__ */ (0, import_jsx_runtime196.jsx)(
+      SwitchPrimitives2.Root,
+      {
+        ref,
+        className: cn(
+          "group inline-flex h-[24px] w-[36px] shrink-0 cursor-pointer items-center rounded-full border border-solid border-transparent p-[2px] transition-colors duration-200",
+          "focus-visible:outline-none focus-visible:shadow-[var(--chekin-shadow-focus)]",
+          "disabled:cursor-not-allowed disabled:opacity-50 aria-busy:cursor-wait aria-busy:opacity-50",
+          "aria-readonly:cursor-default aria-readonly:opacity-100",
+          "data-[state=checked]:bg-[#222222] data-[state=unchecked]:bg-[#E7E7E4]",
+          className
+        ),
+        id: fieldId,
+        disabled,
+        checked: value,
+        value: String(value),
+        onCheckedChange: !disabled && !readOnly ? onChange : void 0,
+        "aria-busy": loading,
+        "aria-readonly": readOnly,
+        ...props,
+        children: /* @__PURE__ */ (0, import_jsx_runtime196.jsx)(
+          SwitchPrimitives2.Thumb,
+          {
+            className: cn(
+              "flex h-[20px] w-[20px] items-center justify-center rounded-full bg-white shadow-[0_1px_3px_rgba(0,0,0,0.22)] transition-transform duration-200",
+              "data-[state=checked]:translate-x-[12px] data-[state=unchecked]:translate-x-0"
+            ),
+            children: /* @__PURE__ */ (0, import_jsx_runtime196.jsx)(
+              import_lucide_react59.Check,
+              {
+                "aria-hidden": "true",
+                className: "h-3 w-3 text-[#222222] opacity-0 transition-opacity duration-150 group-data-[state=checked]:opacity-100",
+                strokeWidth: 3
+              }
+            )
+          }
+        )
+      }
+    );
+    if (!label && !error) {
+      return switchElement;
     }
-  );
-  if (!label && !error) {
-    return switchElement;
+    return /* @__PURE__ */ (0, import_jsx_runtime196.jsxs)(import_jsx_runtime196.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime196.jsxs)("div", { className: cn("flex items-center gap-x-3 gap-y-1.5", wrapperClassName), children: [
+        switchElement,
+        label && /* @__PURE__ */ (0, import_jsx_runtime196.jsx)(
+          Label,
+          {
+            htmlFor: fieldId,
+            className: cn(
+              "text-base font-medium",
+              readOnly ? "cursor-default" : "cursor-pointer"
+            ),
+            children: label
+          }
+        )
+      ] }),
+      error && /* @__PURE__ */ (0, import_jsx_runtime196.jsx)(ErrorMessage, { disabled, children: error })
+    ] });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime196.jsxs)(import_jsx_runtime196.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime196.jsxs)("div", { className: cn("flex items-center gap-x-3 gap-y-1.5", wrapperClassName), children: [
-      switchElement,
-      label && /* @__PURE__ */ (0, import_jsx_runtime196.jsx)(Label, { htmlFor: fieldId, className: "cursor-pointer text-base font-medium", children: label })
-    ] }),
-    error && /* @__PURE__ */ (0, import_jsx_runtime196.jsx)(ErrorMessage, { disabled, children: error })
-  ] });
-});
+);
 AirbnbSwitch.displayName = "AirbnbSwitch";
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {