@chekinapp/ui 0.0.115 → 0.0.117

package/dist/index.cjs

@@ -42,6 +42,7 @@ __export(index_exports, {
   AirbnbSearchInput: () => AirbnbSearchInput,
   AirbnbSearchableSelect: () => AirbnbSearchableSelect,
   AirbnbSelect: () => AirbnbSelect,
+  AirbnbSwitch: () => AirbnbSwitch,
   Alert: () => Alert,
   AlertBox: () => AlertBox,
   AlertDescription: () => AlertDescription,
@@ -5147,7 +5148,7 @@ function Header2({ children, className, ...props }) {
     "h2",
     {
       className: cn(
-        "m-0 flex items-center gap-2 self-stretch p-0 text-2xl font-semibold leading-normal text-[var(--chekin-color-brand-navy)]",
+        "m-0 flex items-center gap-2 self-stretch p-0 text-2xl font-semibold leading-normal text-[var(--form-box-title-color)]",
         className
       ),
       ...props,
@@ -5163,7 +5164,7 @@ function Root11({ children, nested, className, ...props }) {
     "div",
     {
       className: cn(
-        "flex max-w-[1400px] flex-col items-start gap-6 self-stretch rounded-[10px] border border-[var(--chekin-color-gray-separator)] p-6 [container-type:inline-size]",
+        "flex max-w-[1400px] flex-col items-start gap-6 self-stretch rounded-[var(--form-box-radius)] border border-[var(--form-box-border)] p-6 [container-type:inline-size]",
         nested && "border-0 p-0",
         className
       ),
@@ -5180,7 +5181,7 @@ function SubHeader({ children, className, ...props }) {
     "h4",
     {
       className: cn(
-        "m-0 flex items-center gap-2 self-stretch border-b border-[var(--chekin-color-gray-separator)] px-0 py-2 text-base font-semibold leading-normal text-[var(--chekin-color-brand-navy)]",
+        "m-0 flex items-center gap-2 self-stretch border-b border-[var(--form-box-subtitle-border)] px-0 py-2 text-base font-semibold leading-normal text-[var(--form-box-subtitle-color)]",
         className
       ),
       ...props,
@@ -12871,6 +12872,23 @@ var React45 = __toESM(require("react"), 1);
 var import_react_i18next28 = require("react-i18next");
 
 // src/dashboard/_select-internals/utils.ts
+function isOptionGroup(item) {
+  if (!item || typeof item !== "object") return false;
+  if ("value" in item) return false;
+  return Array.isArray(item.options);
+}
+function flattenGroupedOptions(items) {
+  if (!items) return [];
+  const result = [];
+  for (const item of items) {
+    if (isOptionGroup(item)) {
+      for (const option of item.options) result.push(option);
+    } else {
+      result.push(item);
+    }
+  }
+  return result;
+}
 function isOptionEnabled(option, isOptionDisabled) {
   if (!option) return false;
   if (option.isDisabled) return false;
@@ -12968,6 +12986,52 @@ function DefaultOption(props) {
 
 // src/dashboard/_select-internals/SelectMenu.tsx
 var import_jsx_runtime148 = require("react/jsx-runtime");
+function buildMenuEntries(groupedOptions, options, formatGroupLabel, listboxId) {
+  if (!groupedOptions || !groupedOptions.some((item) => isOptionGroup(item))) {
+    return options.map((option, index) => ({
+      kind: "option",
+      key: `${String(option.value)}-${index}`,
+      option,
+      flatIndex: index
+    }));
+  }
+  const visibleValues = new Set(options.map((option) => option.value));
+  const entries = [];
+  let flatIndex = 0;
+  let groupCount = 0;
+  for (const item of groupedOptions) {
+    if (isOptionGroup(item)) {
+      const visible = [];
+      for (const option of item.options) {
+        if (!visibleValues.has(option.value)) continue;
+        visible.push({
+          key: `${String(option.value)}-${flatIndex}`,
+          option,
+          flatIndex
+        });
+        flatIndex += 1;
+      }
+      if (visible.length === 0) continue;
+      entries.push({
+        kind: "group",
+        key: `__group-${groupCount}`,
+        labelId: `${listboxId}-group-${groupCount}`,
+        label: formatGroupLabel ? formatGroupLabel(item) : item.label,
+        options: visible
+      });
+      groupCount += 1;
+    } else if (visibleValues.has(item.value)) {
+      entries.push({
+        kind: "option",
+        key: `${String(item.value)}-${flatIndex}`,
+        option: item,
+        flatIndex
+      });
+      flatIndex += 1;
+    }
+  }
+  return entries;
+}
 function SelectMenu({
   id,
   options,
@@ -12993,7 +13057,9 @@ function SelectMenu({
   inputValue = "",
   formatOptionLabel,
   isOptionSelected: isOptionSelected2,
-  onMenuScrollToBottom
+  onMenuScrollToBottom,
+  groupedOptions,
+  formatGroupLabel
 }) {
   const { t } = (0, import_react_i18next28.useTranslation)();
   const emptyMessage = noOptionsMessage?.() ?? t("no_options");
@@ -13004,6 +13070,38 @@ function SelectMenu({
     () => selectedValues ?? (selectedValue ? [selectedValue] : []),
     [selectedValues, selectedValue]
   );
+  const entries = React45.useMemo(
+    () => buildMenuEntries(groupedOptions, options, formatGroupLabel, id),
+    [groupedOptions, options, formatGroupLabel, id]
+  );
+  const renderOption = (entry) => {
+    const { option, flatIndex, key } = entry;
+    const isSelected = isOptionSelected2 ? isOptionSelected2(option, selectedList) : isOptionSelected(option, selectedValue, selectedValues);
+    const isHighlighted = flatIndex === highlightedIndex;
+    const optionDisabled = Boolean(
+      disabled || option.isDisabled || isOptionDisabled?.(option)
+    );
+    return /* @__PURE__ */ (0, import_jsx_runtime148.jsx)(
+      Option,
+      {
+        id: getOptionId2(flatIndex),
+        option,
+        index: flatIndex,
+        isSelected,
+        isHighlighted,
+        isDisabled: optionDisabled,
+        isLast: flatIndex === lastIndex,
+        isMulti: Boolean(isMulti),
+        onClick: onOptionClick,
+        onHover: onOptionHover ?? (() => void 0),
+        innerRef: (node) => selectedOptionRef?.(flatIndex, node),
+        inputValue,
+        selectedOptions: selectedList,
+        formatOptionLabel
+      },
+      key
+    );
+  };
   const wasAtBottomRef = React45.useRef(false);
   const handleScroll = React45.useCallback(
     (event) => {
@@ -13037,32 +13135,21 @@ function SelectMenu({
       ),
       children: [
         !hasOptions && (emptyContent ?? /* @__PURE__ */ (0, import_jsx_runtime148.jsx)("div", { className: "px-3 py-3 text-left text-[14px] font-medium text-[var(--chekin-color-gray-1)]", children: emptyMessage })),
-        options.map((option, index) => {
-          const isSelected = isOptionSelected2 ? isOptionSelected2(option, selectedList) : isOptionSelected(option, selectedValue, selectedValues);
-          const isHighlighted = index === highlightedIndex;
-          const optionDisabled = Boolean(
-            disabled || option.isDisabled || isOptionDisabled?.(option)
-          );
-          return /* @__PURE__ */ (0, import_jsx_runtime148.jsx)(
-            Option,
-            {
-              id: getOptionId2(index),
-              option,
-              index,
-              isSelected,
-              isHighlighted,
-              isDisabled: optionDisabled,
-              isLast: index === lastIndex,
-              isMulti: Boolean(isMulti),
-              onClick: onOptionClick,
-              onHover: onOptionHover ?? (() => void 0),
-              innerRef: (node) => selectedOptionRef?.(index, node),
-              inputValue,
-              selectedOptions: selectedList,
-              formatOptionLabel
-            },
-            `${String(option.value)}-${index}`
-          );
+        entries.map((entry) => {
+          if (entry.kind === "group") {
+            return /* @__PURE__ */ (0, import_jsx_runtime148.jsxs)("div", { role: "group", "aria-labelledby": entry.labelId, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime148.jsx)(
+                "div",
+                {
+                  id: entry.labelId,
+                  className: "px-3 pb-1 pt-2 text-[11px] font-semibold uppercase tracking-wide text-[var(--chekin-color-gray-1)]",
+                  children: entry.label
+                }
+              ),
+              entry.options.map(renderOption)
+            ] }, entry.key);
+          }
+          return renderOption(entry);
         }),
         footer
       ]
@@ -13991,7 +14078,9 @@ function DefaultMenuList(props) {
     inputValue,
     formatOptionLabel,
     isOptionSelected: isOptionSelected2,
-    onMenuScrollToBottom
+    onMenuScrollToBottom,
+    groupedOptions,
+    formatGroupLabel
   } = props;
   return /* @__PURE__ */ (0, import_jsx_runtime156.jsx)(
     SelectMenu,
@@ -14019,7 +14108,9 @@ function DefaultMenuList(props) {
       inputValue,
       formatOptionLabel,
       isOptionSelected: isOptionSelected2,
-      onMenuScrollToBottom
+      onMenuScrollToBottom,
+      groupedOptions,
+      formatGroupLabel
     }
   );
 }
@@ -14111,7 +14202,8 @@ function SelectInternal(props, ref) {
     searchPosition = "trigger",
     menuHeader,
     onMenuScrollToBottom,
-    leftIcon
+    leftIcon,
+    formatGroupLabel
   } = props;
   const isSearchInDropdown = searchPosition === "dropdown";
   const isMulti = props.isMulti === true;
@@ -14132,9 +14224,10 @@ function SelectInternal(props, ref) {
     },
     [isMulti, props.onChange]
   );
+  const flatOptions = React49.useMemo(() => flattenGroupedOptions(options), [options]);
   const state = useSelectState({
     isMulti,
-    options,
+    options: flatOptions,
     selectedOptions,
     onSelectionChange,
     filterOption,
@@ -14305,7 +14398,9 @@ function SelectInternal(props, ref) {
                   inputValue: state.inputValue,
                   formatOptionLabel,
                   isOptionSelected: isOptionSelected2,
-                  onMenuScrollToBottom
+                  onMenuScrollToBottom,
+                  groupedOptions: options,
+                  formatGroupLabel
                 }
               ),
               state.canCreateNewOption && /* @__PURE__ */ (0, import_jsx_runtime158.jsx)(
@@ -15059,13 +15154,7 @@ function createCountTrigger(opts) {
 
 // src/dashboard/select-checkboxes/SelectAllRow.tsx
 var import_jsx_runtime169 = require("react/jsx-runtime");
-function SelectAllRow({
-  label,
-  checked,
-  indeterminate,
-  disabled,
-  onToggle
-}) {
+function SelectAllRow({ label, checked, disabled, onToggle }) {
   return /* @__PURE__ */ (0, import_jsx_runtime169.jsxs)(
     "button",
     {
@@ -15080,7 +15169,7 @@ function SelectAllRow({
         /* @__PURE__ */ (0, import_jsx_runtime169.jsx)(
           BaseCheckbox,
           {
-            checked: indeterminate ? "indeterminate" : checked,
+            checked,
             disabled,
             size: "s",
             tabIndex: -1,
@@ -15116,7 +15205,6 @@ function SelectCheckboxesInternal(props, ref) {
     allowSelectAll = false,
     selectAllLabel,
     searchable = true,
-    searchPlaceholder,
     filterOption = defaultFilterOption,
     closeMenuOnSelect = false,
     onSearchChange,
@@ -15128,19 +15216,32 @@ function SelectCheckboxesInternal(props, ref) {
   );
   const [inputValue, setInputValue] = React59.useState("");
   const selected = value ?? [];
-  const filteredOptions = React59.useMemo(() => {
+  const flatRawOptions = React59.useMemo(
+    () => flattenGroupedOptions(rawOptions),
+    [rawOptions]
+  );
+  const filteredGrouped = React59.useMemo(() => {
     const trimmed = inputValue.trim();
     if (!trimmed) return rawOptions;
-    return rawOptions.filter((option) => filterOption(option, trimmed));
+    return rawOptions.map((item) => {
+      if (isOptionGroup(item)) {
+        const opts = item.options.filter((o) => filterOption(o, trimmed));
+        return opts.length > 0 ? { ...item, options: opts } : null;
+      }
+      return filterOption(item, trimmed) ? item : null;
+    }).filter((item) => item !== null);
   }, [rawOptions, inputValue, filterOption]);
-  const visibleSelectedCount = filteredOptions.reduce((acc, option) => {
+  const filteredFlat = React59.useMemo(
+    () => flattenGroupedOptions(filteredGrouped),
+    [filteredGrouped]
+  );
+  const visibleSelectedCount = filteredFlat.reduce((acc, option) => {
     return acc + (selected.some((s) => s.value === option.value) ? 1 : 0);
   }, 0);
-  const allVisibleSelected = filteredOptions.length > 0 && visibleSelectedCount === filteredOptions.length;
-  const someVisibleSelected = visibleSelectedCount > 0 && visibleSelectedCount < filteredOptions.length;
+  const allVisibleSelected = filteredFlat.length > 0 && visibleSelectedCount === filteredFlat.length;
   const handleToggleAll = React59.useCallback(() => {
     if (allVisibleSelected) {
-      const visibleValues = new Set(filteredOptions.map((option) => option.value));
+      const visibleValues = new Set(filteredFlat.map((option) => option.value));
       onChange(
         selected.filter((s) => !visibleValues.has(s.value)),
         { action: "deselect" }
@@ -15148,18 +15249,18 @@ function SelectCheckboxesInternal(props, ref) {
       return;
     }
     const merged = [...selected];
-    for (const option of filteredOptions) {
+    for (const option of filteredFlat) {
       if (!merged.some((s) => s.value === option.value)) merged.push(option);
     }
     onChange(merged, { action: "select" });
-  }, [allVisibleSelected, filteredOptions, onChange, selected]);
+  }, [allVisibleSelected, filteredFlat, onChange, selected]);
   const Control = React59.useMemo(() => {
     if (trigger) return makeTriggerSlot2(trigger);
     return createCountTrigger({
       valueText,
-      totalCount: rawOptions.length
+      totalCount: flatRawOptions.length
     });
-  }, [trigger, valueText, rawOptions.length]);
+  }, [trigger, valueText, flatRawOptions.length]);
   const components = React59.useMemo(
     () => ({
       ...userComponents,
@@ -15173,7 +15274,6 @@ function SelectCheckboxesInternal(props, ref) {
     {
       label: selectAllLabel ?? t("select_all", { defaultValue: "Select All" }),
       checked: allVisibleSelected,
-      indeterminate: someVisibleSelected,
       onToggle: handleToggleAll
     }
   ) : void 0;
@@ -15184,11 +15284,10 @@ function SelectCheckboxesInternal(props, ref) {
     },
     [onSearchChange]
   );
-  const sharedProps = {
+  const baseSharedProps = {
     ...paginationAndRest,
     value,
     onChange,
-    options: filteredOptions,
     filterOption: passthroughFilter2,
     components,
     closeMenuOnSelect,
@@ -15202,7 +15301,10 @@ function SelectCheckboxesInternal(props, ref) {
       InfiniteScrollSelect,
       {
         ref,
-        ...sharedProps
+        ...{
+          ...baseSharedProps,
+          options: filteredFlat
+        }
       }
     );
   }
@@ -15210,7 +15312,10 @@ function SelectCheckboxesInternal(props, ref) {
     Select,
     {
       ref,
-      ...sharedProps
+      ...{
+        ...baseSharedProps,
+        options: filteredGrouped
+      }
     }
   );
 }
@@ -16133,7 +16238,7 @@ var Datepicker = React63.forwardRef(
     hideErrorMessage,
     helperText,
     width,
-    locale = "en-US",
+    locale,
     minDate,
     maxDate,
     formatValue
@@ -16152,10 +16257,11 @@ var Datepicker = React63.forwardRef(
     const yearId = `${baseId}-year`;
     const labelId = `${baseId}-label`;
     const errorId = `${baseId}-error`;
-    const { t } = (0, import_react_i18next39.useTranslation)();
+    const { t, i18n } = (0, import_react_i18next39.useTranslation)();
+    const resolvedLocale = locale ?? i18n.resolvedLanguage ?? i18n.language ?? "en-US";
     const resolvedMonthLabels = React63.useMemo(
-      () => monthLabels ?? getMonthLabels2(locale),
-      [locale, monthLabels]
+      () => monthLabels ?? getMonthLabels2(resolvedLocale),
+      [resolvedLocale, monthLabels]
     );
     const resolvedMonthPlaceholder = monthPlaceholder ?? t("month");
     const resolvedDoneLabel = doneLabel ?? t("done");
@@ -17954,7 +18060,7 @@ var AirbnbFieldTrigger = React72.forwardRef(
     const hasLabelMeta = Boolean(optionalLabel) || Boolean(tooltip);
     const resolvedLabelText = visibleLabelText && hasLabelMeta ? /* @__PURE__ */ (0, import_jsx_runtime184.jsxs)("span", { className: "inline-flex max-w-full items-center gap-1.5 align-middle", children: [
       /* @__PURE__ */ (0, import_jsx_runtime184.jsx)("span", { className: "min-w-0 truncate", children: visibleLabelText }),
-      optionalLabel && /* @__PURE__ */ (0, import_jsx_runtime184.jsxs)("span", { className: "shrink-0 text-[12px] relative top-[1px] font-normal leading-4 text-current opacity-70", children: [
+      optionalLabel && /* @__PURE__ */ (0, import_jsx_runtime184.jsxs)("span", { className: "text-current opacity-70 lowercase", children: [
         "(",
         optionalLabel,
         ")"
@@ -18008,8 +18114,8 @@ var AirbnbFieldTrigger = React72.forwardRef(
               {
                 id: labelId,
                 className: cn(
-                  "absolute left-0 origin-left truncate transition-all duration-200 ease-out",
-                  hasLabelMeta ? "" : "pointer-events-none",
+                  "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]"
                 ),
@@ -18277,6 +18383,8 @@ AirbnbDatePicker.displayName = "AirbnbDatePicker";
 
 // src/airbnb-fields/input/Input.tsx
 var React74 = __toESM(require("react"), 1);
+var import_lucide_react54 = require("lucide-react");
+var import_react_i18next44 = require("react-i18next");
 var import_jsx_runtime186 = require("react/jsx-runtime");
 var getInputValue = (value) => value != null ? String(value) : "";
 var AirbnbInput = React74.forwardRef(
@@ -18308,6 +18416,7 @@ var AirbnbInput = React74.forwardRef(
     placeholder,
     ...props
   }, ref) => {
+    const { t } = (0, import_react_i18next44.useTranslation)();
     const generatedId = React74.useId();
     const inputRef = React74.useRef(null);
     const inputId = id ?? generatedId;
@@ -18316,11 +18425,15 @@ var AirbnbInput = React74.forwardRef(
     const errorId = `${inputId}-error`;
     const accessibleLabel = placeholder ?? label;
     const [isFocused, setIsFocused] = React74.useState(false);
+    const [isPasswordRevealed, setIsPasswordRevealed] = React74.useState(false);
     const [currentValue, setCurrentValue] = React74.useState(
       () => value != null ? getInputValue(value) : getInputValue(defaultValue)
     );
     const resolvedValue = value != null ? getInputValue(value) : currentValue;
     const hasValue = resolvedValue.length > 0;
+    const isPasswordInput = type === "password";
+    const inputType = isPasswordInput && isPasswordRevealed ? "text" : type;
+    const shouldShowPasswordReveal = isPasswordInput && hasValue && !loading;
     const shouldShowLabel = hasValue || isFocused;
     const hasInvalidState = Boolean(error) || Boolean(invalid);
     const triggerError = error ?? invalid;
@@ -18330,6 +18443,11 @@ var AirbnbInput = React74.forwardRef(
       const nextValue = value != null ? getInputValue(value) : getInputValue(inputRef.current?.value);
       setCurrentValue((prevValue) => prevValue === nextValue ? prevValue : nextValue);
     }, [value]);
+    React74.useEffect(() => {
+      if (!isPasswordInput) {
+        setIsPasswordRevealed(false);
+      }
+    }, [isPasswordInput]);
     const setRefs = React74.useCallback(
       (node) => {
         inputRef.current = node;
@@ -18360,7 +18478,10 @@ var AirbnbInput = React74.forwardRef(
       setIsFocused(false);
       onBlur?.(event);
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime186.jsx)("div", { className: cn("w-full max-w-[var(--max-field-width)]", wrapperClassName), children: /* @__PURE__ */ (0, import_jsx_runtime186.jsx)(
+    const togglePasswordReveal = () => {
+      setIsPasswordRevealed((isRevealed) => !isRevealed);
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime186.jsx)("div", { className: cn("w-full max-w-[var(--max-field-width)]", wrapperClassName), children: /* @__PURE__ */ (0, import_jsx_runtime186.jsxs)(
       AirbnbFieldTrigger,
       {
         as: "div",
@@ -18388,39 +18509,63 @@ var AirbnbInput = React74.forwardRef(
           variant === "airbnb" ? "h-[42px]" : "h-[48px]",
           contentClassName
         ),
-        trailingAdornment,
+        trailingAdornment: shouldShowPasswordReveal ? void 0 : trailingAdornment,
         forceFloatingLabel: shouldShowLabel,
         forceLabelText: hasLabelMeta,
         hideErrorMessage: !renderErrorMessage,
-        children: /* @__PURE__ */ (0, import_jsx_runtime186.jsx)(
-          "input",
-          {
-            ...props,
-            id: inputId,
-            ref: setRefs,
-            type,
-            disabled: isBlocked,
-            value,
-            defaultValue,
-            onChange: handleChange,
-            onFocus: handleFocus,
-            onBlur: handleBlur,
-            placeholder: "",
-            "aria-invalid": hasInvalidState,
-            "aria-busy": loading,
-            "aria-describedby": error && renderErrorMessage ? errorId : void 0,
-            "aria-label": accessibleLabel && hasLabelMeta ? accessibleLabel : void 0,
-            "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]",
-              hasInvalidState ? "text-[var(--status-danger)] placeholder:text-[var(--status-danger)]" : "",
-              disabled ? "cursor-not-allowed" : loading ? "cursor-progress" : "",
-              inputClassName,
-              className
-            )
-          }
-        )
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime186.jsx)(
+            "input",
+            {
+              ...props,
+              id: inputId,
+              ref: setRefs,
+              type: inputType,
+              disabled: isBlocked,
+              value,
+              defaultValue,
+              onChange: handleChange,
+              onFocus: handleFocus,
+              onBlur: handleBlur,
+              placeholder: "",
+              "aria-invalid": hasInvalidState,
+              "aria-busy": loading,
+              "aria-describedby": error && renderErrorMessage ? errorId : void 0,
+              "aria-label": accessibleLabel && hasLabelMeta ? accessibleLabel : void 0,
+              "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]",
+                hasInvalidState ? "text-[var(--status-danger)] placeholder:text-[var(--status-danger)]" : "",
+                disabled ? "cursor-not-allowed" : loading ? "cursor-progress" : "",
+                shouldShowPasswordReveal ? "pr-8" : "",
+                inputClassName,
+                className
+              )
+            }
+          ),
+          shouldShowPasswordReveal && /* @__PURE__ */ (0, import_jsx_runtime186.jsx)(
+            "button",
+            {
+              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]"
+              ),
+              "aria-label": isPasswordRevealed ? t("hide_password") : t("show_password"),
+              children: /* @__PURE__ */ (0, import_jsx_runtime186.jsx)(
+                import_lucide_react54.Eye,
+                {
+                  size: 18,
+                  "aria-hidden": "true",
+                  className: cn(isPasswordRevealed ? "text-[#fc98dd]" : "")
+                }
+              )
+            }
+          )
+        ]
       }
     ) });
   }
@@ -18429,7 +18574,7 @@ AirbnbInput.displayName = "AirbnbInput";
 
 // src/airbnb-fields/phone-field/PhoneField.tsx
 var React80 = __toESM(require("react"), 1);
-var import_lucide_react55 = require("lucide-react");
+var import_lucide_react56 = require("lucide-react");
 
 // src/airbnb-fields/select/Select.tsx
 var React79 = __toESM(require("react"), 1);
@@ -18778,7 +18923,7 @@ function AirbnbSelectMobileContent({
 
 // src/airbnb-fields/select/SelectTrigger.tsx
 var React75 = __toESM(require("react"), 1);
-var import_lucide_react54 = require("lucide-react");
+var import_lucide_react55 = require("lucide-react");
 var import_jsx_runtime191 = require("react/jsx-runtime");
 var AirbnbSelectTrigger = React75.forwardRef(
   ({
@@ -18835,7 +18980,7 @@ var AirbnbSelectTrigger = React75.forwardRef(
         onKeyDown,
         onBlur,
         trailingAdornment: /* @__PURE__ */ (0, import_jsx_runtime191.jsx)(
-          import_lucide_react54.ChevronDown,
+          import_lucide_react55.ChevronDown,
           {
             className: open ? "h-6 w-6 rotate-180 text-[#1F1F1B] transition-transform" : "h-6 w-6 text-[#1F1F1B] transition-transform"
           }
@@ -19622,7 +19767,7 @@ var AirbnbPhoneField = React80.forwardRef(
                 children: [
                   /* @__PURE__ */ (0, import_jsx_runtime193.jsx)("span", { children: valueLabel ?? codePlaceholder }),
                   /* @__PURE__ */ (0, import_jsx_runtime193.jsx)(
-                    import_lucide_react55.ChevronDown,
+                    import_lucide_react56.ChevronDown,
                     {
                       className: cn("h-5 w-5 transition-transform", open ? "rotate-180" : ""),
                       strokeWidth: 2
@@ -19673,7 +19818,7 @@ AirbnbPhoneField.displayName = "AirbnbPhoneField";
 
 // src/airbnb-fields/searchable-select/SearchableSelect.tsx
 var React81 = __toESM(require("react"), 1);
-var import_lucide_react56 = require("lucide-react");
+var import_lucide_react57 = require("lucide-react");
 var import_react_virtual3 = require("@tanstack/react-virtual");
 var import_react90 = require("react");
 var import_jsx_runtime194 = require("react/jsx-runtime");
@@ -19911,7 +20056,7 @@ var AirbnbSearchableSelectInternal = ({
         onKeyDown: handleTriggerKeyDown,
         onBlur,
         trailingAdornment: /* @__PURE__ */ (0, import_jsx_runtime194.jsx)(
-          import_lucide_react56.ChevronDown,
+          import_lucide_react57.ChevronDown,
           {
             className: cn(
               "h-6 w-6 text-[#1F1F1B] transition-transform",
@@ -20009,7 +20154,7 @@ function AirbnbSearchableSelectContent({
   return /* @__PURE__ */ (0, import_jsx_runtime194.jsxs)("div", { className: "p-2", children: [
     /* @__PURE__ */ (0, import_jsx_runtime194.jsxs)("div", { className: "relative mb-2", children: [
       /* @__PURE__ */ (0, import_jsx_runtime194.jsx)(
-        import_lucide_react56.Search,
+        import_lucide_react57.Search,
         {
           "aria-hidden": "true",
           className: "absolute left-4 top-1/2 h-5 w-5 -translate-y-1/2 text-[#9696B9]"
@@ -20118,14 +20263,14 @@ function getNextEnabledIndex(options, startIndex, step) {
 
 // src/airbnb-fields/search-input/SearchInput.tsx
 var React82 = __toESM(require("react"), 1);
-var import_react_i18next44 = require("react-i18next");
-var import_lucide_react57 = require("lucide-react");
+var import_react_i18next45 = require("react-i18next");
+var import_lucide_react58 = require("lucide-react");
 var import_jsx_runtime195 = require("react/jsx-runtime");
 var AirbnbSearchInput = React82.forwardRef(({ onReset, placeholder, wrapperClassName, ...props }, ref) => {
-  const { t } = (0, import_react_i18next44.useTranslation)();
+  const { t } = (0, import_react_i18next45.useTranslation)();
   const placeholderText = placeholder || t("search_property") + "...";
   return /* @__PURE__ */ (0, import_jsx_runtime195.jsxs)("div", { className: cn("input-wrapper relative", wrapperClassName), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime195.jsx)(import_lucide_react57.Search, { className: "absolute left-4 top-1/2 h-5 w-5 -translate-y-1/2 transform text-[#9696B9]" }),
+    /* @__PURE__ */ (0, import_jsx_runtime195.jsx)(import_lucide_react58.Search, { className: "absolute left-4 top-1/2 h-5 w-5 -translate-y-1/2 transform text-[#9696B9]" }),
     /* @__PURE__ */ (0, import_jsx_runtime195.jsx)(
       "input",
       {
@@ -20151,12 +20296,72 @@ var AirbnbSearchInput = React82.forwardRef(({ onReset, placeholder, wrapperClass
         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_runtime195.jsx)(import_lucide_react57.X, { className: "h-5 w-5" })
+        children: /* @__PURE__ */ (0, import_jsx_runtime195.jsx)(import_lucide_react58.X, { className: "h-5 w-5" })
       }
     )
   ] });
 });
 AirbnbSearchInput.displayName = "AirbnbSearchInput";
+
+// src/airbnb-fields/switch/Switch.tsx
+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
+            }
+          )
+        }
+      )
+    }
+  );
+  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: "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 = {
   ALERT_BOX_VARIANTS,
@@ -20171,6 +20376,7 @@ AirbnbSearchInput.displayName = "AirbnbSearchInput";
   AirbnbSearchInput,
   AirbnbSearchableSelect,
   AirbnbSelect,
+  AirbnbSwitch,
   Alert,
   AlertBox,
   AlertDescription,