@chekinapp/ui 0.0.129 → 0.0.130

package/dist/index.js

@@ -12124,7 +12124,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,
@@ -12135,7 +12142,7 @@ 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
             }
           ),
@@ -12143,110 +12150,121 @@ var Input = React44.forwardRef(
             "div",
             {
               className: cn(
+                "input__field",
                 "relative block w-full",
                 readOnly && "bg-[var(--empty-field-background)]",
                 fieldClassName
               ),
               children: [
-                /* @__PURE__ */ jsxs89("div", { className: cn("relative w-full cursor-text", contentClassName), children: [
-                  /* @__PURE__ */ jsx142(
-                    Fieldset,
-                    {
-                      isFocused: isFocused && !readOnly,
-                      invalid: hasInvalidState,
-                      isEmpty,
-                      onClick: handleLabelClick,
-                      isActivated: !isEmpty || isFocused,
-                      readOnly,
-                      loading,
-                      disabled,
-                      htmlFor: inputId,
-                      labelId: `${inputId}-label`,
-                      legend: typeof label === "string" ? label : void 0,
-                      label,
-                      tooltip,
-                      labelClassName: cn({
-                        "pl-[28px]": !!leftIcon
-                      })
-                    }
-                  ),
-                  leftIcon && /* @__PURE__ */ jsx142("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__ */ jsx142("span", { className: "flex h-full w-10 items-center justify-center", children: leftIcon }) }),
-                  /* @__PURE__ */ jsx142(
-                    "input",
-                    {
-                      ...props,
-                      ref: combinedInputRef,
-                      id: inputId,
-                      name,
-                      type: inputType,
-                      "data-testid": "input",
-                      value,
-                      defaultValue,
-                      disabled: disabled || loading,
-                      readOnly,
-                      required: !optional,
-                      "aria-label": typeof label === "string" ? label : void 0,
-                      "aria-invalid": hasInvalidState,
-                      "aria-busy": loading,
-                      "aria-describedby": errorMessage && renderErrorMessage ? errorId : void 0,
-                      placeholder: isFocused || !label ? placeholder : void 0,
-                      onChange: handleChange,
-                      onFocus: handleFocus,
-                      onBlur: handleBlur,
-                      className: cn(
-                        "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",
-                        isEmpty && "text-[var(--chekin-color-gray-1)]",
-                        inputType === "password" && "[&:not(:placeholder-shown)]:font-bold [&:not(:placeholder-shown)]:tracking-[2px]",
-                        (disabled || readOnly) && "cursor-not-allowed",
-                        loading && "cursor-progress",
-                        leftIcon && "pl-10",
-                        (showRightPaddingForReset || showRightPaddingForReveal) && "pr-10",
-                        sign && "pr-10",
-                        inputClassName
-                      )
-                    }
-                  ),
-                  sign && /* @__PURE__ */ jsx142("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__ */ jsx142("span", { className: "pointer-events-none absolute right-[14px] top-0 flex h-full items-center", children: trailingAdornment }),
-                  onReset && !isEmpty && /* @__PURE__ */ jsx142(
-                    "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",
-                      "aria-label": t("reset"),
-                      children: /* @__PURE__ */ jsx142(X9, { size: 14 })
-                    }
-                  ),
-                  isPasswordReveal && /* @__PURE__ */ jsx142(
-                    "button",
-                    {
-                      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",
-                      "aria-label": isPasswordRevealed ? t("hide_password") : t("show_password"),
-                      children: /* @__PURE__ */ jsx142(
-                        Eye,
+                /* @__PURE__ */ jsxs89(
+                  "div",
+                  {
+                    className: cn("input__content relative w-full cursor-text", contentClassName),
+                    children: [
+                      /* @__PURE__ */ jsx142(
+                        Fieldset,
                         {
-                          size: 20,
+                          isFocused: isFocused && !readOnly,
+                          invalid: hasInvalidState,
+                          isEmpty,
+                          onClick: handleLabelClick,
+                          isActivated: !isEmpty || isFocused,
+                          readOnly,
+                          loading,
+                          disabled,
+                          htmlFor: inputId,
+                          labelId: `${inputId}-label`,
+                          legend: typeof label === "string" ? label : void 0,
+                          label,
+                          tooltip,
+                          className: "input__fieldset",
+                          labelClassName: cn({
+                            input__label: true,
+                            "pl-[28px]": !!leftIcon
+                          })
+                        }
+                      ),
+                      leftIcon && /* @__PURE__ */ jsx142("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__ */ jsx142("span", { className: "input__left-icon-inner flex h-full w-10 items-center justify-center", children: leftIcon }) }),
+                      /* @__PURE__ */ jsx142(
+                        "input",
+                        {
+                          ...props,
+                          ref: combinedInputRef,
+                          id: inputId,
+                          name,
+                          type: inputType,
+                          "data-testid": "input",
+                          value,
+                          defaultValue,
+                          disabled: disabled || loading,
+                          readOnly,
+                          required: !optional,
+                          "aria-label": typeof label === "string" ? label : void 0,
+                          "aria-invalid": hasInvalidState,
+                          "aria-busy": loading,
+                          "aria-describedby": errorMessage && renderErrorMessage ? errorId : void 0,
+                          placeholder: isFocused || !label ? placeholder : void 0,
+                          onChange: handleChange,
+                          onFocus: handleFocus,
+                          onBlur: handleBlur,
                           className: cn(
-                            isPasswordRevealed ? "text-[#fc98dd]" : "text-[var(--chekin-color-gray-2)]"
+                            "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",
+                            isEmpty && "text-[var(--chekin-color-gray-1)]",
+                            inputType === "password" && "[&:not(:placeholder-shown)]:font-bold [&:not(:placeholder-shown)]:tracking-[2px]",
+                            (disabled || readOnly) && "cursor-not-allowed",
+                            loading && "cursor-progress",
+                            leftIcon && "pl-10",
+                            (showRightPaddingForReset || showRightPaddingForReveal) && "pr-10",
+                            sign && "pr-10",
+                            inputClassName
+                          )
+                        }
+                      ),
+                      sign && /* @__PURE__ */ jsx142("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__ */ jsx142("span", { className: "input__trailing-adornment pointer-events-none absolute right-[14px] top-0 flex h-full items-center", children: trailingAdornment }),
+                      onReset && !isEmpty && /* @__PURE__ */ jsx142(
+                        "button",
+                        {
+                          type: "button",
+                          onClick: onReset,
+                          disabled,
+                          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__ */ jsx142(X9, { size: 14 })
+                        }
+                      ),
+                      isPasswordReveal && /* @__PURE__ */ jsx142(
+                        "button",
+                        {
+                          type: "button",
+                          onClick: togglePasswordReveal,
+                          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__ */ jsx142(
+                            Eye,
+                            {
+                              size: 20,
+                              className: cn(
+                                "input__password-icon",
+                                isPasswordRevealed ? "text-[#fc98dd]" : "text-[var(--chekin-color-gray-2)]"
+                              )
+                            }
                           )
                         }
                       )
-                    }
-                  )
-                ] }),
-                type === "number" && showNumberButtons && /* @__PURE__ */ jsxs89("div", { className: "absolute right-[18px] top-[13px] inline-flex items-center text-right", children: [
+                    ]
+                  }
+                ),
+                type === "number" && showNumberButtons && /* @__PURE__ */ jsxs89("div", { className: "input__number-controls absolute right-[18px] top-[13px] inline-flex items-center text-right", children: [
                   /* @__PURE__ */ jsx142(
                     "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",
+                      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__ */ jsx142(Minus4, { size: 16, strokeWidth: 3, "aria-hidden": true })
                     }
@@ -12256,7 +12274,7 @@ var Input = React44.forwardRef(
                     {
                       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",
+                      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__ */ jsx142(Plus3, { size: 16, strokeWidth: 3, "aria-hidden": true })
                     }
@@ -12269,18 +12287,18 @@ var Input = React44.forwardRef(
             "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__ */ jsx142("span", { className: "mt-[1px] block text-[12px] font-normal text-[var(--chekin-color-gray-1)]", children: helperText }),
+          !errorMessage && helperText && /* @__PURE__ */ jsx142("span", { className: "input__helper-text mt-[1px] block text-[12px] font-normal text-[var(--chekin-color-gray-1)]", children: helperText }),
           errorMessage && renderErrorMessage && /* @__PURE__ */ jsx142(
             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
@@ -12334,7 +12352,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
@@ -13080,15 +13098,15 @@ 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 isControlledOpen = controlledIsOpen === true;
+  const isOpen = isControlledOpen || internalIsOpen;
   const setIsOpen = React47.useCallback(
     (next) => {
       const value = typeof next === "function" ? next(isOpen) : next;
-      if (!isControlled) setInternalIsOpen(value);
+      setInternalIsOpen(value);
       onMenuOpenChange?.(value);
     },
-    [isOpen, isControlled, onMenuOpenChange]
+    [isOpen, onMenuOpenChange]
   );
   const openMenu = React47.useCallback(() => {
     setIsOpen(true);
@@ -14238,7 +14256,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
@@ -15156,7 +15174,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
@@ -16226,7 +16244,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
@@ -16587,19 +16605,130 @@ function useRangeValue({
 
 // src/dashboard/date-range-picker/hooks/useRangeTextInputs.ts
 import * as React64 from "react";
+
+// 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 };
@@ -16638,6 +16767,8 @@ function useRangeTextInputs({
     toText,
     setFromText,
     setToText,
+    handleFromChange,
+    handleToChange,
     handleFromBlur,
     handleToBlur
   };
@@ -16742,6 +16873,7 @@ function DateRangeInputs({
             id: fromId,
             name: name ? `${name}-from` : void 0,
             type: "text",
+            inputMode: "numeric",
             autoComplete: "off",
             placeholder: fromPlaceholder,
             value: fromText,
@@ -16777,6 +16909,7 @@ function DateRangeInputs({
             id: toId,
             name: name ? `${name}-to` : void 0,
             type: "text",
+            inputMode: "numeric",
             autoComplete: "off",
             placeholder: toPlaceholder,
             value: toText,
@@ -16978,12 +17111,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);
@@ -17005,6 +17159,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);
@@ -17082,7 +17237,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
@@ -17115,8 +17270,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");
@@ -17435,7 +17590,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",