@chekinapp/ui 0.0.136 → 0.0.137

package/dist/index.cjs

@@ -15109,6 +15109,7 @@ var React59 = __toESM(require("react"), 1);
 var import_react_i18next36 = require("react-i18next");
 
 // src/dashboard/select-checkboxes/SelectCheckboxOption.tsx
+var import_lucide_react48 = require("lucide-react");
 var import_jsx_runtime165 = require("react/jsx-runtime");
 function SelectCheckboxOption(props) {
   const {
@@ -15122,7 +15123,7 @@ function SelectCheckboxOption(props) {
     onHover,
     innerRef
   } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime165.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime165.jsxs)(
     "button",
     {
       id,
@@ -15142,17 +15143,32 @@ function SelectCheckboxOption(props) {
         isSelected && "bg-[var(--chekin-color-surface-autocomplete)] font-semibold text-[var(--chekin-color-brand-blue)]",
         isDisabled && "cursor-not-allowed text-[var(--chekin-color-gray-2)]"
       ),
-      children: /* @__PURE__ */ (0, import_jsx_runtime165.jsxs)("span", { className: "flex min-w-0 flex-1 items-center justify-between gap-2", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime165.jsx)("span", { className: "block break-words", children: option.label }),
-        option.description && /* @__PURE__ */ (0, import_jsx_runtime165.jsx)("span", { className: "shrink-0 text-[12px] font-medium italic text-[var(--chekin-color-gray-1)]", children: option.description })
-      ] })
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime165.jsx)(
+          "span",
+          {
+            "aria-hidden": "true",
+            "data-state": isSelected ? "checked" : "unchecked",
+            className: cn(
+              "checkbox__control pointer-events-none flex h-4 w-4 shrink-0 items-center justify-center rounded-sm border border-solid",
+              isSelected ? "border-[var(--checkbox-checked-border)] bg-[var(--checkbox-checked-bg)] text-[var(--checkbox-check-color)]" : "border-[var(--checkbox-border)] bg-[var(--checkbox-bg)]",
+              isDisabled && "opacity-50"
+            ),
+            children: isSelected && /* @__PURE__ */ (0, import_jsx_runtime165.jsx)(import_lucide_react48.Check, { className: "checkbox__icon h-3 w-3" })
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime165.jsxs)("span", { className: "flex min-w-0 flex-1 items-center justify-between gap-2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime165.jsx)("span", { className: "block break-words", children: option.label }),
+          option.description && /* @__PURE__ */ (0, import_jsx_runtime165.jsx)("span", { className: "shrink-0 text-[12px] font-medium italic text-[var(--chekin-color-gray-1)]", children: option.description })
+        ] })
+      ]
     }
   );
 }
 
 // src/dashboard/select-checkboxes/CountTrigger.tsx
 var React58 = __toESM(require("react"), 1);
