@rehagro/ui 1.0.49 → 1.0.51

package/dist/index.d.mts

@@ -470,6 +470,8 @@ type SelectBaseProps = {
     radius?: SelectRadius;
     /** Helper/error message displayed below the select */
     helperText?: React__default.ReactNode;
+    /** Whether to use radio buttons instead of checkboxes */
+    radio?: boolean;
     /** Whether the select is disabled */
     disabled?: boolean;
     /** Custom class for the trigger container */
@@ -513,20 +515,35 @@ type DateSelectValue = {
 };
 type DateSelectProps = DateSelectBaseProps;
 type DateSelectBaseProps = {
+    /** Text displayed above the field */
     label?: string;
+    /** Secondary text next to the label; use "*" to render a red asterisk */
     subtitle?: string;
+    /** Text displayed when no date is selected */
     placeholder?: string;
+    /** Visual state of the field: "default" (default) or "error" */
     status?: SelectStatus;
+    /** Field size: "sm" | "md" | "lg" */
     size?: SelectSize;
+    /** Border radius of the field */
     radius?: SelectRadius;
+    /** Helper or error message displayed below the field */
     helperText?: React__default.ReactNode;
+    /** Disables the field, preventing any interaction */
     disabled?: boolean;
+    /** CSS class applied to the inner trigger element */
     className?: string;
+    /** CSS class applied to the outer wrapper element */
     wrapperClassName?: string;
+    /** Controlled value of the selected date */
     value?: DateSelectValue;
+    /** Uncontrolled initial value of the selected date */
     defaultValue?: DateSelectValue;
+    /** Callback fired when the selected date changes */
     onChange?: (value: DateSelectValue) => void;
+    /** Start year of the range shown in the picker */
     startYear?: number;
+    /** End year of the range shown in the picker */
     endYear?: number;
     /** Custom background color for the trigger button */
     backgroundColor?: string;

package/dist/index.d.ts

@@ -470,6 +470,8 @@ type SelectBaseProps = {
     radius?: SelectRadius;
     /** Helper/error message displayed below the select */
     helperText?: React__default.ReactNode;
+    /** Whether to use radio buttons instead of checkboxes */
+    radio?: boolean;
     /** Whether the select is disabled */
     disabled?: boolean;
     /** Custom class for the trigger container */
@@ -513,20 +515,35 @@ type DateSelectValue = {
 };
 type DateSelectProps = DateSelectBaseProps;
 type DateSelectBaseProps = {
+    /** Text displayed above the field */
     label?: string;
+    /** Secondary text next to the label; use "*" to render a red asterisk */
     subtitle?: string;
+    /** Text displayed when no date is selected */
     placeholder?: string;
+    /** Visual state of the field: "default" (default) or "error" */
     status?: SelectStatus;
+    /** Field size: "sm" | "md" | "lg" */
     size?: SelectSize;
+    /** Border radius of the field */
     radius?: SelectRadius;
+    /** Helper or error message displayed below the field */
     helperText?: React__default.ReactNode;
+    /** Disables the field, preventing any interaction */
     disabled?: boolean;
+    /** CSS class applied to the inner trigger element */
     className?: string;
+    /** CSS class applied to the outer wrapper element */
     wrapperClassName?: string;
+    /** Controlled value of the selected date */
     value?: DateSelectValue;
+    /** Uncontrolled initial value of the selected date */
     defaultValue?: DateSelectValue;
+    /** Callback fired when the selected date changes */
     onChange?: (value: DateSelectValue) => void;
+    /** Start year of the range shown in the picker */
     startYear?: number;
+    /** End year of the range shown in the picker */
     endYear?: number;
     /** Custom background color for the trigger button */
     backgroundColor?: string;

package/dist/index.js

@@ -1586,6 +1586,19 @@ var CheckIcon2 = ({ className }) => /* @__PURE__ */ jsxRuntime.jsx(
     )
   }
 );
+var RadioIcon = ({ isSelected }) => /* @__PURE__ */ jsxRuntime.jsx(
+  "span",
+  {
+    className: [
+      "rh-inline-flex rh-items-center rh-justify-center",
+      "rh-w-4 rh-h-4 rh-shrink-0",
+      "rh-border rh-rounded-full rh-transition-colors rh-duration-150",
+      isSelected ? "rh-border-primary" : "rh-border-border rh-bg-surface"
+    ].filter(Boolean).join(" "),
+    "aria-hidden": "true",
+    children: isSelected && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "rh-w-2.5 rh-h-2.5 rh-rounded-full rh-bg-primary" })
+  }
+);
 var Select = React9.forwardRef(function Select2(props, ref) {
   const {
     options,
@@ -1596,6 +1609,7 @@ var Select = React9.forwardRef(function Select2(props, ref) {
     size = "md",
     radius = "xs",
     helperText,
+    radio = false,
     disabled = false,
     className = "",
     wrapperClassName = "",
@@ -1859,7 +1873,7 @@ var Select = React9.forwardRef(function Select2(props, ref) {
                   ].filter(Boolean).join(" "),
                   children: [
                     /* @__PURE__ */ jsxRuntime.jsx("span", { className: "rh-flex-1 rh-truncate rh-text-text", children: option.label }),
-                    multiple ? /* @__PURE__ */ jsxRuntime.jsx(
+                    radio ? /* @__PURE__ */ jsxRuntime.jsx(RadioIcon, { isSelected }) : multiple ? /* @__PURE__ */ jsxRuntime.jsx(
                       "span",
                       {
                         className: [
@@ -2047,6 +2061,7 @@ var DateSelect = React9.forwardRef(
     const helperId = React9__default.default.useId();
     const [isOpen, setIsOpen] = React9.useState(false);
     const [isHelperDismissed, setIsHelperDismissed] = React9.useState(false);
+    const [dropdownAlign, setDropdownAlign] = React9.useState("left");
     const [internalValue, setInternalValue] = React9.useState(
       props.defaultValue ?? { mode: "day" }
     );
@@ -2063,8 +2078,9 @@ var DateSelect = React9.forwardRef(
     const [yearGridStart, setYearGridStart] = React9.useState(
       Math.floor((/* @__PURE__ */ new Date()).getFullYear() / 12) * 12
     );
-    const wrapperRef = React9__default.default.useRef(null);
-    const innerRef = React9__default.default.useRef(null);
+    const wrapperRef = React9.useRef(null);
+    const innerRef = React9.useRef(null);
+    const dropdownRef = React9.useRef(null);
     React9__default.default.useImperativeHandle(ref, () => innerRef.current);
     const currentYear = (/* @__PURE__ */ new Date()).getFullYear();
     const yearStart = startYear ?? currentYear - 10;
@@ -2098,7 +2114,22 @@ var DateSelect = React9.forwardRef(
       if (!isControlled) setInternalValue(newValue);
       props.onChange?.(newValue);
     };
-    const displayText = React9__default.default.useMemo(() => {
+    const handleMonthClear = () => {
+      const newValue = { mode: "month" };
+      if (!isControlled) setInternalValue(newValue);
+      props.onChange?.(newValue);
+    };
+    const handleDayClear = () => {
+      const newValue = { mode: "day" };
+      if (!isControlled) setInternalValue(newValue);
+      props.onChange?.(newValue);
+    };
+    const handleYearClear = () => {
+      const newValue = { mode: "year" };
+      if (!isControlled) setInternalValue(newValue);
+      props.onChange?.(newValue);
+    };
+    const displayText = React9.useMemo(() => {
       if (value.mode === "year" && value.year) return value.year.toString();
       if (value.mode === "month" && value.year != null)
         return `${MONTHS_SHORT[value.month || 0]} ${value.year}`;
@@ -2109,7 +2140,7 @@ var DateSelect = React9.forwardRef(
       }
       return null;
     }, [value]);
-    React9__default.default.useEffect(() => {
+    React9.useEffect(() => {
       if (!isOpen) return;
       const handleClickOutside = (e) => {
         if (wrapperRef.current && !wrapperRef.current.contains(e.target)) {
@@ -2119,7 +2150,7 @@ var DateSelect = React9.forwardRef(
       document.addEventListener("mousedown", handleClickOutside);
       return () => document.removeEventListener("mousedown", handleClickOutside);
     }, [isOpen]);
-    React9__default.default.useEffect(() => {
+    React9.useEffect(() => {
       if (!isOpen) return;
       const handleEscape = (e) => {
         if (e.key === "Escape") {
@@ -2130,6 +2161,18 @@ var DateSelect = React9.forwardRef(
       document.addEventListener("keydown", handleEscape);
       return () => document.removeEventListener("keydown", handleEscape);
     }, [isOpen]);
+    React9.useEffect(() => {
+      if (!isOpen || !innerRef.current || !dropdownRef.current) return;
+      const triggerRect = innerRef.current.getBoundingClientRect();
+      const dropdownWidth = activeMode === "interval" ? 720 : 385;
+      const spaceLeft = triggerRect.left;
+      const spaceRight = window.innerWidth - triggerRect.right;
+      if (spaceLeft < dropdownWidth && spaceRight >= dropdownWidth) {
+        setDropdownAlign("right");
+      } else {
+        setDropdownAlign("left");
+      }
+    }, [isOpen, activeMode]);
     const getDaysInMonth2 = (year, month) => new Date(year, month + 1, 0).getDate();
     const getFirstDayOfMonth2 = (year, month) => new Date(year, month, 1).getDay();
     const isSameDay = (a, b) => a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
@@ -2206,7 +2249,18 @@ var DateSelect = React9.forwardRef(
           },
           year
         );
-      }) })
+      }) }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rh-flex rh-items-center rh-justify-between rh-pt-3 rh-mt-3 rh-border-t rh-border-border/30", children: /* @__PURE__ */ jsxRuntime.jsxs(
+        "button",
+        {
+          onClick: handleYearClear,
+          className: "rh-flex rh-items-center rh-gap-1.5 rh-text-sm rh-text-text rh-font-medium rh-px-2 rh-py-1.5 rh-rounded-sm hover:rh-bg-background rh-transition-colors rh-duration-150",
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(EraserIcon, { className: "rh-w-4 rh-h-4" }),
+            "Limpar"
+          ]
+        }
+      ) })
     ] });
     const renderMonthGrid = () => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rh-p-1", children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rh-flex rh-items-center rh-justify-between", children: [
@@ -2254,7 +2308,18 @@ var DateSelect = React9.forwardRef(
           },
           month
         );
-      }) })
+      }) }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rh-flex rh-items-center rh-justify-between rh-pt-3 rh-mt-3 rh-border-t rh-border-border/30", children: /* @__PURE__ */ jsxRuntime.jsxs(
+        "button",
+        {
+          onClick: handleMonthClear,
+          className: "rh-flex rh-items-center rh-gap-1.5 rh-text-sm rh-text-text rh-font-medium rh-px-2 rh-py-1.5 rh-rounded-sm hover:rh-bg-background rh-transition-colors rh-duration-150",
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(EraserIcon, { className: "rh-w-4 rh-h-4" }),
+            "Limpar"
+          ]
+        }
+      ) })
     ] });
     const renderIntervalNav = () => /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rh-flex rh-gap-4 rh-p-1", children: [
