@rehagro/ui 1.0.1 → 1.0.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/dist/index.d.mts +44 -1
  2. package/dist/index.d.ts +44 -1
  3. package/dist/index.js +131 -12
  4. package/dist/index.js.map +1 -1
  5. package/dist/index.mjs +131 -13
  6. package/dist/index.mjs.map +1 -1
  7. package/dist/styles.css +2 -2
  8. package/package.json +2 -1
package/dist/index.d.mts CHANGED
@@ -85,7 +85,9 @@ type RehagroTheme = {
85
85
  danger?: string;
86
86
  dangerHover?: string;
87
87
  warning?: string;
88
+ warningHover?: string;
88
89
  success?: string;
90
+ successHover?: string;
89
91
  /** Semantic colors */
90
92
  text?: string;
91
93
  textMuted?: string;
@@ -125,6 +127,7 @@ declare function RehagroProvider({ theme, toastPosition, children }: RehagroProv
125
127
  type ButtonVariant = "solid" | "outline" | "ghost";
126
128
  type ButtonSize = "sm" | "md" | "lg";
127
129
  type ButtonRadius = "none" | "xxs" | "xs" | "sm" | "md" | "lg" | "xl" | "full";
130
+ type ButtonColor = "primary" | "secondary" | "danger" | "warning" | "success";
128
131
  type ButtonProps = React$1.ButtonHTMLAttributes<HTMLButtonElement> & {
129
132
  /** Visual style variant */
130
133
  variant?: ButtonVariant;
@@ -132,6 +135,10 @@ type ButtonProps = React$1.ButtonHTMLAttributes<HTMLButtonElement> & {
132
135
  size?: ButtonSize;
133
136
  /** Border radius */
134
137
  radius?: ButtonRadius;
138
+ /** Color scheme */
139
+ color?: ButtonColor;
140
+ /** Custom hover color — overrides the token for this button only. Accepts "#RRGGBB", "r g b", or "rgb(r,g,b)" */
141
+ hoverColor?: string;
135
142
  /** Shows loading state and disables interaction */
136
143
  loading?: boolean;
137
144
  /** Icon rendered to the left of children (hidden when loading) */
@@ -146,6 +153,10 @@ declare const Button: React$1.ForwardRefExoticComponent<React$1.ButtonHTMLAttrib
146
153
  size?: ButtonSize;
147
154
  /** Border radius */
148
155
  radius?: ButtonRadius;
156
+ /** Color scheme */
157
+ color?: ButtonColor;
158
+ /** Custom hover color — overrides the token for this button only. Accepts "#RRGGBB", "r g b", or "rgb(r,g,b)" */
159
+ hoverColor?: string;
149
160
  /** Shows loading state and disables interaction */
150
161
  loading?: boolean;
151
162
  /** Icon rendered to the left of children (hidden when loading) */
@@ -363,6 +374,38 @@ declare const Avatar: React$1.ForwardRefExoticComponent<Omit<React$1.HTMLAttribu
363
374
  variant?: AvatarVariant;
364
375
  } & React$1.RefAttributes<HTMLDivElement>>;
365
376
 
377
+ type PresetColor = "primary" | "secondary" | "danger" | "warning" | "success";
378
+
379
+ type TagSize = "sm" | "md" | "lg";
380
+ type TagProps = React$1.HTMLAttributes<HTMLSpanElement> & {
381
+ /** Tag color — preset name or custom CSS color (e.g., "#c3c3c3", "rgb(...)") */
382
+ color?: PresetColor | (string & {});
383
+ /** Tag size */
384
+ size?: TagSize;
385
+ /** Active (selected) state */
386
+ active?: boolean;
387
+ /** Tag label text */
388
+ title: string;
389
+ /** Optional icon rendered on the left side */
390
+ leftIcon?: React$1.ReactNode;
391
+ /** Optional icon rendered on the right side */
392
+ rightIcon?: React$1.ReactNode;
393
+ };
394
+ declare const Tag: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLSpanElement> & {
395
+ /** Tag color — preset name or custom CSS color (e.g., "#c3c3c3", "rgb(...)") */
396
+ color?: PresetColor | (string & {});
397
+ /** Tag size */
398
+ size?: TagSize;
399
+ /** Active (selected) state */
400
+ active?: boolean;
401
+ /** Tag label text */
402
+ title: string;
403
+ /** Optional icon rendered on the left side */
404
+ leftIcon?: React$1.ReactNode;
405
+ /** Optional icon rendered on the right side */
406
+ rightIcon?: React$1.ReactNode;
407
+ } & React$1.RefAttributes<HTMLSpanElement>>;
408
+
366
409
  type ContainerProps = React$1.HTMLAttributes<HTMLDivElement> & {
367
410
  /**
368
411
  * Remove o padding horizontal lateral.
@@ -464,4 +507,4 @@ declare const NeutralIcon: (props: IconProps) => react_jsx_runtime.JSX.Element;
464
507
 
465
508
  declare const CloseIcon: (props: IconProps) => react_jsx_runtime.JSX.Element;
466
509
 
467
- export { Avatar, type AvatarProps, type AvatarSize, type AvatarVariant, Button, type ButtonProps, type ButtonRadius, type ButtonSize, type ButtonVariant, 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, PlusIcon, RehagroProvider, type RehagroProviderProps, type RehagroTheme, SearchIcon, Select, type SelectMultipleProps, type SelectOption, type SelectProps, type SelectRadius, type SelectSingleProps, type SelectSize, type SelectStatus, SuccessIcon, 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, Tooltip, type TooltipPlacement, type TooltipProps, type TooltipSize, type TooltipVariant, WarningIcon, useToast };
510
+ export { Avatar, type AvatarProps, type AvatarSize, type AvatarVariant, Button, type ButtonColor, type ButtonProps, type ButtonRadius, type ButtonSize, type ButtonVariant, 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, PlusIcon, RehagroProvider, type RehagroProviderProps, type RehagroTheme, SearchIcon, Select, type SelectMultipleProps, type SelectOption, type SelectProps, type SelectRadius, type SelectSingleProps, type SelectSize, type SelectStatus, SuccessIcon, Tag, 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, Tooltip, type TooltipPlacement, type TooltipProps, type TooltipSize, type TooltipVariant, WarningIcon, useToast };
package/dist/index.d.ts CHANGED
@@ -85,7 +85,9 @@ type RehagroTheme = {
85
85
  danger?: string;
86
86
  dangerHover?: string;
87
87
  warning?: string;
88
+ warningHover?: string;
88
89
  success?: string;
90
+ successHover?: string;
89
91
  /** Semantic colors */
90
92
  text?: string;
91
93
  textMuted?: string;
@@ -125,6 +127,7 @@ declare function RehagroProvider({ theme, toastPosition, children }: RehagroProv
125
127
  type ButtonVariant = "solid" | "outline" | "ghost";
126
128
  type ButtonSize = "sm" | "md" | "lg";
127
129
  type ButtonRadius = "none" | "xxs" | "xs" | "sm" | "md" | "lg" | "xl" | "full";
130
+ type ButtonColor = "primary" | "secondary" | "danger" | "warning" | "success";
128
131
  type ButtonProps = React$1.ButtonHTMLAttributes<HTMLButtonElement> & {
129
132
  /** Visual style variant */
130
133
  variant?: ButtonVariant;
@@ -132,6 +135,10 @@ type ButtonProps = React$1.ButtonHTMLAttributes<HTMLButtonElement> & {
132
135
  size?: ButtonSize;
133
136
  /** Border radius */
134
137
  radius?: ButtonRadius;
138
+ /** Color scheme */
139
+ color?: ButtonColor;
140
+ /** Custom hover color — overrides the token for this button only. Accepts "#RRGGBB", "r g b", or "rgb(r,g,b)" */
141
+ hoverColor?: string;
135
142
  /** Shows loading state and disables interaction */
136
143
  loading?: boolean;
137
144
  /** Icon rendered to the left of children (hidden when loading) */
@@ -146,6 +153,10 @@ declare const Button: React$1.ForwardRefExoticComponent<React$1.ButtonHTMLAttrib
146
153
  size?: ButtonSize;
147
154
  /** Border radius */
148
155
  radius?: ButtonRadius;
156
+ /** Color scheme */
157
+ color?: ButtonColor;
158
+ /** Custom hover color — overrides the token for this button only. Accepts "#RRGGBB", "r g b", or "rgb(r,g,b)" */
159
+ hoverColor?: string;
149
160
  /** Shows loading state and disables interaction */
150
161
  loading?: boolean;
151
162
  /** Icon rendered to the left of children (hidden when loading) */
@@ -363,6 +374,38 @@ declare const Avatar: React$1.ForwardRefExoticComponent<Omit<React$1.HTMLAttribu
363
374
  variant?: AvatarVariant;
364
375
  } & React$1.RefAttributes<HTMLDivElement>>;
365
376
 
377
+ type PresetColor = "primary" | "secondary" | "danger" | "warning" | "success";
378
+
379
+ type TagSize = "sm" | "md" | "lg";
380
+ type TagProps = React$1.HTMLAttributes<HTMLSpanElement> & {
381
+ /** Tag color — preset name or custom CSS color (e.g., "#c3c3c3", "rgb(...)") */
382
+ color?: PresetColor | (string & {});
383
+ /** Tag size */
384
+ size?: TagSize;
385
+ /** Active (selected) state */
386
+ active?: boolean;
387
+ /** Tag label text */
388
+ title: string;
389
+ /** Optional icon rendered on the left side */
390
+ leftIcon?: React$1.ReactNode;
391
+ /** Optional icon rendered on the right side */
392
+ rightIcon?: React$1.ReactNode;
393
+ };
394
+ declare const Tag: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLSpanElement> & {
395
+ /** Tag color — preset name or custom CSS color (e.g., "#c3c3c3", "rgb(...)") */
396
+ color?: PresetColor | (string & {});
397
+ /** Tag size */
398
+ size?: TagSize;
399
+ /** Active (selected) state */
400
+ active?: boolean;
401
+ /** Tag label text */
402
+ title: string;
403
+ /** Optional icon rendered on the left side */
404
+ leftIcon?: React$1.ReactNode;
405
+ /** Optional icon rendered on the right side */
406
+ rightIcon?: React$1.ReactNode;
407
+ } & React$1.RefAttributes<HTMLSpanElement>>;
408
+
366
409
  type ContainerProps = React$1.HTMLAttributes<HTMLDivElement> & {
367
410
  /**
368
411
  * Remove o padding horizontal lateral.
@@ -464,4 +507,4 @@ declare const NeutralIcon: (props: IconProps) => react_jsx_runtime.JSX.Element;
464
507
 
465
508
  declare const CloseIcon: (props: IconProps) => react_jsx_runtime.JSX.Element;
466
509
 
467
- export { Avatar, type AvatarProps, type AvatarSize, type AvatarVariant, Button, type ButtonProps, type ButtonRadius, type ButtonSize, type ButtonVariant, 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, PlusIcon, RehagroProvider, type RehagroProviderProps, type RehagroTheme, SearchIcon, Select, type SelectMultipleProps, type SelectOption, type SelectProps, type SelectRadius, type SelectSingleProps, type SelectSize, type SelectStatus, SuccessIcon, 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, Tooltip, type TooltipPlacement, type TooltipProps, type TooltipSize, type TooltipVariant, WarningIcon, useToast };
510
+ export { Avatar, type AvatarProps, type AvatarSize, type AvatarVariant, Button, type ButtonColor, type ButtonProps, type ButtonRadius, type ButtonSize, type ButtonVariant, 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, PlusIcon, RehagroProvider, type RehagroProviderProps, type RehagroTheme, SearchIcon, Select, type SelectMultipleProps, type SelectOption, type SelectProps, type SelectRadius, type SelectSingleProps, type SelectSize, type SelectStatus, SuccessIcon, Tag, 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, Tooltip, type TooltipPlacement, type TooltipProps, type TooltipSize, type TooltipVariant, WarningIcon, useToast };
package/dist/index.js CHANGED
@@ -19,7 +19,9 @@ var TOKEN_MAP = {
19
19
  danger: { var: "--rh-danger", isColor: true },
20
20
  dangerHover: { var: "--rh-danger-hover", isColor: true },
21
21
  warning: { var: "--rh-warning", isColor: true },
22
+ warningHover: { var: "--rh-warning-hover", isColor: true },
22
23
  success: { var: "--rh-success", isColor: true },
24
+ successHover: { var: "--rh-success-hover", isColor: true },
23
25
  text: { var: "--rh-text", isColor: true },
24
26
  textMuted: { var: "--rh-text-muted", isColor: true },
25
27
  surface: { var: "--rh-surface", isColor: true },
@@ -619,10 +621,44 @@ function RehagroProvider({ theme, toastPosition, children }) {
619
621
  }, [theme]);
620
622
  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rh-root", style, children: /* @__PURE__ */ jsxRuntime.jsx(ToastProvider, { position: toastPosition, children }) });
621
623
  }
622
- var variantClasses = {
623
- solid: "rh-bg-primary rh-text-surface rh-border-primary hover:rh-bg-primary-hover hover:rh-border-primary-hover",
624
- outline: "rh-bg-transparent rh-text-primary rh-border-primary hover:rh-bg-primary hover:rh-text-surface",
625
- ghost: "rh-bg-transparent rh-text-primary rh-border-transparent hover:rh-bg-primary/10"
624
+ function toRgbTriplet2(value) {
625
+ if (value.startsWith("#")) {
626
+ const h = value.replace("#", "");
627
+ const full = h.length === 3 ? h.split("").map((c) => c + c).join("") : h;
628
+ const r = parseInt(full.slice(0, 2), 16);
629
+ const g = parseInt(full.slice(2, 4), 16);
630
+ const b = parseInt(full.slice(4, 6), 16);
631
+ if ([r, g, b].some(Number.isNaN)) return void 0;
632
+ return `${r} ${g} ${b}`;
633
+ }
634
+ const m = value.match(/rgb\s*\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)/i);
635
+ if (m) return `${m[1]} ${m[2]} ${m[3]}`;
636
+ const parts = value.trim().split(/\s+/);
637
+ if (parts.length === 3 && parts.every((p) => !Number.isNaN(Number(p)))) return value.trim();
638
+ return void 0;
639
+ }
640
+ var variantColorClasses = {
641
+ solid: {
642
+ primary: "rh-bg-primary rh-text-surface rh-border-primary hover:rh-bg-primary-hover hover:rh-border-primary-hover",
643
+ secondary: "rh-bg-secondary rh-text-surface rh-border-secondary hover:rh-bg-secondary-hover hover:rh-border-secondary-hover",
644
+ danger: "rh-bg-danger rh-text-surface rh-border-danger hover:rh-bg-danger-hover hover:rh-border-danger-hover",
645
+ warning: "rh-bg-warning rh-text-surface rh-border-warning hover:rh-bg-warning-hover hover:rh-border-warning-hover",
646
+ success: "rh-bg-success rh-text-surface rh-border-success hover:rh-bg-success-hover hover:rh-border-success-hover"
647
+ },
648
+ outline: {
649
+ primary: "rh-bg-transparent rh-text-primary rh-border-primary hover:rh-bg-primary hover:rh-text-surface",
650
+ secondary: "rh-bg-transparent rh-text-secondary rh-border-secondary hover:rh-bg-secondary hover:rh-text-surface",
651
+ danger: "rh-bg-transparent rh-text-danger rh-border-danger hover:rh-bg-danger hover:rh-text-surface",
652
+ warning: "rh-bg-transparent rh-text-warning rh-border-warning hover:rh-bg-warning hover:rh-text-surface",
653
+ success: "rh-bg-transparent rh-text-success rh-border-success hover:rh-bg-success hover:rh-text-surface"
654
+ },
655
+ ghost: {
656
+ primary: "rh-bg-transparent rh-text-primary rh-border-transparent hover:rh-bg-primary/10",
657
+ secondary: "rh-bg-transparent rh-text-secondary rh-border-transparent hover:rh-bg-secondary/10",
658
+ danger: "rh-bg-transparent rh-text-danger rh-border-transparent hover:rh-bg-danger/10",
659
+ warning: "rh-bg-transparent rh-text-warning rh-border-transparent hover:rh-bg-warning/10",
660
+ success: "rh-bg-transparent rh-text-success rh-border-transparent hover:rh-bg-success/10"
661
+ }
626
662
  };
627
663
  var sizeClasses = {
628
664
  sm: "rh-text-sm rh-px-3 rh-py-1.5",
@@ -643,27 +679,36 @@ var Button = React8.forwardRef(function Button2({
643
679
  variant = "solid",
644
680
  size = "md",
645
681
  radius = "sm",
682
+ color = "primary",
683
+ hoverColor,
646
684
  loading = false,
647
685
  disabled,
648
686
  leftIcon,
649
687
  rightIcon,
650
688
  className = "",
689
+ style,
651
690
  children,
652
691
  ...rest
653
692
  }, ref) {
654
693
  const isDisabled = React8__default.default.useMemo(() => disabled || loading, [disabled, loading]);
694
+ const hoverStyle = React8__default.default.useMemo(() => {
695
+ if (!hoverColor) return style;
696
+ const triplet = toRgbTriplet2(hoverColor);
697
+ return { ...style, [`--rh-${color}-hover`]: triplet ?? hoverColor };
698
+ }, [hoverColor, color, style]);
655
699
  return /* @__PURE__ */ jsxRuntime.jsxs(
656
700
  "button",
657
701
  {
658
702
  ref,
659
703
  disabled: isDisabled,
660
704
  "aria-busy": loading || void 0,
705
+ style: hoverStyle,
661
706
  className: [
662
707
  "rh-inline-flex rh-items-center rh-justify-center rh-gap-2",
663
708
  "rh-border rh-font-sans rh-font-medium",
664
709
  "rh-transition-colors rh-duration-150",
665
710
  "focus-visible:rh-outline-none focus-visible:rh-ring-2 focus-visible:rh-ring-ring focus-visible:rh-ring-offset-2",
666
- variantClasses[variant],
711
+ variantColorClasses[variant][color],
667
712
  sizeClasses[size],
668
713
  radiusClasses[radius],
669
714
  isDisabled ? "rh-opacity-50 rh-cursor-not-allowed rh-pointer-events-none" : "",
@@ -709,7 +754,7 @@ var Button = React8.forwardRef(function Button2({
709
754
  }
710
755
  );
711
756
  });
712
- var variantColorClasses = {
757
+ var variantColorClasses2 = {
713
758
  solid: {
714
759
  primary: "rh-bg-primary rh-text-surface rh-border-primary hover:rh-bg-primary-hover hover:rh-border-primary-hover",
715
760
  danger: "rh-bg-danger rh-text-surface rh-border-danger hover:rh-bg-danger-hover hover:rh-border-danger-hover",
@@ -770,7 +815,7 @@ var IconButton = React8.forwardRef(function IconButton2({
770
815
  "rh-border rh-font-sans",
771
816
  "rh-transition-colors rh-duration-150",
772
817
  "focus-visible:rh-outline-none focus-visible:rh-ring-2 focus-visible:rh-ring-ring focus-visible:rh-ring-offset-2",
773
- variantColorClasses[variant][color],
818
+ variantColorClasses2[variant][color],
774
819
  sizeClasses2[size],
775
820
  radiusClasses2[radius],
776
821
  isDisabled ? "rh-opacity-50 rh-cursor-not-allowed rh-pointer-events-none" : "",
@@ -1470,7 +1515,7 @@ var Select = React8.forwardRef(
1470
1515
  );
1471
1516
  }
1472
1517
  );
1473
- var variantClasses2 = {
1518
+ var variantClasses = {
1474
1519
  light: "rh-bg-surface rh-text-text rh-border rh-border-border rh-shadow-md",
1475
1520
  default: "rh-bg-primary/10 rh-text-text rh-border rh-border-primary/20 rh-shadow-md",
1476
1521
  dark: "rh-bg-primary rh-text-surface rh-shadow-md"
@@ -1610,7 +1655,7 @@ var Tooltip = React8.forwardRef(
1610
1655
  className: [
1611
1656
  "rh-absolute rh-z-50 rh-w-max rh-max-w-xs rh-rounded-xs",
1612
1657
  tooltipPlacementClasses[placement],
1613
- variantClasses2[variant],
1658
+ variantClasses[variant],
1614
1659
  sizeClasses6[size],
1615
1660
  className
1616
1661
  ].filter(Boolean).join(" "),
@@ -1697,7 +1742,7 @@ var imageSizeClasses = {
1697
1742
  lg: "rh-w-12 rh-h-12",
1698
1743
  xl: "rh-w-16 rh-h-16"
1699
1744
  };
1700
- var variantClasses3 = {
1745
+ var variantClasses2 = {
1701
1746
  circle: "rh-rounded-full",
1702
1747
  square: "rh-rounded-sm"
1703
1748
  };
@@ -1715,7 +1760,7 @@ var Avatar = React8.forwardRef(function Avatar2({ src, alt = "", initials, size
1715
1760
  "rh-inline-flex rh-items-center rh-justify-center rh-shrink-0 rh-overflow-hidden",
1716
1761
  "rh-bg-primary rh-text-surface rh-font-sans rh-font-medium rh-select-none",
1717
1762
  sizeClasses7[size],
1718
- variantClasses3[variant],
1763
+ variantClasses2[variant],
1719
1764
  className
1720
1765
  ].filter(Boolean).join(" "),
1721
1766
  ...rest,
@@ -1724,13 +1769,86 @@ var Avatar = React8.forwardRef(function Avatar2({ src, alt = "", initials, size
1724
1769
  {
1725
1770
  src,
1726
1771
  alt,
1727
- className: [imageSizeClasses[size], variantClasses3[variant], "rh-object-cover"].join(" "),
1772
+ className: [imageSizeClasses[size], variantClasses2[variant], "rh-object-cover"].join(" "),
1728
1773
  onError: () => setImgError(true)
1729
1774
  }
1730
1775
  ) : /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", children: fallbackLabel })
1731
1776
  }
1732
1777
  );
1733
1778
  });
1779
+ var PRESET_COLORS = /* @__PURE__ */ new Set(["primary", "secondary", "danger", "warning", "success"]);
1780
+ var isPresetColor = (color) => PRESET_COLORS.has(color);
1781
+ var activePresetClasses = {
1782
+ primary: "rh-bg-primary rh-text-surface rh-border-primary",
1783
+ secondary: "rh-bg-secondary rh-text-surface rh-border-secondary",
1784
+ danger: "rh-bg-danger rh-text-surface rh-border-danger",
1785
+ warning: "rh-bg-warning rh-text-surface rh-border-warning",
1786
+ success: "rh-bg-success rh-text-surface rh-border-success"
1787
+ };
1788
+ var inactivePresetClasses = {
1789
+ primary: "rh-bg-primary/10 rh-text-primary rh-border-primary/30",
1790
+ secondary: "rh-bg-secondary/10 rh-text-secondary rh-border-secondary/30",
1791
+ danger: "rh-bg-danger/10 rh-text-danger rh-border-danger/30",
1792
+ warning: "rh-bg-warning/10 rh-text-warning rh-border-warning/30",
1793
+ success: "rh-bg-success/10 rh-text-success rh-border-success/30"
1794
+ };
1795
+ var sizeClasses8 = {
1796
+ sm: "rh-text-xs rh-px-2 rh-py-0.5 rh-gap-1",
1797
+ md: "rh-text-sm rh-px-2.5 rh-py-1 rh-gap-1.5",
1798
+ lg: "rh-text-sm rh-px-3 rh-py-1.5 rh-gap-1.5"
1799
+ };
1800
+ function getCustomColorStyles(color, active) {
1801
+ if (active) {
1802
+ return { backgroundColor: color, borderColor: color, color: "#fff" };
1803
+ }
1804
+ return {
1805
+ backgroundColor: `color-mix(in srgb, ${color} 10%, transparent)`,
1806
+ borderColor: `color-mix(in srgb, ${color} 30%, transparent)`,
1807
+ color
1808
+ };
1809
+ }
1810
+ var Tag = React8.forwardRef(function Tag2({
1811
+ color = "primary",
1812
+ size = "md",
1813
+ active = false,
1814
+ title,
1815
+ leftIcon,
1816
+ rightIcon,
1817
+ className = "",
1818
+ style,
1819
+ children,
1820
+ ...rest
1821
+ }, ref) {
1822
+ const preset = isPresetColor(color);
1823
+ const colorClasses = preset ? active ? activePresetClasses[color] : inactivePresetClasses[color] : "";
1824
+ const customStyles = preset ? {} : getCustomColorStyles(color, active);
1825
+ return /* @__PURE__ */ jsxRuntime.jsxs(
1826
+ "span",
1827
+ {
1828
+ ref,
1829
+ role: rest.onClick ? "button" : void 0,
1830
+ tabIndex: rest.onClick ? 0 : void 0,
1831
+ "aria-pressed": rest.onClick ? active : void 0,
1832
+ className: [
1833
+ "rh-inline-flex rh-items-center rh-font-sans rh-font-medium rh-rounded-full",
1834
+ "rh-border rh-whitespace-nowrap rh-select-none",
1835
+ "rh-transition-colors rh-duration-150",
1836
+ rest.onClick ? "rh-cursor-pointer" : "",
1837
+ sizeClasses8[size],
1838
+ colorClasses,
1839
+ className
1840
+ ].filter(Boolean).join(" "),
1841
+ style: { ...customStyles, ...style },
1842
+ ...rest,
1843
+ children: [
1844
+ leftIcon,
1845
+ title,
1846
+ children,
1847
+ rightIcon
1848
+ ]
1849
+ }
1850
+ );
1851
+ });
1734
1852
  var Container = React8.forwardRef(
1735
1853
  function Container2({ fluid = false, className = "", children, ...rest }, ref) {
1736
1854
  return /* @__PURE__ */ jsxRuntime.jsx(
@@ -1918,6 +2036,7 @@ exports.RehagroProvider = RehagroProvider;
1918
2036
  exports.SearchIcon = SearchIcon;
1919
2037
  exports.Select = Select;
1920
2038
  exports.SuccessIcon = SuccessIcon;
2039
+ exports.Tag = Tag;
1921
2040
  exports.TextInput = TextInput;
1922
2041
  exports.Toast = Toast;
1923
2042
  exports.ToastContainer = ToastContainer;