@rehagro/ui 1.0.49 → 1.0.50

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,7 @@ var DateSelect = React9.forwardRef(
       if (!isControlled) setInternalValue(newValue);
       props.onChange?.(newValue);
     };
-    const displayText = React9__default.default.useMemo(() => {
+    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 +2125,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 +2135,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 +2146,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();
@@ -2632,11 +2660,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%",
@@ -4312,7 +4342,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,