@rehagro/ui 1.0.38 → 1.0.40

package/dist/index.mjs

@@ -1050,8 +1050,8 @@ var IconButton = forwardRef(function IconButton2({
   );
 });
 var statusClasses = {
-  default: "rh-border-border focus-within:rh-ring-2 focus-within:rh-ring-ring",
-  error: "rh-border-danger focus-within:rh-ring-2 focus-within:rh-ring-danger"
+  default: "rh-border-border focus-within:rh-border-primary focus-within:rh-ring-2 focus-within:rh-ring-gray-200",
+  error: "rh-border-danger focus-within:rh-border-danger focus-within:rh-ring-2 focus-within:rh-ring-red-100"
 };
 var sizeClasses3 = {
   sm: "rh-h-input-sm rh-text-sm rh-px-input-x-sm",
@@ -1100,6 +1100,9 @@ var TextInput = forwardRef(function TextInput2({
   ...rest
 }, ref) {
   const inputId = id || React9.useId();
+  const [isHelperDismissed, setIsHelperDismissed] = React9.useState(false);
+  const { onChange, ...inputProps } = rest;
+  const visualStatus = helperText && isHelperDismissed ? "default" : status;
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -1117,7 +1120,7 @@ var TextInput = forwardRef(function TextInput2({
               "rh-border rh-bg-surface rh-font-body",
               "rh-transition-colors rh-duration-150",
               "rh-overflow-hidden",
-              statusClasses[status],
+              statusClasses[visualStatus],
               radiusClasses3[radius],
               sizeClasses3[size],
               disabled ? "rh-opacity-50 rh-cursor-not-allowed rh-bg-background" : "",
@@ -1141,14 +1144,18 @@ var TextInput = forwardRef(function TextInput2({
                   ref,
                   id: inputId,
                   disabled,
-                  "aria-invalid": status === "error" || void 0,
+                  "aria-invalid": visualStatus === "error" || void 0,
                   "aria-describedby": helperText ? `${inputId}-helper` : void 0,
                   className: [
                     "rh-flex-1 rh-min-w-0 rh-bg-transparent rh-outline-none",
-                    "rh-text-text placeholder:rh-text-text-muted",
+                    "rh-text-text placeholder:rh-text-text-muted hover:placeholder:rh-text-text",
                     disabled ? "rh-cursor-not-allowed" : ""
                   ].filter(Boolean).join(" "),
-                  ...rest
+                  onChange: (e) => {
+                    if (helperText) setIsHelperDismissed(true);
+                    onChange?.(e);
+                  },
+                  ...inputProps
                 }
               ),
               rightIcon && /* @__PURE__ */ jsx(
@@ -1165,13 +1172,13 @@ var TextInput = forwardRef(function TextInput2({
             ]
           }
         ),
-        helperText && /* @__PURE__ */ jsxs(
+        helperText && !isHelperDismissed && /* @__PURE__ */ jsxs(
           "span",
           {
             id: `${inputId}-helper`,
             className: [
               "rh-flex rh-items-center rh-gap-1 rh-text-xs",
-              helperStatusClasses[status]
+              helperStatusClasses[visualStatus]
             ].join(" "),
             children: [
               /* @__PURE__ */ jsx(WarningCircleIcon, {}),
@@ -1464,8 +1471,8 @@ var RadioGroup = forwardRef(function RadioGroup2({
   );
 });
 var statusClasses2 = {
-  default: "rh-border-border focus-within:rh-ring-2 focus-within:rh-ring-ring focus-within:rh-ring-offset-2",
-  error: "rh-border-danger focus-within:rh-ring-2 focus-within:rh-ring-danger focus-within:rh-ring-offset-2"
+  default: "rh-border-border focus-within:rh-border-primary focus-within:rh-ring-2 focus-within:rh-ring-gray-200 ",
+  error: "rh-border-danger focus-within:rh-border-danger focus-within:rh-ring-2 focus-within:rh-ring-red-100 "
 };
 var sizeClasses5 = {
   sm: "rh-min-h-[32px] rh-text-sm rh-px-input-x-sm",
@@ -1559,6 +1566,8 @@ var Select = forwardRef(function Select2(props, ref) {
   const helperId = React9.useId();
   const [isOpen, setIsOpen] = React9.useState(false);
   const [activeIndex, setActiveIndex] = React9.useState(-1);
+  const [isHelperDismissed, setIsHelperDismissed] = React9.useState(false);
+  React9.useRef({ query: "", lastAt: 0 });
   const wrapperRef = React9.useRef(null);
   const innerRef = React9.useRef(null);
   const listboxRef = React9.useRef(null);
@@ -1572,7 +1581,9 @@ var Select = forwardRef(function Select2(props, ref) {
   const isControlled = props.value !== void 0;
   const selectedValues = isControlled ? Array.isArray(props.value) ? props.value : props.value !== void 0 ? [props.value] : [] : internalValue;
   const enabledOptions = options.filter((o) => !o.disabled);
+  const visualStatus = helperText && isHelperDismissed ? "default" : status;
   const handleSelect = (optionValue) => {
+    if (helperText) setIsHelperDismissed(true);
     if (multiple) {
       const next = selectedValues.includes(optionValue) ? selectedValues.filter((v) => v !== optionValue) : [...selectedValues, optionValue];
       if (!isControlled) setInternalValue(next);
@@ -1722,17 +1733,17 @@ var Select = forwardRef(function Select2(props, ref) {
             "aria-controls": listboxId,
             "aria-labelledby": label ? `${triggerId}-label` : void 0,
             "aria-describedby": helperText ? helperId : void 0,
-            "aria-invalid": status === "error" || void 0,
+            "aria-invalid": visualStatus === "error" || void 0,
             "aria-disabled": disabled || void 0,
             disabled,
             onClick: () => !disabled && setIsOpen((o) => !o),
             onKeyDown: handleKeyDown,
             className: [
-              "rh-flex rh-items-center rh-justify-between rh-gap-2",
+              "rh-group rh-flex rh-items-center rh-justify-between rh-gap-2",
               "rh-border rh-bg-surface rh-font-body",
               "rh-transition-colors rh-duration-150",
               "rh-text-left rh-w-full",
-              statusClasses2[status],
+              statusClasses2[visualStatus],
               radiusClasses4[radius],
               sizeClasses5[size],
               disabled ? "rh-opacity-50 rh-cursor-not-allowed rh-bg-background" : "rh-cursor-pointer",
@@ -1744,7 +1755,7 @@ var Select = forwardRef(function Select2(props, ref) {
                 {
                   className: [
                     "rh-flex-1 rh-truncate",
-                    displayText ? "rh-text-text" : "rh-text-text-muted"
+                    displayText ? "rh-text-text" : "rh-text-text-muted group-hover:rh-text-text"
                   ].join(" "),
                   children: displayText ?? placeholder
                 }
@@ -1825,13 +1836,13 @@ var Select = forwardRef(function Select2(props, ref) {
             })
           }
         ),
-        helperText && /* @__PURE__ */ jsxs(
+        helperText && !isHelperDismissed && /* @__PURE__ */ jsxs(
           "span",
           {
             id: helperId,
             className: [
               "rh-flex rh-items-center rh-gap-1 rh-text-xs",
-              helperStatusClasses2[status]
+              helperStatusClasses2[visualStatus]
             ].join(" "),
             children: [
               /* @__PURE__ */ jsx(WarningCircleIcon, {}),