@rehagro/ui 1.0.40 → 1.0.42

package/dist/index.d.mts

@@ -173,6 +173,8 @@ type ButtonProps = React__default.ButtonHTMLAttributes<HTMLButtonElement> & {
     radius?: ButtonRadius;
     /** Color scheme — preset name or any CSS color (e.g., "#c3c3c3", "red", "rgb(...)") */
     color?: ButtonColor;
+    /** Custom text/icon color for the base state. Use hoverStyle.color to customize hover text color. */
+    textColor?: string;
     /** Custom hover color — overrides the token for this button only. Only applies to preset colors. Accepts "#RRGGBB", "r g b", or "rgb(r,g,b)" */
     hoverColor?: string;
     /** Custom hover styles - allows full control over hover appearance */
@@ -193,6 +195,8 @@ declare const Button: React__default.ForwardRefExoticComponent<React__default.Bu
     radius?: ButtonRadius;
     /** Color scheme — preset name or any CSS color (e.g., "#c3c3c3", "red", "rgb(...)") */
     color?: ButtonColor;
+    /** Custom text/icon color for the base state. Use hoverStyle.color to customize hover text color. */
+    textColor?: string;
     /** Custom hover color — overrides the token for this button only. Only applies to preset colors. Accepts "#RRGGBB", "r g b", or "rgb(r,g,b)" */
     hoverColor?: string;
     /** Custom hover styles - allows full control over hover appearance */
@@ -578,14 +582,17 @@ type TagInputProps = {
 };
 declare const TagInput: React__default.ForwardRefExoticComponent<TagInputProps & React__default.RefAttributes<HTMLDivElement>>;
 
-type ProgressBarSize = "sm" | "lg";
+type ProgressBarVariant = "inline" | "stacked";
+type ProgressBarThickness = "xs" | "sm" | "md" | "lg" | "xl";
 type ProgressBarProps = {
     /** Progress value from 0 to 100 */
     value: number;
-    /** Label text (only shown in lg size) */
+    /** Label text (only shown in stacked variant) */
     label?: string;
-    /** Size variant */
-    size?: ProgressBarSize;
+    /** Layout variant */
+    variant?: ProgressBarVariant;
+    /** Bar thickness — preset token or custom value in px */
+    thickness?: ProgressBarThickness | number;
     /** Whether to show percentage text */
     showPercentage?: boolean;
     /** Custom bar color */
@@ -894,4 +901,4 @@ declare function CaretLeftIcon({ className, ...props }: IconProps): react_jsx_ru
 
 declare function CaretRightIcon({ className, ...props }: IconProps): react_jsx_runtime.JSX.Element;
 
-export { Avatar, type AvatarProps, type AvatarSize, type AvatarVariant, Button, ButtonColor, type ButtonProps, type ButtonRadius, type ButtonSize, type ButtonVariant, Card, CardContent, type CardContentProps, CardFooter, type CardFooterProps, CardHeader, type CardHeaderProps, type CardPadding, type CardProps, type CardRadius, type CardVariant, CaretLeftIcon, CaretRightIcon, Checkbox, type CheckboxProps, type CheckboxSize, CloseIcon, Container, type ContainerProps, DeleteIcon, EditIcon, ErrorIcon, GridContainer, type GridContainerProps, GridItem, type GridItemProps, type GridSpan, IconButton, type IconButtonColor, type IconButtonProps, type IconButtonRadius, type IconButtonSize, type IconButtonVariant, type IconProps, InfoIcon, type MobileSpan, NeutralIcon, Pagination, type PaginationProps, PlusIcon, ProgressBar, type ProgressBarProps, type ProgressBarSize, Radio, RadioGroup, type RadioGroupProps, RadioOption, type RadioOptionProps, type RadioOrientation, type RadioProps, type RadioSize, RehagroProvider, type RehagroProviderProps, type RehagroTheme, SearchIcon, Select, type SelectMultipleProps, type SelectOption, type SelectProps, type SelectRadius, type SelectSingleProps, type SelectSize, type SelectStatus, type SortDirection, Spinner, type SpinnerProps, type SpinnerSize, SuccessIcon, Table, type TableColumn, type TableProps, type TableSize, type TableSort, type TableVariant, Tag, TagInput, type TagInputOption, type TagInputProps, type TagInputRadius, type TagInputSize, type TagInputStatus, type TagProps, type TagSize, TextInput, type TextInputProps, type TextInputRadius, type TextInputSize, type TextInputStatus, Toast, type ToastAppearance, ToastContainer, type ToastFn, type ToastItem, type ToastLink, type ToastOptions, type ToastPosition, type ToastProps, ToastProvider, type ToastProviderProps, type ToastVariant, ToggleGroup, type ToggleGroupOption, type ToggleGroupProps, type ToggleGroupRadius, type ToggleGroupSize, Tooltip, type TooltipPlacement, type TooltipProps, type TooltipSize, type TooltipVariant, Typography, type TypographyColor, type TypographyProps, type TypographyVariant, WarningIcon, useToast };
+export { Avatar, type AvatarProps, type AvatarSize, type AvatarVariant, Button, ButtonColor, type ButtonProps, type ButtonRadius, type ButtonSize, type ButtonVariant, Card, CardContent, type CardContentProps, CardFooter, type CardFooterProps, CardHeader, type CardHeaderProps, type CardPadding, type CardProps, type CardRadius, type CardVariant, CaretLeftIcon, CaretRightIcon, Checkbox, type CheckboxProps, type CheckboxSize, CloseIcon, Container, type ContainerProps, DeleteIcon, EditIcon, ErrorIcon, GridContainer, type GridContainerProps, GridItem, type GridItemProps, type GridSpan, IconButton, type IconButtonColor, type IconButtonProps, type IconButtonRadius, type IconButtonSize, type IconButtonVariant, type IconProps, InfoIcon, type MobileSpan, NeutralIcon, Pagination, type PaginationProps, PlusIcon, ProgressBar, type ProgressBarProps, type ProgressBarThickness, type ProgressBarVariant, Radio, RadioGroup, type RadioGroupProps, RadioOption, type RadioOptionProps, type RadioOrientation, type RadioProps, type RadioSize, RehagroProvider, type RehagroProviderProps, type RehagroTheme, SearchIcon, Select, type SelectMultipleProps, type SelectOption, type SelectProps, type SelectRadius, type SelectSingleProps, type SelectSize, type SelectStatus, type SortDirection, Spinner, type SpinnerProps, type SpinnerSize, SuccessIcon, Table, type TableColumn, type TableProps, type TableSize, type TableSort, type TableVariant, Tag, TagInput, type TagInputOption, type TagInputProps, type TagInputRadius, type TagInputSize, type TagInputStatus, type TagProps, type TagSize, TextInput, type TextInputProps, type TextInputRadius, type TextInputSize, type TextInputStatus, Toast, type ToastAppearance, ToastContainer, type ToastFn, type ToastItem, type ToastLink, type ToastOptions, type ToastPosition, type ToastProps, ToastProvider, type ToastProviderProps, type ToastVariant, ToggleGroup, type ToggleGroupOption, type ToggleGroupProps, type ToggleGroupRadius, type ToggleGroupSize, Tooltip, type TooltipPlacement, type TooltipProps, type TooltipSize, type TooltipVariant, Typography, type TypographyColor, type TypographyProps, type TypographyVariant, WarningIcon, useToast };

package/dist/index.d.ts

@@ -173,6 +173,8 @@ type ButtonProps = React__default.ButtonHTMLAttributes<HTMLButtonElement> & {
     radius?: ButtonRadius;
     /** Color scheme — preset name or any CSS color (e.g., "#c3c3c3", "red", "rgb(...)") */
     color?: ButtonColor;
+    /** Custom text/icon color for the base state. Use hoverStyle.color to customize hover text color. */
+    textColor?: string;
     /** Custom hover color — overrides the token for this button only. Only applies to preset colors. Accepts "#RRGGBB", "r g b", or "rgb(r,g,b)" */
     hoverColor?: string;
     /** Custom hover styles - allows full control over hover appearance */
@@ -193,6 +195,8 @@ declare const Button: React__default.ForwardRefExoticComponent<React__default.Bu
     radius?: ButtonRadius;
     /** Color scheme — preset name or any CSS color (e.g., "#c3c3c3", "red", "rgb(...)") */
     color?: ButtonColor;
+    /** Custom text/icon color for the base state. Use hoverStyle.color to customize hover text color. */
+    textColor?: string;
     /** Custom hover color — overrides the token for this button only. Only applies to preset colors. Accepts "#RRGGBB", "r g b", or "rgb(r,g,b)" */
     hoverColor?: string;
     /** Custom hover styles - allows full control over hover appearance */
@@ -578,14 +582,17 @@ type TagInputProps = {
 };
 declare const TagInput: React__default.ForwardRefExoticComponent<TagInputProps & React__default.RefAttributes<HTMLDivElement>>;
 
-type ProgressBarSize = "sm" | "lg";
+type ProgressBarVariant = "inline" | "stacked";
+type ProgressBarThickness = "xs" | "sm" | "md" | "lg" | "xl";
 type ProgressBarProps = {
     /** Progress value from 0 to 100 */
     value: number;
-    /** Label text (only shown in lg size) */
+    /** Label text (only shown in stacked variant) */
     label?: string;
-    /** Size variant */
-    size?: ProgressBarSize;
+    /** Layout variant */
+    variant?: ProgressBarVariant;
+    /** Bar thickness — preset token or custom value in px */
+    thickness?: ProgressBarThickness | number;
     /** Whether to show percentage text */
     showPercentage?: boolean;
     /** Custom bar color */
@@ -894,4 +901,4 @@ declare function CaretLeftIcon({ className, ...props }: IconProps): react_jsx_ru
 
 declare function CaretRightIcon({ className, ...props }: IconProps): react_jsx_runtime.JSX.Element;
 
-export { Avatar, type AvatarProps, type AvatarSize, type AvatarVariant, Button, ButtonColor, type ButtonProps, type ButtonRadius, type ButtonSize, type ButtonVariant, Card, CardContent, type CardContentProps, CardFooter, type CardFooterProps, CardHeader, type CardHeaderProps, type CardPadding, type CardProps, type CardRadius, type CardVariant, CaretLeftIcon, CaretRightIcon, Checkbox, type CheckboxProps, type CheckboxSize, CloseIcon, Container, type ContainerProps, DeleteIcon, EditIcon, ErrorIcon, GridContainer, type GridContainerProps, GridItem, type GridItemProps, type GridSpan, IconButton, type IconButtonColor, type IconButtonProps, type IconButtonRadius, type IconButtonSize, type IconButtonVariant, type IconProps, InfoIcon, type MobileSpan, NeutralIcon, Pagination, type PaginationProps, PlusIcon, ProgressBar, type ProgressBarProps, type ProgressBarSize, Radio, RadioGroup, type RadioGroupProps, RadioOption, type RadioOptionProps, type RadioOrientation, type RadioProps, type RadioSize, RehagroProvider, type RehagroProviderProps, type RehagroTheme, SearchIcon, Select, type SelectMultipleProps, type SelectOption, type SelectProps, type SelectRadius, type SelectSingleProps, type SelectSize, type SelectStatus, type SortDirection, Spinner, type SpinnerProps, type SpinnerSize, SuccessIcon, Table, type TableColumn, type TableProps, type TableSize, type TableSort, type TableVariant, Tag, TagInput, type TagInputOption, type TagInputProps, type TagInputRadius, type TagInputSize, type TagInputStatus, type TagProps, type TagSize, TextInput, type TextInputProps, type TextInputRadius, type TextInputSize, type TextInputStatus, Toast, type ToastAppearance, ToastContainer, type ToastFn, type ToastItem, type ToastLink, type ToastOptions, type ToastPosition, type ToastProps, ToastProvider, type ToastProviderProps, type ToastVariant, ToggleGroup, type ToggleGroupOption, type ToggleGroupProps, type ToggleGroupRadius, type ToggleGroupSize, Tooltip, type TooltipPlacement, type TooltipProps, type TooltipSize, type TooltipVariant, Typography, type TypographyColor, type TypographyProps, type TypographyVariant, WarningIcon, useToast };
+export { Avatar, type AvatarProps, type AvatarSize, type AvatarVariant, Button, ButtonColor, type ButtonProps, type ButtonRadius, type ButtonSize, type ButtonVariant, Card, CardContent, type CardContentProps, CardFooter, type CardFooterProps, CardHeader, type CardHeaderProps, type CardPadding, type CardProps, type CardRadius, type CardVariant, CaretLeftIcon, CaretRightIcon, Checkbox, type CheckboxProps, type CheckboxSize, CloseIcon, Container, type ContainerProps, DeleteIcon, EditIcon, ErrorIcon, GridContainer, type GridContainerProps, GridItem, type GridItemProps, type GridSpan, IconButton, type IconButtonColor, type IconButtonProps, type IconButtonRadius, type IconButtonSize, type IconButtonVariant, type IconProps, InfoIcon, type MobileSpan, NeutralIcon, Pagination, type PaginationProps, PlusIcon, ProgressBar, type ProgressBarProps, type ProgressBarThickness, type ProgressBarVariant, Radio, RadioGroup, type RadioGroupProps, RadioOption, type RadioOptionProps, type RadioOrientation, type RadioProps, type RadioSize, RehagroProvider, type RehagroProviderProps, type RehagroTheme, SearchIcon, Select, type SelectMultipleProps, type SelectOption, type SelectProps, type SelectRadius, type SelectSingleProps, type SelectSize, type SelectStatus, type SortDirection, Spinner, type SpinnerProps, type SpinnerSize, SuccessIcon, Table, type TableColumn, type TableProps, type TableSize, type TableSort, type TableVariant, Tag, TagInput, type TagInputOption, type TagInputProps, type TagInputRadius, type TagInputSize, type TagInputStatus, type TagProps, type TagSize, TextInput, type TextInputProps, type TextInputRadius, type TextInputSize, type TextInputStatus, Toast, type ToastAppearance, ToastContainer, type ToastFn, type ToastItem, type ToastLink, type ToastOptions, type ToastPosition, type ToastProps, ToastProvider, type ToastProviderProps, type ToastVariant, ToggleGroup, type ToggleGroupOption, type ToggleGroupProps, type ToggleGroupRadius, type ToggleGroupSize, Tooltip, type TooltipPlacement, type TooltipProps, type TooltipSize, type TooltipVariant, Typography, type TypographyColor, type TypographyProps, type TypographyVariant, WarningIcon, useToast };

package/dist/index.js

@@ -839,6 +839,7 @@ var Button = React9.forwardRef(function Button2({
   size = "md",
   radius = "sm",
   color = "primary",
+  textColor,
   hoverColor,
   hoverStyle,
   loading = false,
@@ -859,8 +860,9 @@ var Button = React9.forwardRef(function Button2({
       "--btn-hover-border": hoverStyle.borderColor,
       "--btn-hover-color": hoverStyle.color
     } : {};
-    return { ...style, ...baseStyle, ...hoverVars };
-  }, [preset, color, variant, hoverColor, hoverStyle, style]);
+    const textStyle = textColor ? { color: textColor } : {};
+    return { ...style, ...baseStyle, ...textStyle, ...hoverVars };
+  }, [preset, color, variant, hoverColor, hoverStyle, style, textColor]);
   const hasCustomHover = Boolean(hoverStyle);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "button",
@@ -1089,6 +1091,7 @@ var labelWeightClasses = {
   semibold: "rh-font-semibold",
   bold: "rh-font-bold"
 };
+var getSubtitleClassName = (subtitle) => subtitle.trim() === "*" ? "rh-text-danger" : "rh-text-text-muted";
 var TextInput = React9.forwardRef(function TextInput2({
   label,
   labelWeight = "medium",
@@ -1105,7 +1108,8 @@ var TextInput = React9.forwardRef(function TextInput2({
   id,
   ...rest
 }, ref) {
-  const inputId = id || React9__default.default.useId();
+  const generatedId = React9__default.default.useId();
+  const inputId = id || generatedId;
   const [isHelperDismissed, setIsHelperDismissed] = React9__default.default.useState(false);
   const { onChange, ...inputProps } = rest;
   const visualStatus = helperText && isHelperDismissed ? "default" : status;
@@ -1116,7 +1120,7 @@ var TextInput = React9.forwardRef(function TextInput2({
       children: [
         label && /* @__PURE__ */ jsxRuntime.jsxs("label", { htmlFor: inputId, className: "rh-flex rh-items-baseline rh-gap-1", children: [
           /* @__PURE__ */ jsxRuntime.jsx("span", { className: `rh-text-sm ${labelWeightClasses[labelWeight]} rh-text-text`, children: label }),
-          subtitle && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "rh-text-sm rh-text-text-muted", children: subtitle })
+          subtitle && /* @__PURE__ */ jsxRuntime.jsx("span", { className: `rh-text-sm ${getSubtitleClassName(subtitle)}`, children: subtitle })
         ] }),
         /* @__PURE__ */ jsxRuntime.jsxs(
           "div",
@@ -1514,6 +1518,7 @@ var optionSizeClasses = {
   md: "rh-px-input-x-md rh-py-2 rh-text-sm",
   lg: "rh-px-input-x-lg rh-py-2.5 rh-text-base"
 };
+var getSubtitleClassName2 = (subtitle) => subtitle.trim() === "*" ? "rh-text-danger" : "rh-text-text-muted";
 var ChevronIcon = ({ className }) => /* @__PURE__ */ jsxRuntime.jsx(
   "svg",
   {
@@ -1725,7 +1730,7 @@ var Select = React9.forwardRef(function Select2(props, ref) {
       children: [
         label && /* @__PURE__ */ jsxRuntime.jsxs("label", { id: `${triggerId}-label`, className: "rh-flex rh-items-baseline rh-gap-1", children: [
           /* @__PURE__ */ jsxRuntime.jsx("span", { className: "rh-text-sm rh-font-medium rh-text-text", children: label }),
-          subtitle && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "rh-text-sm rh-text-text-muted", children: subtitle })
+          subtitle && /* @__PURE__ */ jsxRuntime.jsx("span", { className: `rh-text-sm ${getSubtitleClassName2(subtitle)}`, children: subtitle })
         ] }),
         /* @__PURE__ */ jsxRuntime.jsxs(
           "button",
@@ -2546,9 +2551,30 @@ var TagInput = React9.forwardRef(function TagInput2({
     }
   );
 });
-var ProgressBar = React9.forwardRef(function ProgressBar2({ value, label, size = "sm", showPercentage = true, barColor, bgColor, className = "" }, ref) {
+var THICKNESS_MAP = {
+  xs: 2,
+  sm: 4,
+  md: 8,
+  lg: 12,
+  xl: 16
+};
+function resolveThickness(thickness) {
+  if (typeof thickness === "number") return thickness;
+  return THICKNESS_MAP[thickness];
+}
+var ProgressBar = React9.forwardRef(function ProgressBar2({
+  value,
+  label,
+  variant = "inline",
+  thickness = "sm",
+  showPercentage = true,
+  barColor,
+  bgColor,
+  className = ""
+}, ref) {
   const clampedValue = Math.min(100, Math.max(0, value));
-  if (size === "lg") {
+  const heightPx = resolveThickness(thickness);
+  if (variant === "stacked") {
     return /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
@@ -2565,8 +2591,8 @@ var ProgressBar = React9.forwardRef(function ProgressBar2({ value, label, size =
           /* @__PURE__ */ jsxRuntime.jsx(
             "div",
             {
-              className: "rh-w-full rh-h-1 rh-rounded-[40px] rh-overflow-hidden",
-              style: { backgroundColor: bgColor || "#E5E7EB" },
+              className: "rh-w-full rh-rounded-[40px] rh-overflow-hidden",
+              style: { backgroundColor: bgColor || "#E5E7EB", height: heightPx },
               children: /* @__PURE__ */ jsxRuntime.jsx(
                 "div",
                 {
@@ -2592,8 +2618,8 @@ var ProgressBar = React9.forwardRef(function ProgressBar2({ value, label, size =
         /* @__PURE__ */ jsxRuntime.jsx(
           "div",
           {
-            className: "rh-flex-1 rh-h-1 rh-rounded-[40px] rh-overflow-hidden",
-            style: { backgroundColor: bgColor || "#E5E7EB" },
+            className: "rh-flex-1 rh-rounded-[40px] rh-overflow-hidden",
+            style: { backgroundColor: bgColor || "#E5E7EB", height: heightPx },
             children: /* @__PURE__ */ jsxRuntime.jsx(
               "div",
               {