-var import_lucide_react48 = require("lucide-react");
+var import_lucide_react49 = require("lucide-react");
 var import_react_i18next35 = require("react-i18next");
 var import_jsx_runtime166 = require("react/jsx-runtime");
 function createCountTrigger(opts) {
@@ -15219,7 +15235,7 @@ function createCountTrigger(opts) {
           leftIcon && /* @__PURE__ */ (0, import_jsx_runtime166.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_runtime166.jsx)("span", { className: "flex h-full w-10 items-center justify-center", children: leftIcon }) }),
           /* @__PURE__ */ (0, import_jsx_runtime166.jsx)("span", { id: valueId, className: "block min-w-0 flex-1 truncate text-left", children: display }),
           /* @__PURE__ */ (0, import_jsx_runtime166.jsx)("span", { className: "pointer-events-none flex items-center gap-2 text-[var(--chekin-color-gray-2)]", children: /* @__PURE__ */ (0, import_jsx_runtime166.jsx)(
-            import_lucide_react48.ChevronDown,
+            import_lucide_react49.ChevronDown,
             {
               size: 16,
               className: cn(
@@ -15236,9 +15252,10 @@ function createCountTrigger(opts) {
 }
 
 // src/dashboard/select-checkboxes/SelectAllRow.tsx
+var import_lucide_react50 = require("lucide-react");
 var import_jsx_runtime167 = require("react/jsx-runtime");
 function SelectAllRow({ label, checked, disabled, onToggle }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime167.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime167.jsxs)(
     "button",
     {
       type: "button",
@@ -15248,7 +15265,22 @@ function SelectAllRow({ label, checked, disabled, onToggle }) {
         "flex w-full items-center gap-3 border-0 border-b border-[#f2f4f8] bg-white px-4 py-[14px] text-left text-[16px] font-bold leading-5 text-[var(--chekin-color-brand-navy)] outline-none transition-colors hover:bg-[var(--chekin-color-surface-pressed)]",
         disabled && "cursor-default opacity-40"
       ),
-      children: /* @__PURE__ */ (0, import_jsx_runtime167.jsx)("span", { className: "flex-1", children: label })
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime167.jsx)(
+          "span",
+          {
+            "aria-hidden": "true",
+            "data-state": checked ? "checked" : "unchecked",
+            className: cn(
+              "checkbox__control pointer-events-none flex h-4 w-4 shrink-0 items-center justify-center rounded-sm border border-solid",
+              checked ? "border-[var(--checkbox-checked-border)] bg-[var(--checkbox-checked-bg)] text-[var(--checkbox-check-color)]" : "border-[var(--checkbox-border)] bg-[var(--checkbox-bg)]",
+              disabled && "opacity-50"
+            ),
+            children: checked && /* @__PURE__ */ (0, import_jsx_runtime167.jsx)(import_lucide_react50.Check, { className: "checkbox__icon h-3 w-3" })
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime167.jsx)("span", { className: "flex-1", children: label })
+      ]
     }
   );
 }
@@ -15661,7 +15693,7 @@ var Textarea = React61.forwardRef(function Textarea2({
 
 // src/dashboard/datepicker/Datepicker.tsx
 var React63 = __toESM(require("react"), 1);
-var import_lucide_react49 = require("lucide-react");
+var import_lucide_react51 = require("lucide-react");
 var import_react_i18next38 = require("react-i18next");
 
 // src/airbnb-fields/datepicker/useDatePickerWheel.ts
@@ -16695,7 +16727,7 @@ var Datepicker = React63.forwardRef(
                 children: [
                   /* @__PURE__ */ (0, import_jsx_runtime172.jsx)("span", { className: "block min-w-0 flex-1 truncate text-left", children: triggerText ?? (isWheelOpen ? mobilePlaceholder : null) }),
                   /* @__PURE__ */ (0, import_jsx_runtime172.jsx)("span", { className: "pointer-events-none flex items-center gap-2 text-[var(--chekin-color-gray-2)]", children: /* @__PURE__ */ (0, import_jsx_runtime172.jsx)(
-                    import_lucide_react49.ChevronDown,
+                    import_lucide_react51.ChevronDown,
                     {
                       size: 16,
                       className: cn(
@@ -16790,7 +16822,7 @@ var Datepicker = React63.forwardRef(
                       }
                     ),
                     /* @__PURE__ */ (0, import_jsx_runtime172.jsx)(
-                      import_lucide_react49.ChevronDown,
+                      import_lucide_react51.ChevronDown,
                       {
                         size: 14,
                         onMouseDown: (event) => {
@@ -17235,7 +17267,7 @@ function resolveRangeSelection({
 }
 
 // src/dashboard/date-range-picker/components/DateRangeInputs.tsx
-var import_lucide_react50 = require("lucide-react");
+var import_lucide_react52 = require("lucide-react");
 var import_jsx_runtime173 = require("react/jsx-runtime");
 var DEFAULT_PLACEHOLDER = "00-00-0000";
 var inputBaseClass = "m-0 box-border h-full w-full min-w-0 border-0 bg-transparent text-[16px] font-medium leading-5 text-[var(--chekin-color-brand-navy)] outline-none placeholder:text-[var(--chekin-color-gray-1)]";
@@ -17357,7 +17389,7 @@ function DateRangeInputs({
               onClick: onReset,
               className: iconButtonClass,
               "aria-label": clearLabel,
-              children: /* @__PURE__ */ (0, import_jsx_runtime173.jsx)(import_lucide_react50.SquareX, { size: 16, fill: "#9696b9", color: "#f8f8f8", strokeWidth: 1.8 })
+              children: /* @__PURE__ */ (0, import_jsx_runtime173.jsx)(import_lucide_react52.SquareX, { size: 16, fill: "#9696b9", color: "#f8f8f8", strokeWidth: 1.8 })
             }
           ),
           !readOnly && !hideCalendarIcon && /* @__PURE__ */ (0, import_jsx_runtime173.jsx)(
@@ -17372,7 +17404,7 @@ function DateRangeInputs({
                 focusedInput !== null || isOpen ? "text-[var(--chekin-color-brand-blue)]" : "text-[var(--chekin-color-gray-2)]"
               ),
               "aria-label": openCalendarLabel,
-              children: /* @__PURE__ */ (0, import_jsx_runtime173.jsx)(import_lucide_react50.CalendarDays, { size: 18 })
+              children: /* @__PURE__ */ (0, import_jsx_runtime173.jsx)(import_lucide_react52.CalendarDays, { size: 18 })
             }
           )
         ] })
@@ -17943,7 +17975,7 @@ var TimePicker = React69.forwardRef(function TimePicker2({ format: formatName =
 
 // src/dashboard/file-input/FileInput.tsx
 var React70 = __toESM(require("react"), 1);
-var import_lucide_react51 = require("lucide-react");
+var import_lucide_react53 = require("lucide-react");
 var import_react_i18next41 = require("react-i18next");
 var import_jsx_runtime178 = require("react/jsx-runtime");
 function defaultDownload(url) {
@@ -18057,7 +18089,7 @@ var FileInput = React70.forwardRef(function FileInput2({
                             className: "inline-flex items-center gap-[7px] truncate border-0 bg-transparent p-0 text-[14px] font-medium text-[var(--chekin-color-brand-navy)] outline-none",
                             children: [
                               /* @__PURE__ */ (0, import_jsx_runtime178.jsx)("span", { className: "truncate", children: resolvedDownloadLabel }),
-                              /* @__PURE__ */ (0, import_jsx_runtime178.jsx)(import_lucide_react51.Download, { size: 15 })
+                              /* @__PURE__ */ (0, import_jsx_runtime178.jsx)(import_lucide_react53.Download, { size: 15 })
                             ]
                           }
                         ) : /* @__PURE__ */ (0, import_jsx_runtime178.jsx)("span", { className: "truncate text-[14px] font-medium text-[var(--chekin-color-brand-navy)]", children: value.name }),
@@ -18069,13 +18101,13 @@ var FileInput = React70.forwardRef(function FileInput2({
                             onClick: handleClear,
                             className: "ml-2 flex h-[15px] w-[15px] items-center justify-center rounded-[3px] border-0 bg-transparent p-0 text-[#9696b9] outline-none hover:shadow-[0_3px_3px_#0f477734]",
                             "aria-label": t("remove_file"),
-                            children: /* @__PURE__ */ (0, import_jsx_runtime178.jsx)(import_lucide_react51.SquareX, { size: 15, fill: "#9696b9", color: "#f8f8f8", strokeWidth: 1.8 })
+                            children: /* @__PURE__ */ (0, import_jsx_runtime178.jsx)(import_lucide_react53.SquareX, { size: 15, fill: "#9696b9", color: "#f8f8f8", strokeWidth: 1.8 })
                           }
                         )
                       ]
                     }
                   ) : /* @__PURE__ */ (0, import_jsx_runtime178.jsx)("span", { className: "block min-w-0 flex-1 truncate text-left text-[var(--chekin-color-gray-1)]", children: placeholder ?? "" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime178.jsx)("span", { className: "ml-auto flex items-center gap-2 text-[var(--chekin-color-gray-2)]", children: /* @__PURE__ */ (0, import_jsx_runtime178.jsx)(import_lucide_react51.Paperclip, { size: 20 }) })
+                  /* @__PURE__ */ (0, import_jsx_runtime178.jsx)("span", { className: "ml-auto flex items-center gap-2 text-[var(--chekin-color-gray-2)]", children: /* @__PURE__ */ (0, import_jsx_runtime178.jsx)(import_lucide_react53.Paperclip, { size: 20 }) })
                 ]
               }
             ),
@@ -18330,11 +18362,11 @@ LegacyTextarea.displayName = "LegacyTextarea";
 
 // src/airbnb-fields/datepicker/DatePicker.tsx
 var React73 = __toESM(require("react"), 1);
-var import_lucide_react53 = require("lucide-react");
+var import_lucide_react55 = require("lucide-react");
 
 // src/airbnb-fields/field-trigger/FieldTrigger.tsx
 var React72 = __toESM(require("react"), 1);
-var import_lucide_react52 = require("lucide-react");
+var import_lucide_react54 = require("lucide-react");
 var import_react_i18next42 = require("react-i18next");
 var import_jsx_runtime182 = require("react/jsx-runtime");
 var AirbnbFieldTrigger = React72.forwardRef(
@@ -18398,7 +18430,7 @@ var AirbnbFieldTrigger = React72.forwardRef(
     const resolvedTrailingAdornment = loading || trailingAdornment ? /* @__PURE__ */ (0, import_jsx_runtime182.jsxs)("span", { className: "flex items-center gap-2", children: [
       trailingAdornment,
       loading && /* @__PURE__ */ (0, import_jsx_runtime182.jsx)(
-        import_lucide_react52.Loader2,
+        import_lucide_react54.Loader2,
         {
           "aria-hidden": "true",
           className: "h-5 w-5 animate-spin text-[var(--chekin-color-gray-1)]"
@@ -18654,7 +18686,7 @@ var AirbnbDatePicker = React73.forwardRef(
           onClick: handleTriggerClick,
           onKeyDown: handleTriggerKeyDown,
           onBlur,
-          trailingAdornment: /* @__PURE__ */ (0, import_jsx_runtime183.jsx)(import_lucide_react53.Calendar, { className: "h-5 w-5 text-[#1F1F1B]", strokeWidth: 2 })
+          trailingAdornment: /* @__PURE__ */ (0, import_jsx_runtime183.jsx)(import_lucide_react55.Calendar, { className: "h-5 w-5 text-[#1F1F1B]", strokeWidth: 2 })
         }
       ),
       /* @__PURE__ */ (0, import_jsx_runtime183.jsx)(
@@ -18692,7 +18724,7 @@ AirbnbDatePicker.displayName = "AirbnbDatePicker";
 
 // src/airbnb-fields/input/Input.tsx
 var React74 = __toESM(require("react"), 1);
-var import_lucide_react54 = require("lucide-react");
+var import_lucide_react56 = require("lucide-react");
 var import_react_i18next43 = require("react-i18next");
 var import_jsx_runtime184 = require("react/jsx-runtime");
 var getInputValue = (value) => value != null ? String(value) : "";
@@ -18857,7 +18889,7 @@ var AirbnbInput = React74.forwardRef(
               className: "absolute bottom-0 right-0 flex h-6 w-6 items-center justify-center border-0 bg-transparent p-0 text-[#7A8399] hover:text-[#1F1F1B] hover:opacity-85 disabled:cursor-not-allowed disabled:opacity-50",
               "aria-label": isPasswordRevealed ? t("hide_password") : t("show_password"),
               children: /* @__PURE__ */ (0, import_jsx_runtime184.jsx)(
-                import_lucide_react54.Eye,
+                import_lucide_react56.Eye,
                 {
                   size: 18,
                   "aria-hidden": "true",
@@ -18875,7 +18907,7 @@ AirbnbInput.displayName = "AirbnbInput";
 
 // src/airbnb-fields/phone-field/PhoneField.tsx
 var React80 = __toESM(require("react"), 1);
-var import_lucide_react56 = require("lucide-react");
+var import_lucide_react58 = require("lucide-react");
 
 // src/airbnb-fields/select/Select.tsx
 var React79 = __toESM(require("react"), 1);
@@ -19224,7 +19256,7 @@ function AirbnbSelectMobileContent({
 
 // src/airbnb-fields/select/SelectTrigger.tsx
 var React75 = __toESM(require("react"), 1);
-var import_lucide_react55 = require("lucide-react");
+var import_lucide_react57 = require("lucide-react");
 var import_jsx_runtime189 = require("react/jsx-runtime");
 var AirbnbSelectTrigger = React75.forwardRef(
   ({
@@ -19279,7 +19311,7 @@ var AirbnbSelectTrigger = React75.forwardRef(
         onKeyDown,
         onBlur,
         trailingAdornment: /* @__PURE__ */ (0, import_jsx_runtime189.jsx)(
-          import_lucide_react55.ChevronDown,
+          import_lucide_react57.ChevronDown,
           {
             className: open ? "h-6 w-6 rotate-180 text-[#1F1F1B] transition-transform" : "h-6 w-6 text-[#1F1F1B] transition-transform"
           }
@@ -20063,7 +20095,7 @@ var AirbnbPhoneField = React80.forwardRef(
                 children: [
                   /* @__PURE__ */ (0, import_jsx_runtime191.jsx)("span", { children: valueLabel ?? codePlaceholder }),
                   /* @__PURE__ */ (0, import_jsx_runtime191.jsx)(
-                    import_lucide_react56.ChevronDown,
+                    import_lucide_react58.ChevronDown,
                     {
                       className: cn("h-5 w-5 transition-transform", open ? "rotate-180" : ""),
                       strokeWidth: 2
@@ -20111,7 +20143,7 @@ AirbnbPhoneField.displayName = "AirbnbPhoneField";
 
 // src/airbnb-fields/searchable-select/SearchableSelect.tsx
 var React81 = __toESM(require("react"), 1);
-var import_lucide_react57 = require("lucide-react");
+var import_lucide_react59 = require("lucide-react");
 var import_react_virtual3 = require("@tanstack/react-virtual");
 var import_react90 = require("react");
 var import_jsx_runtime192 = require("react/jsx-runtime");
@@ -20347,7 +20379,7 @@ var AirbnbSearchableSelectInternal = ({
         onKeyDown: handleTriggerKeyDown,
         onBlur,
         trailingAdornment: /* @__PURE__ */ (0, import_jsx_runtime192.jsx)(
-          import_lucide_react57.ChevronDown,
+          import_lucide_react59.ChevronDown,
           {
             className: cn(
               "h-6 w-6 text-[#1F1F1B] transition-transform",
@@ -20445,7 +20477,7 @@ function AirbnbSearchableSelectContent({
   return /* @__PURE__ */ (0, import_jsx_runtime192.jsxs)("div", { className: "p-2", children: [
     /* @__PURE__ */ (0, import_jsx_runtime192.jsxs)("div", { className: "relative mb-2", children: [
       /* @__PURE__ */ (0, import_jsx_runtime192.jsx)(
-        import_lucide_react57.Search,
+        import_lucide_react59.Search,
         {
           "aria-hidden": "true",
           className: "absolute left-4 top-1/2 h-5 w-5 -translate-y-1/2 text-[#9696B9]"
@@ -20555,13 +20587,13 @@ 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_react58 = require("lucide-react");
+var import_lucide_react60 = require("lucide-react");
 var import_jsx_runtime193 = require("react/jsx-runtime");
 var AirbnbSearchInput = React82.forwardRef(({ onReset, placeholder, wrapperClassName, ...props }, ref) => {
   const { t } = (0, import_react_i18next44.useTranslation)();
   const placeholderText = placeholder || t("search_property") + "...";
   return /* @__PURE__ */ (0, import_jsx_runtime193.jsxs)("div", { className: cn("input-wrapper relative", wrapperClassName), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime193.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_runtime193.jsx)(import_lucide_react60.Search, { className: "absolute left-4 top-1/2 h-5 w-5 -translate-y-1/2 transform text-[#9696B9]" }),
     /* @__PURE__ */ (0, import_jsx_runtime193.jsx)(
       "input",
       {
@@ -20587,7 +20619,7 @@ 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_runtime193.jsx)(import_lucide_react58.X, { className: "h-5 w-5" })
+        children: /* @__PURE__ */ (0, import_jsx_runtime193.jsx)(import_lucide_react60.X, { className: "h-5 w-5" })
       }
     )
   ] });
@@ -20597,7 +20629,7 @@ 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_lucide_react61 = require("lucide-react");
 var import_jsx_runtime194 = require("react/jsx-runtime");
 var AirbnbSwitch = React83.forwardRef(
   ({
@@ -20643,7 +20675,7 @@ var AirbnbSwitch = React83.forwardRef(
               "data-[state=checked]:translate-x-[12px] data-[state=unchecked]:translate-x-0"
             ),
             children: /* @__PURE__ */ (0, import_jsx_runtime194.jsx)(
-              import_lucide_react59.Check,
+              import_lucide_react61.Check,
               {
                 "aria-hidden": "true",
                 className: "h-3 w-3 text-[#222222] opacity-0 transition-opacity duration-150 group-data-[state=checked]:opacity-100",