@@ -2512,7 +2577,18 @@ var DateSelect = React9.forwardRef(
               },
               i
             )) }),
-            renderDayGrid(selectedYear, selectedMonth)
+            renderDayGrid(selectedYear, selectedMonth),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rh-flex rh-items-center rh-justify-between rh-pt-3 rh-mt-3 rh-border-t rh-border-border/30", children: /* @__PURE__ */ jsxRuntime.jsxs(
+              "button",
+              {
+                onClick: handleDayClear,
+                className: "rh-flex rh-items-center rh-gap-1.5 rh-text-sm rh-text-text rh-font-medium rh-px-2 rh-py-1.5 rh-rounded-sm hover:rh-bg-background rh-transition-colors rh-duration-150",
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(EraserIcon, { className: "rh-w-4 rh-h-4" }),
+                  "Limpar"
+                ]
+              }
+            ) })
           ] });
         case "month":
           return renderMonthGrid();
@@ -2632,11 +2708,13 @@ var DateSelect = React9.forwardRef(
           isOpen && /* @__PURE__ */ jsxRuntime.jsxs(
             "div",
             {
+              ref: dropdownRef,
               className: [
                 "rh-absolute rh-z-50 rh-mt-1 rh-p-5",
                 "rh-bg-surface rh-rounded-md",
                 dropdownRadiusClasses2[radius],
-                activeMode === "interval" ? "rh-w-[720px]" : "rh-w-[385px]"
+                activeMode === "interval" ? "rh-w-[720px]" : "rh-w-[385px]",
+                dropdownAlign === "left" ? "rh-right-0" : "rh-left-0"
               ].filter(Boolean).join(" "),
               style: {
                 top: "100%",
@@ -4271,7 +4349,7 @@ function TableInner({
               style: bodyStyleInline,
               className: [
                 "rh-border-b rh-border-border rh-transition-colors",
-                "hover:rh-bg-background",
+                "hover:rh-bg-background/50",
                 variant === "striped" && index % 2 === 1 ? "rh-bg-background/50" : ""
               ].filter(Boolean).join(" "),
               children: columns.map((column) => /* @__PURE__ */ jsxRuntime.jsx(
@@ -4293,7 +4371,7 @@ function TableInner({
                         onChange: (value) => column.onEditChange?.(row, index, value),
                         className: "rh-w-full rh-h-full"
                       }
-                    ) : /* @__PURE__ */ jsxRuntime.jsx("span", { children: column.render(row, index) }),
+                    ) : /* @__PURE__ */ jsxRuntime.jsx("span", { style: { width: "100%" }, children: column.render(row, index) }),
                     column.actionIcon && /* @__PURE__ */ jsxRuntime.jsx(
                       "span",
                       {
@@ -4312,7 +4390,7 @@ function TableInner({
             },
             rowKey(row, index)
           )),
-          addRowButton && !loading && /* @__PURE__ */ jsxRuntime.jsx("tr", { className: "rh-border-border hover:rh-bg-background/100 rh-rounde-lg", children: /* @__PURE__ */ jsxRuntime.jsx(
+          addRowButton && !loading && /* @__PURE__ */ jsxRuntime.jsx("tr", { className: "rh-border-border hover:rh-bg-background/50 rh-rounde-lg", children: /* @__PURE__ */ jsxRuntime.jsx(
             "td",
             {
               colSpan,