@chekinapp/ui 0.0.129 → 0.0.131

package/dist/index.cjs

@@ -12488,7 +12488,14 @@ var Input = React44.forwardRef(
       "div",
       {
         className: cn(
-          "relative block w-full max-w-[var(--field-max-width,296px)] min-h-[var(--field-min-height,48px)]",
+          "input",
+          disabled && "input--disabled",
+          loading && "input--loading",
+          readOnly && "input--readonly",
+          isFocused && "input--focused",
+          isEmpty && "input--empty",
+          hasInvalidState && "input--invalid",
+          "relative block w-[var(--field-width,100%)] max-w-[var(--field-max-width,296px)] min-h-[var(--field-min-height,48px)]",
           disabled && "cursor-not-allowed opacity-50",
           loading && "cursor-progress opacity-50",
           wrapperClassName,
@@ -12499,20 +12506,16 @@ var Input = React44.forwardRef(
             "label",
             {
               htmlFor: inputId,
-              className: "mb-2 block text-[14px] font-medium text-[var(--chekin-color-brand-navy)]",
+              className: "input__top-label mb-2 block text-[14px] font-medium text-[var(--chekin-color-brand-navy)]",
               children: topLabel
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime144.jsxs)(
-            "div",
-            {
-              className: cn(
-                "relative block w-full",
-                readOnly && "bg-[var(--empty-field-background)]",
-                fieldClassName
-              ),
-              children: [
-                /* @__PURE__ */ (0, import_jsx_runtime144.jsxs)("div", { className: cn("relative w-full cursor-text", contentClassName), children: [
+          /* @__PURE__ */ (0, import_jsx_runtime144.jsxs)("div", { className: cn("input__field", "relative block w-full", fieldClassName), children: [
+            /* @__PURE__ */ (0, import_jsx_runtime144.jsxs)(
+              "div",
+              {
+                className: cn("input__content relative w-full cursor-text", contentClassName),
+                children: [
                   /* @__PURE__ */ (0, import_jsx_runtime144.jsx)(
                     Fieldset,
                     {
@@ -12529,12 +12532,14 @@ var Input = React44.forwardRef(
                       legend: typeof label === "string" ? label : void 0,
                       label,
                       tooltip,
+                      className: "input__fieldset",
                       labelClassName: cn({
+                        input__label: true,
                         "pl-[28px]": !!leftIcon
                       })
                     }
                   ),
-                  leftIcon && /* @__PURE__ */ (0, import_jsx_runtime144.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_runtime144.jsx)("span", { className: "flex h-full w-10 items-center justify-center", children: leftIcon }) }),
+                  leftIcon && /* @__PURE__ */ (0, import_jsx_runtime144.jsx)("span", { className: "input__left-icon 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_runtime144.jsx)("span", { className: "input__left-icon-inner flex h-full w-10 items-center justify-center", children: leftIcon }) }),
                   /* @__PURE__ */ (0, import_jsx_runtime144.jsx)(
                     "input",
                     {
@@ -12558,6 +12563,7 @@ var Input = React44.forwardRef(
                       onFocus: handleFocus,
                       onBlur: handleBlur,
                       className: cn(
+                        "input__control",
                         "m-0 box-border h-12 w-full rounded-[6px] border-0 px-4 text-[16px] font-medium leading-5 text-[var(--chekin-color-brand-navy)] outline-none transition-colors duration-200 [text-overflow:ellipsis] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none",
                         "placeholder:font-medium placeholder:text-[var(--chekin-color-gray-1)] placeholder:opacity-100",
                         isEmpty && !isFocused ? "bg-[var(--empty-field-background)]" : "bg-transparent",
@@ -12572,15 +12578,15 @@ var Input = React44.forwardRef(
                       )
                     }
                   ),
-                  sign && /* @__PURE__ */ (0, import_jsx_runtime144.jsx)("span", { className: "pointer-events-none absolute right-[14px] top-0 flex h-full items-center text-[18px] font-medium leading-6 text-[var(--chekin-color-brand-navy)]", children: sign }),
-                  trailingAdornment && /* @__PURE__ */ (0, import_jsx_runtime144.jsx)("span", { className: "pointer-events-none absolute right-[14px] top-0 flex h-full items-center", children: trailingAdornment }),
+                  sign && /* @__PURE__ */ (0, import_jsx_runtime144.jsx)("span", { className: "input__sign pointer-events-none absolute right-[14px] top-0 flex h-full items-center text-[18px] font-medium leading-6 text-[var(--chekin-color-brand-navy)]", children: sign }),
+                  trailingAdornment && /* @__PURE__ */ (0, import_jsx_runtime144.jsx)("span", { className: "input__trailing-adornment pointer-events-none absolute right-[14px] top-0 flex h-full items-center", children: trailingAdornment }),
                   onReset && !isEmpty && /* @__PURE__ */ (0, import_jsx_runtime144.jsx)(
                     "button",
                     {
                       type: "button",
                       onClick: onReset,
                       disabled,
-                      className: "absolute right-0 top-0 flex h-full w-10 items-center justify-center border-0 bg-transparent p-0 text-[#9696b9] hover:opacity-80 disabled:cursor-not-allowed disabled:opacity-50",
+                      className: "input__reset-button absolute right-0 top-0 flex h-full w-10 items-center justify-center border-0 bg-transparent p-0 text-[#9696b9] hover:opacity-80 disabled:cursor-not-allowed disabled:opacity-50",
                       "aria-label": t("reset"),
                       children: /* @__PURE__ */ (0, import_jsx_runtime144.jsx)(import_lucide_react42.X, { size: 14 })
                     }
@@ -12590,61 +12596,62 @@ var Input = React44.forwardRef(
                     {
                       type: "button",
                       onClick: togglePasswordReveal,
-                      className: "absolute right-[14px] top-[18px] flex h-[13px] w-[21px] cursor-pointer items-center justify-center border-0 bg-transparent p-0 hover:opacity-85",
+                      className: "input__password-button absolute right-[14px] top-[18px] flex h-[13px] w-[21px] cursor-pointer items-center justify-center border-0 bg-transparent p-0 hover:opacity-85",
                       "aria-label": isPasswordRevealed ? t("hide_password") : t("show_password"),
                       children: /* @__PURE__ */ (0, import_jsx_runtime144.jsx)(
                         import_lucide_react42.Eye,
                         {
                           size: 20,
                           className: cn(
+                            "input__password-icon",
                             isPasswordRevealed ? "text-[#fc98dd]" : "text-[var(--chekin-color-gray-2)]"
                           )
                         }
                       )
                     }
                   )
-                ] }),
-                type === "number" && showNumberButtons && /* @__PURE__ */ (0, import_jsx_runtime144.jsxs)("div", { className: "absolute right-[18px] top-[13px] inline-flex items-center text-right", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime144.jsx)(
-                    "button",
-                    {
-                      type: "button",
-                      onClick: onDecrement,
-                      className: "mr-2 inline-flex h-[23px] w-8 cursor-pointer items-center justify-center rounded-[3px] border-0 bg-[var(--chekin-color-brand-blue)] p-0 text-[20px] font-bold text-white outline-none hover:opacity-90 active:opacity-100",
-                      "aria-label": t("decrement"),
-                      children: /* @__PURE__ */ (0, import_jsx_runtime144.jsx)(import_lucide_react42.Minus, { size: 16, strokeWidth: 3, "aria-hidden": true })
-                    }
-                  ),
-                  /* @__PURE__ */ (0, import_jsx_runtime144.jsx)(
-                    "button",
-                    {
-                      type: "button",
-                      onClick: onIncrement,
-                      className: "inline-flex h-[23px] w-8 cursor-pointer items-center justify-center rounded-[3px] border-0 bg-[var(--chekin-color-brand-blue)] p-0 text-[20px] font-bold text-white outline-none hover:opacity-90 active:opacity-100",
-                      "aria-label": t("increment"),
-                      children: /* @__PURE__ */ (0, import_jsx_runtime144.jsx)(import_lucide_react42.Plus, { size: 16, strokeWidth: 3, "aria-hidden": true })
-                    }
-                  )
-                ] })
-              ]
-            }
-          ),
+                ]
+              }
+            ),
+            type === "number" && showNumberButtons && /* @__PURE__ */ (0, import_jsx_runtime144.jsxs)("div", { className: "input__number-controls absolute right-[18px] top-[13px] inline-flex items-center text-right", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime144.jsx)(
+                "button",
+                {
+                  type: "button",
+                  onClick: onDecrement,
+                  className: "input__decrement-button mr-2 inline-flex h-[23px] w-8 cursor-pointer items-center justify-center rounded-[3px] border-0 bg-[var(--chekin-color-brand-blue)] p-0 text-[20px] font-bold text-white outline-none hover:opacity-90 active:opacity-100",
+                  "aria-label": t("decrement"),
+                  children: /* @__PURE__ */ (0, import_jsx_runtime144.jsx)(import_lucide_react42.Minus, { size: 16, strokeWidth: 3, "aria-hidden": true })
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime144.jsx)(
+                "button",
+                {
+                  type: "button",
+                  onClick: onIncrement,
+                  className: "input__increment-button inline-flex h-[23px] w-8 cursor-pointer items-center justify-center rounded-[3px] border-0 bg-[var(--chekin-color-brand-blue)] p-0 text-[20px] font-bold text-white outline-none hover:opacity-90 active:opacity-100",
+                  "aria-label": t("increment"),
+                  children: /* @__PURE__ */ (0, import_jsx_runtime144.jsx)(import_lucide_react42.Plus, { size: 16, strokeWidth: 3, "aria-hidden": true })
+                }
+              )
+            ] })
+          ] }),
           !errorMessage && optional && /* @__PURE__ */ (0, import_jsx_runtime144.jsx)(
             "span",
             {
               "data-testid": `${name}-optional`,
-              className: "mt-[1px] block text-left text-[14px] font-medium text-[var(--chekin-color-gray-1)]",
+              className: "input__optional mt-[1px] block text-left text-[14px] font-medium text-[var(--chekin-color-gray-1)]",
               children: typeof optional === "string" ? optional : t("optional")
             }
           ),
-          !errorMessage && helperText && /* @__PURE__ */ (0, import_jsx_runtime144.jsx)("span", { className: "mt-[1px] block text-[12px] font-normal text-[var(--chekin-color-gray-1)]", children: helperText }),
+          !errorMessage && helperText && /* @__PURE__ */ (0, import_jsx_runtime144.jsx)("span", { className: "input__helper-text mt-[1px] block text-[12px] font-normal text-[var(--chekin-color-gray-1)]", children: helperText }),
           errorMessage && renderErrorMessage && /* @__PURE__ */ (0, import_jsx_runtime144.jsx)(
             FieldErrorMessage,
             {
               id: errorId,
               message: errorMessage,
               "data-testid": name ? `${name}-error` : void 0,
-              className: "mt-[1px] text-[14px]"
+              className: "input__error mt-[1px] text-[14px]"
             }
           ),
           footer
@@ -12698,7 +12705,7 @@ function SelectFieldShell({
       onBlur,
       onFocus: handleContainerFocus,
       className: cn(
-        "relative w-full max-w-[var(--field-max-width,296px)] outline-none",
+        "relative w-[var(--field-width,100%)] max-w-[var(--field-max-width,296px)] outline-none",
         disabled && !loading && "cursor-not-allowed opacity-50",
         loading && "cursor-progress opacity-50",
         className
@@ -13444,15 +13451,19 @@ function useSelectMenuState({
 }) {
   const containerRef = React47.useRef(null);
   const [internalIsOpen, setInternalIsOpen] = React47.useState(false);
-  const isControlled = controlledIsOpen !== void 0;
-  const isOpen = isControlled ? Boolean(controlledIsOpen) : internalIsOpen;
+  const [hasClosedControlledOpen, setHasClosedControlledOpen] = React47.useState(false);
+  const isOpen = controlledIsOpen === false ? false : controlledIsOpen === true ? !hasClosedControlledOpen : internalIsOpen;
+  React47.useEffect(() => {
+    if (controlledIsOpen !== true) setHasClosedControlledOpen(false);
+  }, [controlledIsOpen]);
   const setIsOpen = React47.useCallback(
     (next) => {
       const value = typeof next === "function" ? next(isOpen) : next;
-      if (!isControlled) setInternalIsOpen(value);
+      if (controlledIsOpen === true) setHasClosedControlledOpen(!value);
+      if (controlledIsOpen !== false) setInternalIsOpen(value);
       onMenuOpenChange?.(value);
     },
-    [isOpen, isControlled, onMenuOpenChange]
+    [isOpen, controlledIsOpen, onMenuOpenChange]
   );
   const openMenu = React47.useCallback(() => {
     setIsOpen(true);
@@ -14602,7 +14613,7 @@ var PhoneInput = React50.forwardRef(function PhoneInput2({
     "div",
     {
       className: cn(
-        "relative w-full max-w-[var(--field-max-width,296px)]",
+        "relative w-[var(--field-width,100%)] max-w-[var(--field-max-width,296px)]",
         disabled && "cursor-not-allowed opacity-50",
         loading && "cursor-progress",
         className
@@ -14653,7 +14664,7 @@ var PhoneInput = React50.forwardRef(function PhoneInput2({
                   filterOption: countriesFilter,
                   clearable: false,
                   getValueLabel: (option) => option.value,
-                  className: "!max-w-none",
+                  className: "max-w-none w-auto",
                   dropdownClassName: "right-auto w-[280px]"
                 }
               ),
@@ -14678,7 +14689,7 @@ var PhoneInput = React50.forwardRef(function PhoneInput2({
                   onFocus,
                   onBlur,
                   renderErrorMessage: false,
-                  wrapperClassName: "!max-w-none",
+                  wrapperClassName: "max-w-none w-auto",
                   contentClassName: readOnly ? "!cursor-default" : void 0,
                   inputClassName: readOnly ? "!cursor-default" : void 0
                 }
@@ -15520,7 +15531,7 @@ var Textarea = React60.forwardRef(function Textarea2({
     "div",
     {
       className: cn(
-        "relative block min-h-[88px] w-full max-w-[var(--field-max-width,296px)]",
+        "relative block min-h-[88px] w-[var(--field-width,100%)] max-w-[var(--field-max-width,296px)]",
         isBlocked && "cursor-not-allowed opacity-50",
         loading && "cursor-progress opacity-50",
         className
@@ -16590,7 +16601,7 @@ var Datepicker = React62.forwardRef(
       {
         ref: containerRef,
         className: cn(
-          "relative w-full max-w-[var(--field-max-width,296px)]",
+          "relative w-[var(--field-width,100%)] max-w-[var(--field-max-width,296px)]",
           disabled && "cursor-not-allowed opacity-50",
           loading && "cursor-progress opacity-50",
           className
@@ -16951,19 +16962,130 @@ function useRangeValue({
 
 // src/dashboard/date-range-picker/hooks/useRangeTextInputs.ts
 var React64 = __toESM(require("react"), 1);
+
+// src/dashboard/date-range-picker/utils/inputFormat.ts
+function parseDateInputFormat(format2) {
+  const tokens = [];
+  let i = 0;
+  while (i < format2.length) {
+    const ch = format2[i];
+    if (/[a-zA-Z]/.test(ch)) {
+      let len = 1;
+      while (i + len < format2.length && format2[i + len] === ch) len++;
+      tokens.push({ type: "digits", length: len });
+      i += len;
+    } else {
+      tokens.push({ type: "separator", char: ch });
+      i += 1;
+    }
+  }
+  return tokens;
+}
+function getMaxDigits(tokens) {
+  return tokens.reduce(
+    (sum, token) => token.type === "digits" ? sum + token.length : sum,
+    0
+  );
+}
+function autoFormatDateInput(raw, tokens) {
+  const digitTokens = tokens.filter(
+    (token) => token.type === "digits"
+  );
+  const sepToken = tokens.find(
+    (token) => token.type === "separator"
+  );
+  const sepChar = sepToken?.char ?? "-";
+  const segments = [];
+  let segIdx = 0;
+  let current = "";
+  let endedWithSeparator = false;
+  for (let i = 0; i < raw.length; i++) {
+    if (segIdx >= digitTokens.length) break;
+    const ch = raw[i];
+    const segLen = digitTokens[segIdx].length;
+    if (/\d/.test(ch)) {
+      if (current.length >= segLen) {
+        segments.push(current);
+        segIdx++;
+        if (segIdx >= digitTokens.length) {
+          current = "";
+          endedWithSeparator = false;
+          break;
+        }
+        current = ch;
+      } else {
+        current += ch;
+      }
+      endedWithSeparator = false;
+    } else if (current.length > 0) {
+      if (current.length < segLen) {
+        if (segLen > 2) continue;
+        current = current.padStart(segLen, "0");
+      }
+      segments.push(current);
+      current = "";
+      segIdx++;
+      endedWithSeparator = true;
+    }
+  }
+  if (current.length > 0) {
+    segments.push(current);
+    endedWithSeparator = false;
+  }
+  let result = segments.join(sepChar);
+  if (endedWithSeparator && segments.length < digitTokens.length) {
+    result += sepChar;
+  }
+  return result;
+}
+
+// src/dashboard/date-range-picker/hooks/useRangeTextInputs.ts
+var countDigits = (text) => text.replace(/\D/g, "").length;
 function useRangeTextInputs({
   value,
   format: format2,
   parse: parse3,
+  displayFormat,
   onCommit,
-  onBlur
+  onBlur,
+  onFromComplete,
+  onToComplete
 }) {
+  const tokens = React64.useMemo(
+    () => parseDateInputFormat(displayFormat),
+    [displayFormat]
+  );
+  const maxDigits = React64.useMemo(() => getMaxDigits(tokens), [tokens]);
   const [fromText, setFromText] = React64.useState(value?.from ? format2(value.from) : "");
   const [toText, setToText] = React64.useState(value?.to ? format2(value.to) : "");
   React64.useEffect(() => {
     setFromText(value?.from ? format2(value.from) : "");
     setToText(value?.to ? format2(value.to) : "");
   }, [format2, value?.from, value?.to]);
+  const handleFromChange = React64.useCallback(
+    (raw) => {
+      const formatted = autoFormatDateInput(raw, tokens);
+      const wasComplete = countDigits(fromText) === maxDigits;
+      const isComplete = countDigits(formatted) === maxDigits;
+      setFromText(formatted);
+      if (!wasComplete && isComplete && parse3(formatted)) {
+        setTimeout(() => onFromComplete?.(), 0);
+      }
+    },
+    [fromText, maxDigits, onFromComplete, parse3, tokens]
+  );
+  const handleToChange = React64.useCallback(
+    (raw) => {
+      const formatted = autoFormatDateInput(raw, tokens);
+      const wasComplete = countDigits(toText) === maxDigits;
+      const isComplete = countDigits(formatted) === maxDigits;
+      setToText(formatted);
+      if (!wasComplete && isComplete && parse3(formatted)) {
+        setTimeout(() => onToComplete?.(), 0);
+      }
+    },
+    [maxDigits, onToComplete, parse3, toText, tokens]
+  );
   const handleFromBlur = React64.useCallback(() => {
     if (!fromText) {
       const next = { from: void 0, to: value?.to };
@@ -17002,6 +17124,8 @@ function useRangeTextInputs({
     toText,
     setFromText,
     setToText,
+    handleFromChange,
+    handleToChange,
     handleFromBlur,
     handleToBlur
   };
@@ -17106,6 +17230,7 @@ function DateRangeInputs({
             id: fromId,
             name: name ? `${name}-from` : void 0,
             type: "text",
+            inputMode: "numeric",
             autoComplete: "off",
             placeholder: fromPlaceholder,
             value: fromText,
@@ -17141,6 +17266,7 @@ function DateRangeInputs({
             id: toId,
             name: name ? `${name}-to` : void 0,
             type: "text",
+            inputMode: "numeric",
             autoComplete: "off",
             placeholder: toPlaceholder,
             value: toText,
@@ -17342,12 +17468,33 @@ var DateRangePicker = React66.forwardRef(function DateRangePicker2({
   const normalizedMaxDate = React66.useMemo(() => toDate(maxDate), [maxDate]);
   const formatter = React66.useMemo(() => formatDate(displayFormat), [displayFormat]);
   const parser = React66.useMemo(() => parseDate(displayFormat), [displayFormat]);
-  const { fromText, toText, setFromText, setToText, handleFromBlur, handleToBlur } = useRangeTextInputs({
+  const closeCalendarRef = React66.useRef(() => {
+  });
+  const handleFromComplete = React66.useCallback(() => {
+    toInputRef.current?.focus();
+  }, []);
+  const handleToComplete = React66.useCallback(() => {
+    toInputRef.current?.blur();
+    closeCalendarRef.current();
+  }, []);
+  const {
+    fromText,
+    toText,
+    setFromText,
+    setToText,
+    handleFromChange,
+    handleToChange,
+    handleFromBlur,
+    handleToBlur
+  } = useRangeTextInputs({
     value,
     format: formatter,
     parse: parser,
+    displayFormat,
     onCommit: commit,
-    onBlur
+    onBlur,
+    onFromComplete: handleFromComplete,
+    onToComplete: handleToComplete
   });
   const { month, setMonth, syncMonthToValue } = useRangeMonthSync(value);
   const [isOpen, setIsOpen] = React66.useState(false);
@@ -17369,6 +17516,7 @@ var DateRangePicker = React66.forwardRef(function DateRangePicker2({
     setAutoFocus(false);
     if (value?.from) setMonth(value.from);
   }, [setMonth, value?.from]);
+  closeCalendarRef.current = closeCalendar;
   const openCalendar = React66.useCallback(() => {
     if (isBlocked || readOnly) return;
     setIsOpen(true);
@@ -17446,7 +17594,7 @@ var DateRangePicker = React66.forwardRef(function DateRangePicker2({
     {
       ref: containerRef,
       className: cn(
-        "relative w-full max-w-[var(--field-max-width,296px)]",
+        "relative w-[var(--field-width,100%)] max-w-[var(--field-max-width,296px)]",
         disabled && "cursor-not-allowed opacity-50",
         loading && "cursor-progress opacity-50",
         className
@@ -17479,8 +17627,8 @@ var DateRangePicker = React66.forwardRef(function DateRangePicker2({
               focusedInput,
               clearLabel: t("clear_dates"),
               openCalendarLabel: t("open_calendar"),
-              onFromTextChange: setFromText,
-              onToTextChange: setToText,
+              onFromTextChange: handleFromChange,
+              onToTextChange: handleToChange,
               onFromFocus: (event) => {
                 onFocus?.(event);
                 setFocusedInput("from");
@@ -17796,7 +17944,7 @@ var FileInput = React69.forwardRef(function FileInput2({
     {
       htmlFor: inputId,
       className: cn(
-        "relative block w-full max-w-[var(--field-max-width,296px)] cursor-pointer text-left",
+        "relative block w-[var(--field-width,100%)] max-w-[var(--field-max-width,296px)] cursor-pointer text-left",
         (disabled || readOnly) && "cursor-not-allowed",
         loading && "cursor-progress opacity-50",
         disabled && "opacity-50",