@rehagro/ui 1.0.37 → 1.0.39

package/dist/index.d.mts

@@ -131,6 +131,8 @@ type RehagroTheme = {
     inputPxMd?: string;
     inputPxLg?: string;
     /** Button heights */
+    buttonHeightXxs?: string;
+    buttonHeightXs?: string;
     buttonHeightSm?: string;
     buttonHeightMd?: string;
     buttonHeightLg?: string;
@@ -150,7 +152,7 @@ type RehagroProviderProps = {
 declare function RehagroProvider({ theme, toastPosition, children }: RehagroProviderProps): react_jsx_runtime.JSX.Element;
 
 type ButtonVariant = "solid" | "outline" | "ghost";
-type ButtonSize = "sm" | "md" | "lg" | "xl";
+type ButtonSize = "xxs" | "xs" | "sm" | "md" | "lg" | "xl";
 type ButtonRadius = "none" | "xxs" | "xs" | "sm" | "md" | "lg" | "xl" | "full";
 type ButtonHoverStyle = {
     /** Background on hover */
@@ -204,7 +206,7 @@ declare const Button: React__default.ForwardRefExoticComponent<React__default.Bu
 } & React__default.RefAttributes<HTMLButtonElement>>;
 
 type IconButtonVariant = "solid" | "outline" | "ghost";
-type IconButtonSize = "sm" | "md" | "lg";
+type IconButtonSize = "xxs" | "xs" | "sm" | "md" | "lg";
 type IconButtonRadius = "none" | "xxs" | "xs" | "sm" | "md" | "lg" | "xl" | "full";
 type IconButtonColor = ButtonColor;
 type IconButtonProps = React__default.ButtonHTMLAttributes<HTMLButtonElement> & {

package/dist/index.d.ts

@@ -131,6 +131,8 @@ type RehagroTheme = {
     inputPxMd?: string;
     inputPxLg?: string;
     /** Button heights */
+    buttonHeightXxs?: string;
+    buttonHeightXs?: string;
     buttonHeightSm?: string;
     buttonHeightMd?: string;
     buttonHeightLg?: string;
@@ -150,7 +152,7 @@ type RehagroProviderProps = {
 declare function RehagroProvider({ theme, toastPosition, children }: RehagroProviderProps): react_jsx_runtime.JSX.Element;
 
 type ButtonVariant = "solid" | "outline" | "ghost";
-type ButtonSize = "sm" | "md" | "lg" | "xl";
+type ButtonSize = "xxs" | "xs" | "sm" | "md" | "lg" | "xl";
 type ButtonRadius = "none" | "xxs" | "xs" | "sm" | "md" | "lg" | "xl" | "full";
 type ButtonHoverStyle = {
     /** Background on hover */
@@ -204,7 +206,7 @@ declare const Button: React__default.ForwardRefExoticComponent<React__default.Bu
 } & React__default.RefAttributes<HTMLButtonElement>>;
 
 type IconButtonVariant = "solid" | "outline" | "ghost";
-type IconButtonSize = "sm" | "md" | "lg";
+type IconButtonSize = "xxs" | "xs" | "sm" | "md" | "lg";
 type IconButtonRadius = "none" | "xxs" | "xs" | "sm" | "md" | "lg" | "xl" | "full";
 type IconButtonColor = ButtonColor;
 type IconButtonProps = React__default.ButtonHTMLAttributes<HTMLButtonElement> & {

package/dist/index.js

@@ -54,6 +54,8 @@ var TOKEN_MAP = {
   inputPxSm: { var: "--rh-input-px-sm", isColor: false },
   inputPxMd: { var: "--rh-input-px-md", isColor: false },
   inputPxLg: { var: "--rh-input-px-lg", isColor: false },
+  buttonHeightXxs: { var: "--rh-button-height-xxs", isColor: false },
+  buttonHeightXs: { var: "--rh-button-height-xs", isColor: false },
   buttonHeightSm: { var: "--rh-button-height-sm", isColor: false },
   buttonHeightMd: { var: "--rh-button-height-md", isColor: false },
   buttonHeightLg: { var: "--rh-button-height-lg", isColor: false },
@@ -815,6 +817,8 @@ function getArbitraryColorStyle(variant, color) {
   return { color, borderColor: "transparent" };
 }
 var sizeClasses = {
+  xxs: "rh-text-2xs rh-leading-none rh-px-1.5 rh-h-button-xxs rh-gap-1",
+  xs: "rh-text-xs rh-leading-none rh-px-2 rh-h-button-xs rh-gap-1",
   sm: "rh-text-sm rh-px-3 rh-h-button-sm",
   md: "rh-text-sm rh-px-4 rh-h-button-md",
   lg: "rh-text-base rh-px-5 rh-h-button-lg",
@@ -964,6 +968,8 @@ function getArbitraryColorStyle2(variant, color) {
   return { color, borderColor: "transparent" };
 }
 var sizeClasses2 = {
+  xxs: "rh-h-4 rh-w-4 rh-text-2xs",
+  xs: "rh-h-6 rh-w-6 rh-text-xs",
   sm: "rh-h-8 rh-w-8 rh-text-sm",
   md: "rh-h-10 rh-w-10 rh-text-base",
   lg: "rh-h-12 rh-w-12 rh-text-lg"
@@ -1100,6 +1106,9 @@ var TextInput = React9.forwardRef(function TextInput2({
   ...rest
 }, ref) {
   const inputId = id || React9__default.default.useId();
+  const [isHelperDismissed, setIsHelperDismissed] = React9__default.default.useState(false);
+  const { onChange, ...inputProps } = rest;
+  const visualStatus = helperText && isHelperDismissed ? "default" : status;
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
@@ -1117,7 +1126,7 @@ var TextInput = React9.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 +1150,18 @@ var TextInput = React9.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",
                     disabled ? "rh-cursor-not-allowed" : ""
                   ].filter(Boolean).join(" "),
-                  ...rest
+                  onChange: (e) => {
+                    if (helperText) setIsHelperDismissed(true);
+                    onChange?.(e);
+                  },
+                  ...inputProps
                 }
               ),
               rightIcon && /* @__PURE__ */ jsxRuntime.jsx(
@@ -1165,13 +1178,13 @@ var TextInput = React9.forwardRef(function TextInput2({
             ]
           }
         ),
-        helperText && /* @__PURE__ */ jsxRuntime.jsxs(
+        helperText && !isHelperDismissed && /* @__PURE__ */ jsxRuntime.jsxs(
           "span",
           {
             id: `${inputId}-helper`,
             className: [
               "rh-flex rh-items-center rh-gap-1 rh-text-xs",
-              helperStatusClasses[status]
+              helperStatusClasses[visualStatus]
             ].join(" "),
             children: [
               /* @__PURE__ */ jsxRuntime.jsx(WarningCircleIcon, {}),
@@ -1559,6 +1572,8 @@ var Select = React9.forwardRef(function Select2(props, ref) {
   const helperId = React9__default.default.useId();
   const [isOpen, setIsOpen] = React9__default.default.useState(false);
   const [activeIndex, setActiveIndex] = React9__default.default.useState(-1);
+  const [isHelperDismissed, setIsHelperDismissed] = React9__default.default.useState(false);
+  React9__default.default.useRef({ query: "", lastAt: 0 });
   const wrapperRef = React9__default.default.useRef(null);
   const innerRef = React9__default.default.useRef(null);
   const listboxRef = React9__default.default.useRef(null);
@@ -1572,7 +1587,9 @@ var Select = React9.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,7 +1739,7 @@ var Select = React9.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),
@@ -1732,7 +1749,7 @@ var Select = React9.forwardRef(function Select2(props, ref) {
               "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",
@@ -1825,13 +1842,13 @@ var Select = React9.forwardRef(function Select2(props, ref) {
             })
           }
         ),
-        helperText && /* @__PURE__ */ jsxRuntime.jsxs(
+        helperText && !isHelperDismissed && /* @__PURE__ */ jsxRuntime.jsxs(
           "span",
           {
             id: helperId,
             className: [
               "rh-flex rh-items-center rh-gap-1 rh-text-xs",
-              helperStatusClasses2[status]
+              helperStatusClasses2[visualStatus]
             ].join(" "),
             children: [
               /* @__PURE__ */ jsxRuntime.jsx(WarningCircleIcon, {}),