@rehagro/ui 1.0.24 → 1.0.26

package/dist/index.mjs

@@ -1,5 +1,5 @@
 "use client";
-import React8, { forwardRef, createContext, useState, useRef, useCallback, useEffect, useMemo, useContext } from 'react';
+import React9, { forwardRef, createContext, useState, useRef, useCallback, useEffect, useMemo, useContext } from 'react';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
 // src/provider/RehagroProvider.tsx
@@ -740,12 +740,12 @@ var variantColorClasses = {
     info: "rh-bg-info rh-text-surface rh-border-info hover:rh-bg-info-hover hover:rh-border-info-hover"
   },
   outline: {
-    primary: "rh-bg-transparent rh-text-primary rh-border-primary hover:rh-bg-primary hover:rh-text-surface",
-    secondary: "rh-bg-transparent rh-text-secondary rh-border-secondary hover:rh-bg-secondary hover:rh-text-surface",
-    danger: "rh-bg-transparent rh-text-danger rh-border-danger hover:rh-bg-danger hover:rh-text-surface",
-    warning: "rh-bg-transparent rh-text-warning rh-border-warning hover:rh-bg-warning hover:rh-text-surface",
-    success: "rh-bg-transparent rh-text-success rh-border-success hover:rh-bg-success hover:rh-text-surface",
-    info: "rh-bg-transparent rh-text-info rh-border-info hover:rh-bg-info hover:rh-text-surface"
+    primary: "rh-bg-transparent rh-text-primary rh-border-primary hover:rh-bg-primary/[0.16]",
+    secondary: "rh-bg-transparent rh-text-secondary rh-border-secondary hover:rh-bg-secondary/[0.16]",
+    danger: "rh-bg-transparent rh-text-danger rh-border-danger hover:rh-bg-danger/[0.16]",
+    warning: "rh-bg-transparent rh-text-warning rh-border-warning hover:rh-bg-warning/[0.16]",
+    success: "rh-bg-transparent rh-text-success rh-border-success hover:rh-bg-success/[0.16]",
+    info: "rh-bg-transparent rh-text-info rh-border-info hover:rh-bg-info/[0.16]"
   },
   ghost: {
     primary: "rh-bg-transparent rh-text-primary rh-border-transparent hover:rh-bg-primary/10",
@@ -792,9 +792,9 @@ var Button = forwardRef(function Button2({
   children,
   ...rest
 }, ref) {
-  const isDisabled = React8.useMemo(() => disabled || loading, [disabled, loading]);
+  const isDisabled = React9.useMemo(() => disabled || loading, [disabled, loading]);
   const preset = isPresetColor(color);
-  const computedStyle = React8.useMemo(() => {
+  const computedStyle = React9.useMemo(() => {
     const baseStyle = preset ? hoverColor ? { [`--rh-${color}-hover`]: toRgbTriplet2(hoverColor) ?? hoverColor } : {} : getArbitraryColorStyle(variant, color);
     const hoverVars = hoverStyle ? {
       "--btn-hover-bg": hoverStyle.backgroundColor,
@@ -813,7 +813,7 @@ var Button = forwardRef(function Button2({
       style: computedStyle,
       className: [
         "rh-inline-flex rh-items-center rh-justify-center rh-gap-2",
-        "rh-border rh-font-display",
+        "rh-border rh-font-display rh-font-medium",
         "rh-transition-colors rh-duration-150",
         "focus-visible:rh-outline-none focus-visible:rh-ring-2 focus-visible:rh-ring-ring focus-visible:rh-ring-offset-2",
         preset && !hasCustomHover ? variantColorClasses[variant][color] : "",
@@ -933,7 +933,7 @@ var IconButton = forwardRef(function IconButton2({
 }, ref) {
   const isDisabled = disabled || loading;
   const preset = isPresetColor2(color);
-  const computedStyle = React8.useMemo(
+  const computedStyle = React9.useMemo(
     () => preset ? style ?? {} : { ...style, ...getArbitraryColorStyle2(variant, color) },
     [preset, color, variant, style]
   );
@@ -1040,7 +1040,7 @@ var TextInput = forwardRef(function TextInput2({
   id,
   ...rest
 }, ref) {
-  const inputId = id || React8.useId();
+  const inputId = id || React9.useId();
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -1181,10 +1181,10 @@ var Checkbox = forwardRef(function Checkbox2({
   onChange,
   ...rest
 }, ref) {
-  const innerRef = React8.useRef(null);
-  const inputId = id || React8.useId();
-  React8.useImperativeHandle(ref, () => innerRef.current);
-  React8.useEffect(() => {
+  const innerRef = React9.useRef(null);
+  const inputId = id || React9.useId();
+  React9.useImperativeHandle(ref, () => innerRef.current);
+  React9.useEffect(() => {
     if (innerRef.current) {
       innerRef.current.indeterminate = indeterminate;
     }
@@ -1239,6 +1239,177 @@ var Checkbox = forwardRef(function Checkbox2({
     }
   );
 });
+var RadioGroupContext = createContext(null);
+var useRadioGroup = () => useContext(RadioGroupContext);
+var labelSizeClasses2 = {
+  sm: "rh-text-sm",
+  md: "rh-text-sm",
+  lg: "rh-text-base"
+};
+var descriptionSizeClasses = {
+  sm: "rh-text-xs",
+  md: "rh-text-xs",
+  lg: "rh-text-sm"
+};
+var gapClasses = {
+  sm: "rh-gap-2",
+  md: "rh-gap-3",
+  lg: "rh-gap-4"
+};
+var PRESET_COLORS3 = /* @__PURE__ */ new Set([
+  "primary",
+  "secondary",
+  "danger",
+  "warning",
+  "success",
+  "info"
+]);
+var isPresetColor3 = (color) => PRESET_COLORS3.has(color);
+var inputSizeClasses = {
+  sm: "rh-w-4 rh-h-4",
+  md: "rh-w-5 rh-h-5",
+  lg: "rh-w-6 rh-h-6"
+};
+var Radio = forwardRef(function Radio2({
+  size = "md",
+  label,
+  description,
+  color = "primary",
+  disabled,
+  checked,
+  defaultChecked,
+  className = "",
+  id,
+  onChange,
+  ...rest
+}, ref) {
+  const inputId = id || React9.useId();
+  const getAccentColor = () => {
+    if (isPresetColor3(color)) {
+      return `rgb(var(--rh-${color}))`;
+    }
+    return color;
+  };
+  return /* @__PURE__ */ jsxs(
+    "label",
+    {
+      htmlFor: inputId,
+      className: [
+        "rh-inline-flex rh-items-start rh-gap-2 rh-font-body rh-select-none",
+        disabled ? "rh-cursor-not-allowed rh-opacity-50" : "rh-cursor-pointer",
+        className
+      ].filter(Boolean).join(" "),
+      children: [
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            ref,
+            id: inputId,
+            type: "radio",
+            disabled,
+            checked,
+            defaultChecked,
+            onChange,
+            className: [
+              inputSizeClasses[size],
+              "rh-accent-current rh-cursor-pointer",
+              disabled ? "rh-cursor-not-allowed" : ""
+            ].filter(Boolean).join(" "),
+            style: { accentColor: getAccentColor() },
+            ...rest
+          }
+        ),
+        (label || description) && /* @__PURE__ */ jsxs("span", { className: "rh-flex rh-flex-col", children: [
+          label && /* @__PURE__ */ jsx("span", { className: ["rh-text-text", labelSizeClasses2[size]].join(" "), children: label }),
+          description && /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: [
+                "rh-text-text-muted",
+                descriptionSizeClasses[size]
+              ].join(" "),
+              children: description
+            }
+          )
+        ] })
+      ]
+    }
+  );
+});
+var RadioOption = forwardRef(function RadioOption2({ value, size, color, disabled, ...rest }, ref) {
+  const group = useRadioGroup();
+  const mergedSize = size ?? group?.size ?? "md";
+  const mergedColor = color ?? group?.color ?? "primary";
+  const mergedDisabled = disabled ?? group?.disabled ?? false;
+  const isChecked = group?.value === value;
+  const handleChange = () => {
+    group?.onChange?.(value);
+  };
+  return /* @__PURE__ */ jsx(
+    Radio,
+    {
+      ref,
+      name: group?.name,
+      value,
+      size: mergedSize,
+      color: mergedColor,
+      disabled: mergedDisabled,
+      checked: isChecked,
+      onChange: handleChange,
+      ...rest
+    }
+  );
+});
+var RadioGroup = forwardRef(function RadioGroup2({
+  children,
+  value,
+  defaultValue,
+  onChange,
+  size = "md",
+  orientation = "vertical",
+  color = "primary",
+  disabled = false,
+  name,
+  gap = "md",
+  className = "",
+  ...rest
+}, ref) {
+  const [internalValue, setInternalValue] = React9.useState(defaultValue);
+  const groupName = name || React9.useId();
+  const currentValue = value ?? internalValue;
+  const handleChange = (newValue) => {
+    setInternalValue(newValue);
+    onChange?.(newValue);
+  };
+  return /* @__PURE__ */ jsx(
+    RadioGroupContext.Provider,
+    {
+      value: {
+        name: groupName,
+        value: currentValue,
+        onChange: handleChange,
+        size,
+        color,
+        disabled
+      },
+      children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          ref,
+          role: "radiogroup",
+          className: [
+            "rh-flex",
+            orientation === "vertical" ? "rh-flex-col" : "rh-flex-row rh-flex-wrap",
+            gapClasses[gap],
+            className
+          ].filter(Boolean).join(" "),
+          ...rest,
+          children
+        }
+      )
+    }
+  );
+});
 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"
@@ -1330,16 +1501,16 @@ var Select = forwardRef(function Select2(props, ref) {
     wrapperClassName = "",
     multiple = false
   } = props;
-  const triggerId = React8.useId();
-  const listboxId = React8.useId();
-  const helperId = React8.useId();
-  const [isOpen, setIsOpen] = React8.useState(false);
-  const [activeIndex, setActiveIndex] = React8.useState(-1);
-  const wrapperRef = React8.useRef(null);
-  const innerRef = React8.useRef(null);
-  const listboxRef = React8.useRef(null);
-  React8.useImperativeHandle(ref, () => innerRef.current);
-  const [internalValue, setInternalValue] = React8.useState(() => {
+  const triggerId = React9.useId();
+  const listboxId = React9.useId();
+  const helperId = React9.useId();
+  const [isOpen, setIsOpen] = React9.useState(false);
+  const [activeIndex, setActiveIndex] = React9.useState(-1);
+  const wrapperRef = React9.useRef(null);
+  const innerRef = React9.useRef(null);
+  const listboxRef = React9.useRef(null);
+  React9.useImperativeHandle(ref, () => innerRef.current);
+  const [internalValue, setInternalValue] = React9.useState(() => {
     if (props.defaultValue !== void 0) {
       return Array.isArray(props.defaultValue) ? props.defaultValue : [props.defaultValue];
     }
@@ -1361,7 +1532,7 @@ var Select = forwardRef(function Select2(props, ref) {
       innerRef.current?.focus();
     }
   };
-  const displayText = React8.useMemo(() => {
+  const displayText = React9.useMemo(() => {
     if (selectedValues.length === 0) return null;
     if (!multiple) {
       return options.find((o) => o.value === selectedValues[0])?.label ?? null;
@@ -1371,7 +1542,7 @@ var Select = forwardRef(function Select2(props, ref) {
     if (selectedLabels.length === 1) return selectedLabels[0];
     return `${selectedLabels.length} selected`;
   }, [selectedValues, options, multiple]);
-  React8.useEffect(() => {
+  React9.useEffect(() => {
     if (!isOpen) return;
     const handleClickOutside = (e) => {
       if (wrapperRef.current && !wrapperRef.current.contains(e.target)) {
@@ -1381,7 +1552,7 @@ var Select = forwardRef(function Select2(props, ref) {
     document.addEventListener("mousedown", handleClickOutside);
     return () => document.removeEventListener("mousedown", handleClickOutside);
   }, [isOpen]);
-  React8.useEffect(() => {
+  React9.useEffect(() => {
     if (!isOpen) return;
     const handleEscape = (e) => {
       if (e.key === "Escape") {
@@ -1392,7 +1563,7 @@ var Select = forwardRef(function Select2(props, ref) {
     document.addEventListener("keydown", handleEscape);
     return () => document.removeEventListener("keydown", handleEscape);
   }, [isOpen]);
-  React8.useEffect(() => {
+  React9.useEffect(() => {
     if (!isOpen || activeIndex < 0) return;
     const listbox = listboxRef.current;
     if (!listbox) return;
@@ -1401,7 +1572,7 @@ var Select = forwardRef(function Select2(props, ref) {
       activeEl.scrollIntoView({ block: "nearest" });
     }
   }, [activeIndex, isOpen]);
-  React8.useEffect(() => {
+  React9.useEffect(() => {
     if (isOpen) {
       const firstSelectedIdx = options.findIndex(
         (o) => !o.disabled && selectedValues.includes(o.value)
@@ -1720,8 +1891,8 @@ var Tooltip = forwardRef(
     useEffect(() => {
       return () => clearTimers();
     }, [clearTimers]);
-    const triggerChild = React8.Children.only(children);
-    const triggerElement = React8.cloneElement(triggerChild, {
+    const triggerChild = React9.Children.only(children);
+    const triggerElement = React9.cloneElement(triggerChild, {
       onMouseEnter: (e) => {
         handleEnter();
         triggerChild.props.onMouseEnter?.(e);
@@ -1917,7 +2088,7 @@ var Avatar = forwardRef(function Avatar2({ src, alt = "", initials, size = "md",
     }
   );
 });
-var PRESET_COLORS3 = /* @__PURE__ */ new Set([
+var PRESET_COLORS4 = /* @__PURE__ */ new Set([
   "primary",
   "secondary",
   "danger",
@@ -1925,7 +2096,7 @@ var PRESET_COLORS3 = /* @__PURE__ */ new Set([
   "success",
   "info"
 ]);
-var isPresetColor3 = (color) => PRESET_COLORS3.has(color);
+var isPresetColor4 = (color) => PRESET_COLORS4.has(color);
 var activePresetClasses = {
   primary: "rh-bg-primary rh-text-surface rh-border-primary",
   secondary: "rh-bg-secondary rh-text-surface rh-border-secondary",
@@ -1986,7 +2157,7 @@ var Tag = forwardRef(function Tag2({
   children,
   ...rest
 }, ref) {
-  const preset = isPresetColor3(color);
+  const preset = isPresetColor4(color);
   const clickable = !!rest.onClick && !disabled;
   const colorClasses3 = preset ? active ? activePresetClasses[color] : inactivePresetClasses[color] : "";
   const hoverClasses = clickable && preset ? active ? hoverActivePresetClasses[color] : hoverInactivePresetClasses[color] : clickable ? "hover:rh-brightness-95" : "";
@@ -2075,7 +2246,7 @@ var TagInput = forwardRef(function TagInput2({
   className = "",
   wrapperClassName = ""
 }, ref) {
-  const inputId = React8.useId();
+  const inputId = React9.useId();
   const [isOpen, setIsOpen] = useState(false);
   const containerRef = useRef(null);
   useEffect(() => {
@@ -2368,7 +2539,7 @@ var ProgressBar = forwardRef(function ProgressBar2({ value, label, size = "sm",
     }
   );
 });
-var PRESET_COLORS4 = /* @__PURE__ */ new Set([
+var PRESET_COLORS5 = /* @__PURE__ */ new Set([
   "primary",
   "secondary",
   "danger",
@@ -2376,7 +2547,7 @@ var PRESET_COLORS4 = /* @__PURE__ */ new Set([
   "success",
   "info"
 ]);
-var isPresetColor4 = (color) => PRESET_COLORS4.has(color);
+var isPresetColor5 = (color) => PRESET_COLORS5.has(color);
 var sizeClasses10 = {
   sm: { container: "rh-h-8", button: "rh-px-2 rh-text-xs" },
   md: { container: "rh-h-9", button: "rh-px-3 rh-text-sm" },
@@ -2406,7 +2577,7 @@ function ToggleGroupInner({
   className = "",
   ...rest
 }, ref) {
-  const preset = isPresetColor4(color);
+  const preset = isPresetColor5(color);
   return /* @__PURE__ */ jsx(
     "div",
     {
@@ -2536,7 +2707,7 @@ var CardFooter = forwardRef(function CardFooter2({ className = "", children, ...
     }
   );
 });
-var PRESET_COLORS5 = /* @__PURE__ */ new Set([
+var PRESET_COLORS6 = /* @__PURE__ */ new Set([
   "primary",
   "secondary",
   "danger",
@@ -2544,7 +2715,7 @@ var PRESET_COLORS5 = /* @__PURE__ */ new Set([
   "success",
   "info"
 ]);
-var isPresetColor5 = (color) => PRESET_COLORS5.has(color);
+var isPresetColor6 = (color) => PRESET_COLORS6.has(color);
 var sizeClasses11 = {
   xs: "rh-w-3 rh-h-3",
   sm: "rh-w-4 rh-h-4",
@@ -2561,7 +2732,7 @@ var colorClasses = {
   info: "rh-text-info"
 };
 var Spinner = forwardRef(function Spinner2({ size = "md", color = "primary", label = "Carregando...", className = "", style, ...rest }, ref) {
-  const preset = isPresetColor5(color);
+  const preset = isPresetColor6(color);
   const colorClass = preset ? colorClasses[color] : "";
   const customStyle = preset ? style : { ...style, color };
   return /* @__PURE__ */ jsxs(
@@ -2780,66 +2951,105 @@ var defaultElements = {
   h6: "h6",
   bodyLg: "p",
   body: "p",
+  bodySm: "p",
   label: "span",
   labelSm: "span",
+  labelLg: "span",
+  formLabel: "label",
+  formText: "span",
+  formHelper: "span",
+  sectionTitle: "h3",
+  modalTitle: "h2",
   caption: "span",
   captionSm: "span",
   menu: "span",
-  overline: "span"
+  overline: "span",
+  link: "span"
 };
 var variantClasses4 = {
   // Headings - Sora font
   h1: "rh-text-4xl rh-font-bold rh-leading-tight rh-font-display",
-  // 32px
+  // 36px Sora Bold
   h2: "rh-text-2xl rh-font-bold rh-leading-snug rh-font-display",
-  // 24px
+  // 24px Sora Bold
   h3: "rh-text-xl rh-font-semibold rh-leading-snug rh-font-display",
-  // 20px
+  // 20px Sora SemiBold
   h4: "rh-text-lg rh-font-semibold rh-leading-snug rh-font-display",
-  // 18px
+  // 18px Sora SemiBold
   h5: "rh-text-base rh-font-bold rh-leading-normal rh-font-display",
   // 16px Sora Bold
   h6: "rh-text-sm rh-font-bold rh-leading-normal rh-font-display",
   // 14px Sora Bold
   // Body - Inter font
   bodyLg: "rh-text-base rh-font-normal rh-leading-normal rh-font-body",
-  // 16px
+  // 16px Inter
   body: "rh-text-sm rh-font-normal rh-leading-normal rh-font-body",
-  // 14px
+  // 14px Inter
+  bodySm: "rh-text-xs rh-font-normal rh-leading-normal rh-font-body",
+  // 12px Inter
   // Labels - Inter font
   label: "rh-text-sm rh-font-medium rh-leading-normal rh-font-body",
-  // 14px Medium
-  labelSm: "rh-text-sm rh-font-semibold rh-leading-normal rh-font-body",
-  // 14px SemiBold
+  // 14px Inter Medium
+  labelSm: "rh-text-xs rh-font-medium rh-leading-normal rh-font-body",
+  // 12px Inter Medium
+  labelLg: "rh-text-base rh-font-medium rh-leading-normal rh-font-body",
+  // 16px Inter Medium
+  // Form specific - Inter font (mais usados no projeto)
+  formLabel: "rh-text-sm rh-font-semibold rh-leading-normal rh-font-body",
+  // 14px Inter SemiBold
+  formText: "rh-text-sm rh-font-normal rh-leading-normal rh-font-body",
+  // 14px Inter Normal
+  formHelper: "rh-text-xs rh-font-normal rh-leading-normal rh-font-body",
+  // 12px Inter Normal
+  // Section titles - Inter font
+  sectionTitle: "rh-text-base rh-font-semibold rh-leading-normal rh-font-body",
+  // 16px Inter SemiBold (Dados da empresa:)
+  modalTitle: "rh-text-base rh-font-bold rh-leading-normal rh-font-display",
+  // 16px Sora Bold (títulos de modal)
   // Captions - Inter font
   caption: "rh-text-xs rh-font-normal rh-leading-normal rh-font-body",
-  // 12px
+  // 12px Inter
   captionSm: "rh-text-2xs rh-font-normal rh-leading-tight rh-font-body",
-  // 10px
-  // Special - Sora/Inter font
+  // 10px Inter
+  // Special
   menu: "rh-text-xs rh-font-bold rh-leading-normal rh-font-display",
   // 12px Sora Bold
-  overline: "rh-text-2xs rh-font-semibold rh-leading-tight rh-font-body rh-tracking-wide"
-  // 10px Inter SemiBold
+  overline: "rh-text-2xs rh-font-semibold rh-leading-tight rh-font-body rh-tracking-wide rh-uppercase",
+  // 10px Inter SemiBold UPPERCASE
+  link: "rh-text-sm rh-font-medium rh-leading-normal rh-font-body rh-underline"
+  // 14px Inter Medium underline
 };
 var colorClasses2 = {
   default: "rh-text-text",
   muted: "rh-text-text-muted",
   primary: "rh-text-primary",
+  secondary: "rh-text-secondary",
   danger: "rh-text-danger",
   success: "rh-text-success",
-  warning: "rh-text-warning"
+  warning: "rh-text-warning",
+  info: "rh-text-info"
 };
-var Typography = forwardRef(function Typography2({ variant = "body", color = "default", bold = false, as, className = "", children, ...rest }, ref) {
+var Typography = forwardRef(function Typography2({
+  variant = "body",
+  color = "default",
+  bold = false,
+  semibold = false,
+  medium = false,
+  as,
+  className = "",
+  children,
+  ...rest
+}, ref) {
   const element = as ?? defaultElements[variant];
-  return React8.createElement(
+  const weightClass = bold ? "rh-font-bold" : semibold ? "rh-font-semibold" : medium ? "rh-font-medium" : "";
+  return React9.createElement(
     element,
     {
       ref,
       className: [
         variantClasses4[variant],
         colorClasses2[color],
-        bold ? "rh-font-bold" : "",
+        weightClass,
         className
       ].filter(Boolean).join(" "),
       ...rest
@@ -3169,6 +3379,6 @@ var GridItem = forwardRef(
   }
 );
 
-export { Avatar, Button, Card, CardContent, CardFooter, CardHeader, CaretLeftIcon, CaretRightIcon, Checkbox, CloseIcon, Container, DeleteIcon, EditIcon, ErrorIcon, GridContainer, GridItem, IconButton, InfoIcon, NeutralIcon, Pagination, PlusIcon, ProgressBar, RehagroProvider, SearchIcon, Select, Spinner, SuccessIcon, Table, Tag, TagInput, TextInput, Toast, ToastContainer, ToastProvider, ToggleGroup, Tooltip, Typography, WarningIcon, useToast };
+export { Avatar, Button, Card, CardContent, CardFooter, CardHeader, CaretLeftIcon, CaretRightIcon, Checkbox, CloseIcon, Container, DeleteIcon, EditIcon, ErrorIcon, GridContainer, GridItem, IconButton, InfoIcon, NeutralIcon, Pagination, PlusIcon, ProgressBar, Radio, RadioGroup, RadioOption, RehagroProvider, SearchIcon, Select, Spinner, SuccessIcon, Table, Tag, TagInput, TextInput, Toast, ToastContainer, ToastProvider, ToggleGroup, Tooltip, Typography, WarningIcon, useToast };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map