@chekinapp/ui 0.0.114 → 0.0.116

package/dist/index.js

@@ -4747,7 +4747,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,
@@ -4763,7 +4763,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
       ),
@@ -4780,7 +4780,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,
@@ -12511,6 +12511,23 @@ import * as React45 from "react";
 import { useTranslation as useTranslation28 } from "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;
@@ -12608,6 +12625,51 @@ function DefaultOption(props) {
 
 // src/dashboard/_select-internals/SelectMenu.tsx
 import { jsx as jsx146, jsxs as jsxs93 } from "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,
@@ -12633,7 +12695,9 @@ function SelectMenu({
   inputValue = "",
   formatOptionLabel,
   isOptionSelected: isOptionSelected2,
-  onMenuScrollToBottom
+  onMenuScrollToBottom,
+  groupedOptions,
+  formatGroupLabel
 }) {
   const { t } = useTranslation28();
   const emptyMessage = noOptionsMessage?.() ?? t("no_options");
@@ -12644,6 +12708,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) => {
@@ -12677,31 +12745,43 @@ function SelectMenu({
       ),
       children: [
         !hasOptions && (emptyContent ?? /* @__PURE__ */ jsx146("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__ */ jsx146(
+              "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__ */ jsx146(
             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
@@ -12830,6 +12910,7 @@ function SelectTrigger({
   invalid,
   placeholder,
   valueLabel,
+  leftIcon,
   onClick,
   onKeyDown,
   onBlur
@@ -12853,12 +12934,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__ */ jsx149("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__ */ jsx149("span", { className: "flex h-full w-10 items-center justify-center", children: leftIcon }) }),
         /* @__PURE__ */ jsx149("span", { id: valueId, className: "block min-w-0 flex-1 truncate text-left", children: valueLabel ?? (isOpen ? placeholder : null) }),
         /* @__PURE__ */ jsx149("span", { className: "pointer-events-none flex items-center gap-2 text-[var(--chekin-color-gray-2)]", children: /* @__PURE__ */ jsx149(
           ChevronDown2,
@@ -12908,6 +12991,7 @@ function ComboboxTrigger({
   onClear,
   clearLabel,
   leadingContent,
+  leftIcon,
   containerClassName,
   inputClassName,
   hideIndicator,
@@ -12938,11 +13022,13 @@ function ComboboxTrigger({
         containerClassName
       ),
       children: [
+        leftIcon && /* @__PURE__ */ jsx150("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__ */ jsx150("span", { className: "flex h-full w-10 items-center justify-center", children: leftIcon }) }),
         /* @__PURE__ */ jsxs97(
           "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: [
@@ -13504,6 +13590,7 @@ function DefaultControl(props) {
     clearLabel,
     hideIndicator,
     autoFocus,
+    leftIcon,
     components
   } = props;
   const Chip = components.MultiValueChip ?? DefaultMultiValueChip;
@@ -13541,6 +13628,7 @@ function DefaultControl(props) {
       clearLabel,
       hideIndicator,
       autoFocus,
+      leftIcon,
       leadingContent: isMulti ? selectedOptions.map((option) => /* @__PURE__ */ jsx152(
         Chip,
         {
@@ -13571,7 +13659,8 @@ function StaticControl(props) {
     disabled,
     valueLabel,
     placeholder,
-    onContainerClick
+    onContainerClick,
+    leftIcon
   } = props;
   return /* @__PURE__ */ jsx153(
     SelectTrigger,
@@ -13589,6 +13678,7 @@ function StaticControl(props) {
       invalid,
       placeholder,
       valueLabel,
+      leftIcon,
       onClick: onContainerClick,
       onKeyDown: () => void 0
     }
@@ -13621,7 +13711,9 @@ function DefaultMenuList(props) {
     inputValue,
     formatOptionLabel,
     isOptionSelected: isOptionSelected2,
-    onMenuScrollToBottom
+    onMenuScrollToBottom,
+    groupedOptions,
+    formatGroupLabel
   } = props;
   return /* @__PURE__ */ jsx154(
     SelectMenu,
@@ -13649,7 +13741,9 @@ function DefaultMenuList(props) {
       inputValue,
       formatOptionLabel,
       isOptionSelected: isOptionSelected2,
-      onMenuScrollToBottom
+      onMenuScrollToBottom,
+      groupedOptions,
+      formatGroupLabel
     }
   );
 }
@@ -13740,7 +13834,9 @@ function SelectInternal(props, ref) {
     onInputChange,
     searchPosition = "trigger",
     menuHeader,
-    onMenuScrollToBottom
+    onMenuScrollToBottom,
+    leftIcon,
+    formatGroupLabel
   } = props;
   const isSearchInDropdown = searchPosition === "dropdown";
   const isMulti = props.isMulti === true;
@@ -13761,9 +13857,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,
@@ -13862,6 +13959,7 @@ function SelectInternal(props, ref) {
             clearLabel: isMulti ? t("clear_all") : t("clear"),
             hideIndicator,
             autoFocus,
+            leftIcon,
             components
           }
         ),
@@ -13880,7 +13978,8 @@ function SelectInternal(props, ref) {
             legend: resolvedLabel,
             label: resolvedLabel,
             tooltip,
-            onClick: state.handleContainerClick
+            onClick: state.handleContainerClick,
+            labelClassName: leftIcon ? "pl-[28px]" : void 0
           }
         ),
         /* @__PURE__ */ jsxs99(
@@ -13932,7 +14031,9 @@ function SelectInternal(props, ref) {
                   inputValue: state.inputValue,
                   formatOptionLabel,
                   isOptionSelected: isOptionSelected2,
-                  onMenuScrollToBottom
+                  onMenuScrollToBottom,
+                  groupedOptions: options,
+                  formatGroupLabel
                 }
               ),
               state.canCreateNewOption && /* @__PURE__ */ jsx156(
@@ -14635,7 +14736,8 @@ function createCountTrigger(opts) {
       disabled,
       placeholder,
       selectedOptions,
-      onContainerClick
+      onContainerClick,
+      leftIcon
     } = props;
     const count = selectedOptions.length;
     const total = totalCount ?? count;
@@ -14657,12 +14759,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__ */ jsx166("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__ */ jsx166("span", { className: "flex h-full w-10 items-center justify-center", children: leftIcon }) }),
           /* @__PURE__ */ jsx166("span", { id: valueId, className: "block min-w-0 flex-1 truncate text-left", children: display }),
           /* @__PURE__ */ jsx166("span", { className: "pointer-events-none flex items-center gap-2 text-[var(--chekin-color-gray-2)]", children: /* @__PURE__ */ jsx166(
             ChevronDown3,
@@ -14752,19 +14856,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" }
@@ -14772,18 +14890,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,
@@ -14808,11 +14926,10 @@ function SelectCheckboxesInternal(props, ref) {
     },
     [onSearchChange]
   );
-  const sharedProps = {
+  const baseSharedProps = {
     ...paginationAndRest,
     value,
     onChange,
-    options: filteredOptions,
     filterOption: passthroughFilter2,
     components,
     closeMenuOnSelect,
@@ -14826,7 +14943,10 @@ function SelectCheckboxesInternal(props, ref) {
       InfiniteScrollSelect,
       {
         ref,
-        ...sharedProps
+        ...{
+          ...baseSharedProps,
+          options: filteredFlat
+        }
       }
     );
   }
@@ -14834,7 +14954,10 @@ function SelectCheckboxesInternal(props, ref) {
     Select,
     {
       ref,
-      ...sharedProps
+      ...{
+        ...baseSharedProps,
+        options: filteredGrouped
+      }
     }
   );
 }
@@ -15757,7 +15880,7 @@ var Datepicker = React63.forwardRef(
     hideErrorMessage,
     helperText,
     width,
-    locale = "en-US",
+    locale,
     minDate,
     maxDate,
     formatValue
@@ -15776,10 +15899,11 @@ var Datepicker = React63.forwardRef(
     const yearId = `${baseId}-year`;
     const labelId = `${baseId}-label`;
     const errorId = `${baseId}-error`;
-    const { t } = useTranslation39();
+    const { t, i18n } = useTranslation39();
+    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");
@@ -17581,7 +17705,7 @@ var AirbnbFieldTrigger = React72.forwardRef(
     const hasLabelMeta = Boolean(optionalLabel) || Boolean(tooltip);
     const resolvedLabelText = visibleLabelText && hasLabelMeta ? /* @__PURE__ */ jsxs116("span", { className: "inline-flex max-w-full items-center gap-1.5 align-middle", children: [
       /* @__PURE__ */ jsx182("span", { className: "min-w-0 truncate", children: visibleLabelText }),
-      optionalLabel && /* @__PURE__ */ jsxs116("span", { className: "shrink-0 text-[12px] relative top-[1px] font-normal leading-4 text-current opacity-70", children: [
+      optionalLabel && /* @__PURE__ */ jsxs116("span", { className: "text-current opacity-70 lowercase", children: [
         "(",
         optionalLabel,
         ")"
@@ -17635,8 +17759,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]"
                 ),
@@ -17904,7 +18028,9 @@ AirbnbDatePicker.displayName = "AirbnbDatePicker";
 
 // src/airbnb-fields/input/Input.tsx
 import * as React74 from "react";
-import { jsx as jsx184 } from "react/jsx-runtime";
+import { Eye as Eye2 } from "lucide-react";
+import { useTranslation as useTranslation44 } from "react-i18next";
+import { jsx as jsx184, jsxs as jsxs118 } from "react/jsx-runtime";
 var getInputValue = (value) => value != null ? String(value) : "";
 var AirbnbInput = React74.forwardRef(
   ({
@@ -17935,6 +18061,7 @@ var AirbnbInput = React74.forwardRef(
     placeholder,
     ...props
   }, ref) => {
+    const { t } = useTranslation44();
     const generatedId = React74.useId();
     const inputRef = React74.useRef(null);
     const inputId = id ?? generatedId;
@@ -17943,11 +18070,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;
@@ -17957,6 +18088,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;
@@ -17987,7 +18123,10 @@ var AirbnbInput = React74.forwardRef(
       setIsFocused(false);
       onBlur?.(event);
     };
-    return /* @__PURE__ */ jsx184("div", { className: cn("w-full max-w-[var(--max-field-width)]", wrapperClassName), children: /* @__PURE__ */ jsx184(
+    const togglePasswordReveal = () => {
+      setIsPasswordRevealed((isRevealed) => !isRevealed);
+    };
+    return /* @__PURE__ */ jsx184("div", { className: cn("w-full max-w-[var(--max-field-width)]", wrapperClassName), children: /* @__PURE__ */ jsxs118(
       AirbnbFieldTrigger,
       {
         as: "div",
@@ -18015,39 +18154,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__ */ jsx184(
-          "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__ */ jsx184(
+            "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__ */ jsx184(
+            "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__ */ jsx184(
+                Eye2,
+                {
+                  size: 18,
+                  "aria-hidden": "true",
+                  className: cn(isPasswordRevealed ? "text-[#fc98dd]" : "")
+                }
+              )
+            }
+          )
+        ]
       }
     ) });
   }
@@ -18062,7 +18225,7 @@ import { ChevronDown as ChevronDown6 } from "lucide-react";
 import * as React79 from "react";
 
 // src/airbnb-fields/select/SelectDesktopMenu.tsx
-import { jsx as jsx185, jsxs as jsxs118 } from "react/jsx-runtime";
+import { jsx as jsx185, jsxs as jsxs119 } from "react/jsx-runtime";
 function AirbnbSelectDesktopMenu({
   id,
   options,
@@ -18081,7 +18244,7 @@ function AirbnbSelectDesktopMenu({
   noOptionsMessage
 }) {
   const emptyMessage = noOptionsMessage?.();
-  return /* @__PURE__ */ jsxs118(
+  return /* @__PURE__ */ jsxs119(
     "div",
     {
       id,
@@ -18257,7 +18420,7 @@ function getMobileOptionStyles(index, scrollTop) {
 }
 
 // src/airbnb-fields/select/SelectMobileWheel.tsx
-import { jsx as jsx187, jsxs as jsxs119 } from "react/jsx-runtime";
+import { jsx as jsx187, jsxs as jsxs120 } from "react/jsx-runtime";
 function AirbnbSelectMobileWheel({
   id,
   options,
@@ -18276,7 +18439,7 @@ function AirbnbSelectMobileWheel({
 }) {
   const spacerHeight2 = getWheelSpacerHeight();
   const emptyMessage = noOptionsMessage?.();
-  return /* @__PURE__ */ jsxs119(
+  return /* @__PURE__ */ jsxs120(
     "div",
     {
       id,
@@ -18301,7 +18464,7 @@ function AirbnbSelectMobileWheel({
             )
           }
         ),
-        /* @__PURE__ */ jsxs119(
+        /* @__PURE__ */ jsxs120(
           "div",
           {
             ref: listRef,
@@ -18351,7 +18514,7 @@ function AirbnbSelectMobileWheel({
 }
 
 // src/airbnb-fields/select/SelectMobileContent.tsx
-import { jsx as jsx188, jsxs as jsxs120 } from "react/jsx-runtime";
+import { jsx as jsx188, jsxs as jsxs121 } from "react/jsx-runtime";
 function AirbnbSelectMobileContent({
   open,
   onOpenChange,
@@ -18375,10 +18538,10 @@ function AirbnbSelectMobileContent({
   getOptionId: getOptionId2,
   noOptionsMessage
 }) {
-  return /* @__PURE__ */ jsx188(Drawer, { open, onOpenChange, children: /* @__PURE__ */ jsxs120(DrawerContent, { onClose, lockScroll: false, children: [
+  return /* @__PURE__ */ jsx188(Drawer, { open, onOpenChange, children: /* @__PURE__ */ jsxs121(DrawerContent, { onClose, lockScroll: false, children: [
     /* @__PURE__ */ jsx188(DrawerTitle, { className: "sr-only", children: mobileTitle ?? label }),
     /* @__PURE__ */ jsx188(DrawerDescription, { className: "sr-only", children: label }),
-    /* @__PURE__ */ jsxs120("div", { className: "px-6 pb-4 pt-1", children: [
+    /* @__PURE__ */ jsxs121("div", { className: "px-6 pb-4 pt-1", children: [
       /* @__PURE__ */ jsx188(
         AirbnbSelectMobileWheel,
         {
@@ -18823,7 +18986,7 @@ function useSelectIds2({ name, hasValue, error, hideErrorMessage }) {
 }
 
 // src/airbnb-fields/select/Select.tsx
-import { jsx as jsx190, jsxs as jsxs121 } from "react/jsx-runtime";
+import { jsx as jsx190, jsxs as jsxs122 } from "react/jsx-runtime";
 var AirbnbSelect = React79.forwardRef(function AirbnbSelect2({
   options = [],
   value,
@@ -19003,7 +19166,7 @@ var AirbnbSelect = React79.forwardRef(function AirbnbSelect2({
       handleMobileOpenChange(false);
     }
   };
-  return /* @__PURE__ */ jsxs121(
+  return /* @__PURE__ */ jsxs122(
     "div",
     {
       ref: containerRef,
@@ -19118,7 +19281,7 @@ var AirbnbSelect = React79.forwardRef(function AirbnbSelect2({
 });
 
 // src/airbnb-fields/phone-field/PhoneField.tsx
-import { jsx as jsx191, jsxs as jsxs122 } from "react/jsx-runtime";
+import { jsx as jsx191, jsxs as jsxs123 } from "react/jsx-runtime";
 function formatPhoneCodeOptionLabel2(option) {
   const label = String(option.label);
   const value = String(option.value);
@@ -19165,7 +19328,7 @@ var AirbnbPhoneField = React80.forwardRef(
     const hasInvalidState = Boolean(error) || Boolean(invalid);
     const isBlocked = Boolean(disabled) || Boolean(loading);
     const isCodeBlocked = isBlocked || Boolean(codeReadOnly);
-    return /* @__PURE__ */ jsxs122("div", { className: cn("w-full max-w-[var(--max-field-width)]", className), children: [
+    return /* @__PURE__ */ jsxs123("div", { className: cn("w-full max-w-[var(--max-field-width)]", className), children: [
       name && /* @__PURE__ */ jsx191("input", { type: "hidden", name, value: combinedValue, disabled }),
       codeName && /* @__PURE__ */ jsx191(
         "input",
@@ -19193,7 +19356,7 @@ var AirbnbPhoneField = React80.forwardRef(
           children: topLabel
         }
       ),
-      /* @__PURE__ */ jsxs122("div", { className: "flex items-stretch", children: [
+      /* @__PURE__ */ jsxs123("div", { className: "flex items-stretch", children: [
         /* @__PURE__ */ jsx191(
           AirbnbSelect,
           {
@@ -19225,7 +19388,7 @@ var AirbnbPhoneField = React80.forwardRef(
               onClick,
               onKeyDown,
               valueLabel
-            }) => /* @__PURE__ */ jsxs122(
+            }) => /* @__PURE__ */ jsxs123(
               "button",
               {
                 id,
@@ -19303,7 +19466,7 @@ import * as React81 from "react";
 import { ChevronDown as ChevronDown7, Search as Search4 } from "lucide-react";
 import { useVirtualizer as useVirtualizer3 } from "@tanstack/react-virtual";
 import { useCallback as useCallback57 } from "react";
-import { jsx as jsx192, jsxs as jsxs123 } from "react/jsx-runtime";
+import { jsx as jsx192, jsxs as jsxs124 } from "react/jsx-runtime";
 var ROW_HEIGHT = 48;
 var DESKTOP_LIST_HEIGHT = 280;
 var MOBILE_LIST_HEIGHT = 420;
@@ -19500,7 +19663,7 @@ var AirbnbSearchableSelectInternal = ({
     }
   );
   React81.useImperativeHandle(ref, () => triggerRef.current, []);
-  return /* @__PURE__ */ jsxs123("div", { ref: containerRef, className: cn("relative w-full max-w-[425px]", className), children: [
+  return /* @__PURE__ */ jsxs124("div", { ref: containerRef, className: cn("relative w-full max-w-[425px]", className), children: [
     name && /* @__PURE__ */ jsx192("input", { type: "hidden", name, value: value ? String(value.value) : "" }),
     /* @__PURE__ */ jsx192(
       AirbnbFieldTrigger,
@@ -19560,7 +19723,7 @@ var AirbnbSearchableSelectInternal = ({
           }
           closeSelect();
         },
-        children: /* @__PURE__ */ jsxs123(DrawerContent, { onClose: closeSelect, lockScroll: false, children: [
+        children: /* @__PURE__ */ jsxs124(DrawerContent, { onClose: closeSelect, lockScroll: false, children: [
           /* @__PURE__ */ jsx192(DrawerTitle, { className: "sr-only", children: mobileTitle ?? label }),
           /* @__PURE__ */ jsx192(DrawerDescription, { className: "sr-only", children: label }),
           /* @__PURE__ */ jsx192("div", { className: "px-5 pb-5 pt-1", children: content })
@@ -19633,8 +19796,8 @@ function AirbnbSearchableSelectContent({
       virtualizer.scrollToIndex(highlightedIndex, { align: "auto" });
     }
   }, [highlightedIndex, virtualizer]);
-  return /* @__PURE__ */ jsxs123("div", { className: "p-2", children: [
-    /* @__PURE__ */ jsxs123("div", { className: "relative mb-2", children: [
+  return /* @__PURE__ */ jsxs124("div", { className: "p-2", children: [
+    /* @__PURE__ */ jsxs124("div", { className: "relative mb-2", children: [
       /* @__PURE__ */ jsx192(
         Search4,
         {
@@ -19745,13 +19908,13 @@ function getNextEnabledIndex(options, startIndex, step) {
 
 // src/airbnb-fields/search-input/SearchInput.tsx
 import * as React82 from "react";
-import { useTranslation as useTranslation44 } from "react-i18next";
+import { useTranslation as useTranslation45 } from "react-i18next";
 import { Search as Search5, X as X11 } from "lucide-react";
-import { jsx as jsx193, jsxs as jsxs124 } from "react/jsx-runtime";
+import { jsx as jsx193, jsxs as jsxs125 } from "react/jsx-runtime";
 var AirbnbSearchInput = React82.forwardRef(({ onReset, placeholder, wrapperClassName, ...props }, ref) => {
-  const { t } = useTranslation44();
+  const { t } = useTranslation45();
   const placeholderText = placeholder || t("search_property") + "...";
-  return /* @__PURE__ */ jsxs124("div", { className: cn("input-wrapper relative", wrapperClassName), children: [
+  return /* @__PURE__ */ jsxs125("div", { className: cn("input-wrapper relative", wrapperClassName), children: [
     /* @__PURE__ */ jsx193(Search5, { className: "absolute left-4 top-1/2 h-5 w-5 -translate-y-1/2 transform text-[#9696B9]" }),
     /* @__PURE__ */ jsx193(
       "input",
@@ -19784,6 +19947,51 @@ var AirbnbSearchInput = React82.forwardRef(({ onReset, placeholder, wrapperClass
   ] });
 });
 AirbnbSearchInput.displayName = "AirbnbSearchInput";
+
+// src/airbnb-fields/switch/Switch.tsx
+import * as React83 from "react";
+import * as SwitchPrimitives2 from "@radix-ui/react-switch";
+import { Check as Check7 } from "lucide-react";
+import { jsx as jsx194 } from "react/jsx-runtime";
+var AirbnbSwitch = React83.forwardRef(({ className, value, onChange, disabled, loading, readOnly, ...props }, ref) => /* @__PURE__ */ jsx194(
+  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__ */ jsx194(
+      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__ */ jsx194(
+          Check7,
+          {
+            "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";
 export {
   ALERT_BOX_VARIANTS,
   Accordion,
@@ -19797,6 +20005,7 @@ export {
   AirbnbSearchInput,
   AirbnbSearchableSelect,
   AirbnbSelect,
+  AirbnbSwitch,
   Alert,
   AlertBox,
   AlertDescription,