@chekinapp/ui 0.0.114 → 0.0.116

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) {
+  return Boolean(
+    item && 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,51 @@ function DefaultOption(props) {
 
 // src/dashboard/_select-internals/SelectMenu.tsx
 var import_jsx_runtime148 = require("react/jsx-runtime");
+function buildMenuEntries(groupedOptions, options, formatGroupLabel) {
+  if (!groupedOptions || !groupedOptions.some((item) => isOptionGroup(item))) {
+    return options.map((option, index) => ({
+      kind: "option",
+      key: `${String(option.value)}-${index}`,
+      option,
+      flatIndex: index
+    }));
+  }
+  const indexByOption = /* @__PURE__ */ new Map();
+  options.forEach((option, index) => indexByOption.set(option, index));
+  const entries = [];
+  let groupCount = 0;
+  for (const item of groupedOptions) {
+    if (isOptionGroup(item)) {
+      const visible = item.options.filter((option) => indexByOption.has(option));
+      if (visible.length === 0) continue;
+      const label = formatGroupLabel ? formatGroupLabel(item) : item.label;
+      entries.push({
+        kind: "group-label",
+        key: `__group-${groupCount}`,
+        label
+      });
+      groupCount += 1;
+      for (const option of visible) {
+        const flatIndex = indexByOption.get(option);
+        entries.push({
+          kind: "option",
+          key: `${String(option.value)}-${flatIndex}`,
+          option,
+          flatIndex
+        });
+      }
+    } else if (indexByOption.has(item)) {
+      const flatIndex = indexByOption.get(item);
+      entries.push({
+        kind: "option",
+        key: `${String(item.value)}-${flatIndex}`,
+        option: item,
+        flatIndex
+      });
+    }
+  }
+  return entries;
+}
 function SelectMenu({
   id,
   options,
@@ -12993,7 +13056,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 +13069,10 @@ function SelectMenu({
     () => selectedValues ?? (selectedValue ? [selectedValue] : []),
     [selectedValues, selectedValue]
   );
+  const entries = React45.useMemo(
+    () => buildMenuEntries(groupedOptions, options, formatGroupLabel),
+    [groupedOptions, options, formatGroupLabel]
+  );
   const wasAtBottomRef = React45.useRef(false);
   const handleScroll = React45.useCallback(
     (event) => {
@@ -13037,31 +13106,43 @@ 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) => {
+        entries.map((entry) => {
+          if (entry.kind === "group-label") {
+            return /* @__PURE__ */ (0, import_jsx_runtime148.jsx)(
+              "div",
+              {
+                role: "presentation",
+                className: "px-3 pb-1 pt-2 text-[11px] font-semibold uppercase tracking-wide text-[var(--chekin-color-gray-1)]",
+                children: entry.label
+              },
+              entry.key
+            );
+          }
+          const { option, flatIndex } = entry;
           const isSelected = isOptionSelected2 ? isOptionSelected2(option, selectedList) : isOptionSelected(option, selectedValue, selectedValues);
-          const isHighlighted = index === highlightedIndex;
+          const isHighlighted = flatIndex === highlightedIndex;
           const optionDisabled = Boolean(
             disabled || option.isDisabled || isOptionDisabled?.(option)
           );
           return /* @__PURE__ */ (0, import_jsx_runtime148.jsx)(
             Option,
             {
-              id: getOptionId2(index),
+              id: getOptionId2(flatIndex),
               option,
-              index,
+              index: flatIndex,
               isSelected,
               isHighlighted,
               isDisabled: optionDisabled,
-              isLast: index === lastIndex,
+              isLast: flatIndex === lastIndex,
               isMulti: Boolean(isMulti),
               onClick: onOptionClick,
               onHover: onOptionHover ?? (() => void 0),
-              innerRef: (node) => selectedOptionRef?.(index, node),
+              innerRef: (node) => selectedOptionRef?.(flatIndex, node),
               inputValue,
               selectedOptions: selectedList,
               formatOptionLabel
             },
-            `${String(option.value)}-${index}`
+            entry.key
           );
         }),
         footer
@@ -13190,6 +13271,7 @@ function SelectTrigger({
   invalid,
   placeholder,
   valueLabel,
+  leftIcon,
   onClick,
   onKeyDown,
   onBlur
@@ -13213,12 +13295,14 @@ function SelectTrigger({
       onKeyDown,
       onBlur,
       className: cn(
-        "relative m-0 box-border flex h-12 w-full cursor-pointer items-center justify-between gap-2 rounded-[6px] border-0 px-4 text-left text-[16px] font-medium leading-5 outline-none transition-colors duration-200",
+        "relative m-0 box-border flex h-12 w-full cursor-pointer items-center justify-between gap-2 rounded-[6px] border-0 pr-4 text-left text-[16px] font-medium leading-5 outline-none transition-colors duration-200",
+        leftIcon ? "pl-10" : "pl-4",
         isEmpty ? "bg-[var(--empty-field-background)] text-[var(--chekin-color-gray-1)]" : "bg-transparent text-[var(--chekin-color-brand-navy)]",
         disabled && !loading && "cursor-not-allowed opacity-50",
         loading && "!cursor-progress"
       ),
       children: [
+        leftIcon && /* @__PURE__ */ (0, import_jsx_runtime151.jsx)("span", { className: "pointer-events-none absolute left-0 top-0 flex h-full max-w-10 items-center justify-center text-[var(--chekin-color-gray-2)]", children: /* @__PURE__ */ (0, import_jsx_runtime151.jsx)("span", { className: "flex h-full w-10 items-center justify-center", children: leftIcon }) }),
         /* @__PURE__ */ (0, import_jsx_runtime151.jsx)("span", { id: valueId, className: "block min-w-0 flex-1 truncate text-left", children: valueLabel ?? (isOpen ? placeholder : null) }),
         /* @__PURE__ */ (0, import_jsx_runtime151.jsx)("span", { className: "pointer-events-none flex items-center gap-2 text-[var(--chekin-color-gray-2)]", children: /* @__PURE__ */ (0, import_jsx_runtime151.jsx)(
           import_lucide_react45.ChevronDown,
@@ -13268,6 +13352,7 @@ function ComboboxTrigger({
   onClear,
   clearLabel,
   leadingContent,
+  leftIcon,
   containerClassName,
   inputClassName,
   hideIndicator,
@@ -13298,11 +13383,13 @@ function ComboboxTrigger({
         containerClassName
       ),
       children: [
+        leftIcon && /* @__PURE__ */ (0, import_jsx_runtime152.jsx)("span", { className: "pointer-events-none absolute left-0 top-0 flex h-full max-w-10 items-center justify-center text-[var(--chekin-color-gray-2)]", children: /* @__PURE__ */ (0, import_jsx_runtime152.jsx)("span", { className: "flex h-full w-10 items-center justify-center", children: leftIcon }) }),
         /* @__PURE__ */ (0, import_jsx_runtime152.jsxs)(
           "div",
           {
             className: cn(
-              "flex min-w-0 flex-1 items-center gap-2 py-[10px] pl-4",
+              "flex min-w-0 flex-1 items-center gap-2 py-[10px]",
+              leftIcon ? "pl-10" : "pl-4",
               isMulti && "flex-wrap"
             ),
             children: [
@@ -13864,6 +13951,7 @@ function DefaultControl(props) {
     clearLabel,
     hideIndicator,
     autoFocus,
+    leftIcon,
     components
   } = props;
   const Chip = components.MultiValueChip ?? DefaultMultiValueChip;
@@ -13901,6 +13989,7 @@ function DefaultControl(props) {
       clearLabel,
       hideIndicator,
       autoFocus,
+      leftIcon,
       leadingContent: isMulti ? selectedOptions.map((option) => /* @__PURE__ */ (0, import_jsx_runtime154.jsx)(
         Chip,
         {
@@ -13931,7 +14020,8 @@ function StaticControl(props) {
     disabled,
     valueLabel,
     placeholder,
-    onContainerClick
+    onContainerClick,
+    leftIcon
   } = props;
   return /* @__PURE__ */ (0, import_jsx_runtime155.jsx)(
     SelectTrigger,
@@ -13949,6 +14039,7 @@ function StaticControl(props) {
       invalid,
       placeholder,
       valueLabel,
+      leftIcon,
       onClick: onContainerClick,
       onKeyDown: () => void 0
     }
@@ -13981,7 +14072,9 @@ function DefaultMenuList(props) {
     inputValue,
     formatOptionLabel,
     isOptionSelected: isOptionSelected2,
-    onMenuScrollToBottom
+    onMenuScrollToBottom,
+    groupedOptions,
+    formatGroupLabel
   } = props;
   return /* @__PURE__ */ (0, import_jsx_runtime156.jsx)(
     SelectMenu,
@@ -14009,7 +14102,9 @@ function DefaultMenuList(props) {
       inputValue,
       formatOptionLabel,
       isOptionSelected: isOptionSelected2,
-      onMenuScrollToBottom
+      onMenuScrollToBottom,
+      groupedOptions,
+      formatGroupLabel
     }
   );
 }
@@ -14100,7 +14195,9 @@ function SelectInternal(props, ref) {
     onInputChange,
     searchPosition = "trigger",
     menuHeader,
-    onMenuScrollToBottom
+    onMenuScrollToBottom,
+    leftIcon,
+    formatGroupLabel
   } = props;
   const isSearchInDropdown = searchPosition === "dropdown";
   const isMulti = props.isMulti === true;
@@ -14121,9 +14218,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,
@@ -14222,6 +14320,7 @@ function SelectInternal(props, ref) {
             clearLabel: isMulti ? t("clear_all") : t("clear"),
             hideIndicator,
             autoFocus,
+            leftIcon,
             components
           }
         ),
@@ -14240,7 +14339,8 @@ function SelectInternal(props, ref) {
             legend: resolvedLabel,
             label: resolvedLabel,
             tooltip,
-            onClick: state.handleContainerClick
+            onClick: state.handleContainerClick,
+            labelClassName: leftIcon ? "pl-[28px]" : void 0
           }
         ),
         /* @__PURE__ */ (0, import_jsx_runtime158.jsxs)(
@@ -14292,7 +14392,9 @@ function SelectInternal(props, ref) {
                   inputValue: state.inputValue,
                   formatOptionLabel,
                   isOptionSelected: isOptionSelected2,
-                  onMenuScrollToBottom
+                  onMenuScrollToBottom,
+                  groupedOptions: options,
+                  formatGroupLabel
                 }
               ),
               state.canCreateNewOption && /* @__PURE__ */ (0, import_jsx_runtime158.jsx)(
@@ -14995,7 +15097,8 @@ function createCountTrigger(opts) {
       disabled,
       placeholder,
       selectedOptions,
-      onContainerClick
+      onContainerClick,
+      leftIcon
     } = props;
     const count = selectedOptions.length;
     const total = totalCount ?? count;
@@ -15017,12 +15120,14 @@ function createCountTrigger(opts) {
         disabled: isBlocked,
         onClick: onContainerClick,
         className: cn(
-          "relative m-0 box-border flex h-12 w-full cursor-pointer items-center justify-between gap-2 rounded-[6px] border-0 px-4 text-left text-[16px] font-medium leading-5 outline-none transition-colors duration-200",
+          "relative m-0 box-border flex h-12 w-full cursor-pointer items-center justify-between gap-2 rounded-[6px] border-0 pr-4 text-left text-[16px] font-medium leading-5 outline-none transition-colors duration-200",
+          leftIcon ? "pl-10" : "pl-4",
           isEmpty ? "bg-[var(--empty-field-background)] text-[var(--chekin-color-gray-1)]" : "bg-transparent text-[var(--chekin-color-brand-navy)]",
           disabled && !loading && "cursor-not-allowed opacity-50",
           loading && "!cursor-progress"
         ),
         children: [
+          leftIcon && /* @__PURE__ */ (0, import_jsx_runtime168.jsx)("span", { className: "pointer-events-none absolute left-0 top-0 flex h-full max-w-10 items-center justify-center text-[var(--chekin-color-gray-2)]", children: /* @__PURE__ */ (0, import_jsx_runtime168.jsx)("span", { className: "flex h-full w-10 items-center justify-center", children: leftIcon }) }),
           /* @__PURE__ */ (0, import_jsx_runtime168.jsx)("span", { id: valueId, className: "block min-w-0 flex-1 truncate text-left", children: display }),
           /* @__PURE__ */ (0, import_jsx_runtime168.jsx)("span", { className: "pointer-events-none flex items-center gap-2 text-[var(--chekin-color-gray-2)]", children: /* @__PURE__ */ (0, import_jsx_runtime168.jsx)(
             import_lucide_react48.ChevronDown,
@@ -15112,19 +15217,33 @@ 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 someVisibleSelected = visibleSelectedCount > 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" }
@@ -15132,18 +15251,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,
@@ -15168,11 +15287,10 @@ function SelectCheckboxesInternal(props, ref) {
     },
     [onSearchChange]
   );
-  const sharedProps = {
+  const baseSharedProps = {
     ...paginationAndRest,
     value,
     onChange,
-    options: filteredOptions,
     filterOption: passthroughFilter2,
     components,
     closeMenuOnSelect,
@@ -15186,7 +15304,10 @@ function SelectCheckboxesInternal(props, ref) {
       InfiniteScrollSelect,
       {
         ref,
-        ...sharedProps
+        ...{
+          ...baseSharedProps,
+          options: filteredFlat
+        }
       }
     );
   }
@@ -15194,7 +15315,10 @@ function SelectCheckboxesInternal(props, ref) {
     Select,
     {
       ref,
-      ...sharedProps
+      ...{
+        ...baseSharedProps,
+        options: filteredGrouped
+      }
     }
   );
 }
@@ -16117,7 +16241,7 @@ var Datepicker = React63.forwardRef(
     hideErrorMessage,
     helperText,
     width,
-    locale = "en-US",
+    locale,
     minDate,
     maxDate,
     formatValue
@@ -16136,10 +16260,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");
@@ -17938,7 +18063,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,
         ")"
@@ -17992,8 +18117,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]"
                 ),
@@ -18261,6 +18386,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(
@@ -18292,6 +18419,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;
@@ -18300,11 +18428,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;
@@ -18314,6 +18446,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;
@@ -18344,7 +18481,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",
@@ -18372,39 +18512,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]" : "")
+                }
+              )
+            }
+          )
+        ]
       }
     ) });
   }
@@ -18413,7 +18577,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);
@@ -18762,7 +18926,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(
   ({
@@ -18819,7 +18983,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"
           }
@@ -19606,7 +19770,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
@@ -19657,7 +19821,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");
@@ -19895,7 +20059,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",
@@ -19993,7 +20157,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]"
@@ -20102,14 +20266,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",
       {
@@ -20135,12 +20299,57 @@ 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, ...props }, ref) => /* @__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
+    ),
+    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
+          }
+        )
+      }
+    )
+  }
+));
+AirbnbSwitch.displayName = "AirbnbSwitch";
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   ALERT_BOX_VARIANTS,
@@ -20155,6 +20364,7 @@ AirbnbSearchInput.displayName = "AirbnbSearchInput";
   AirbnbSearchInput,
   AirbnbSearchableSelect,
   AirbnbSelect,
+  AirbnbSwitch,
   Alert,
   AlertBox,
   AlertDescription,