@redis-ui/components 47.0.0 → 47.0.1

package/dist/Badge/Badge.cjs

@@ -4,10 +4,11 @@ const require_BadgeIcon = require("./BadgeIcon.cjs");
 const require_Badge_style = require("./Badge.style.cjs");
 let react_jsx_runtime = require("react/jsx-runtime");
 //#region src/Badge/Badge.tsx
-var Badge = ({ label, variant = "default", color, withIcon, icon, ...restBadgeProps }) => {
+var Badge = (0, require("react").forwardRef)(({ label, variant = "default", color, withIcon, icon, ...restBadgeProps }, ref) => {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Badge_style.Badge, {
 		$variant: variant,
 		$color: color,
+		ref,
 		...restBadgeProps,
 		children: [withIcon && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_BadgeIcon.BadgeIcon, {
 			variant,
@@ -19,6 +20,6 @@ var Badge = ({ label, variant = "default", color, withIcon, icon, ...restBadgePr
 			children: label
 		})]
 	});
-};
+});
 //#endregion
 exports.default = Badge;

package/dist/Badge/Badge.d.ts

@@ -1,3 +1,3 @@
 import { BadgeProps } from './Badge.types';
-declare const Badge: ({ label, variant, color, withIcon, icon, ...restBadgeProps }: BadgeProps) => import("react/jsx-runtime").JSX.Element;
+declare const Badge: import("react").ForwardRefExoticComponent<BadgeProps & import("react").RefAttributes<HTMLDivElement>>;
 export default Badge;

package/dist/Badge/Badge.js

@@ -2,11 +2,13 @@ import Typography from "../Typography/Typography.js";
 import { BadgeIcon } from "./BadgeIcon.js";
 import { Badge as Badge$1 } from "./Badge.style.js";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
 //#region src/Badge/Badge.tsx
-var Badge = ({ label, variant = "default", color, withIcon, icon, ...restBadgeProps }) => {
+var Badge = forwardRef(({ label, variant = "default", color, withIcon, icon, ...restBadgeProps }, ref) => {
 	return /* @__PURE__ */ jsxs(Badge$1, {
 		$variant: variant,
 		$color: color,
+		ref,
 		...restBadgeProps,
 		children: [withIcon && /* @__PURE__ */ jsx(BadgeIcon, {
 			variant,
@@ -18,6 +20,6 @@ var Badge = ({ label, variant = "default", color, withIcon, icon, ...restBadgePr
 			children: label
 		})]
 	});
-};
+});
 //#endregion
 export { Badge as default };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@redis-ui/components",
   "license": "UNLICENSED",
-  "version": "47.0.0",
+  "version": "47.0.1",
   "type": "module",
   "sideEffects": false,
   "repository": "git@github.com:redislabsdev/redis-ui.git",

package/skills/redis-ui-components/references/Badge.md

@@ -8,6 +8,12 @@ Compact status badge with variant-based coloring and optional icons.
 import { Badge } from '@redis-ui/components';
 ```
 
+For tooltip examples:
+
+```tsx
+import { Badge, Tooltip } from '@redis-ui/components';
+```
+
 If you pass a custom icon in examples, import it from `@redis-ui/icons`.
 
 ## Props
@@ -41,6 +47,16 @@ import { Badge } from '@redis-ui/components';
 <Badge label="Badge" withIcon color="#0366d6" />
 ```
 
+### WithTooltip
+
+```tsx
+import { Badge, Tooltip } from '@redis-ui/components';
+
+<Tooltip content="hello world">
+  <Badge label="New" variant="informative" withIcon tabIndex={0} />
+</Tooltip>
+```
+
 ### Icons
 
 > `Badge` can be rendered with or without an icon using `withIcon`. Pass `icon` to customize the icon.
@@ -75,3 +91,5 @@ import { Badge, badgeVariants } from '@redis-ui/components';
 - `withIcon` uses the default icon for the selected variant when `icon` is not provided.
 - `variant` controls both the badge surface color and the default icon choice.
 - `color` overrides the badge accent color directly and is used instead of the theme variant color.
+- `Badge` forwards refs to its root `HTMLDivElement`, so it can be used directly as a trigger for components such as `Tooltip`.
+- When using `Badge` as a tooltip trigger, pass `tabIndex={0}` so keyboard users can focus the badge and open the tooltip.