@redis-ui/components 47.0.1 → 47.2.0

package/dist/SideBar/SideBar.cjs

@@ -12,12 +12,13 @@ const require_Button = require("./components/Button/Button.cjs");
 const require_Header = require("./components/Header/Header.cjs");
 const require_ScrollContainer = require("./components/ScrollContainer/ScrollContainer.cjs");
 const require_Footer = require("./components/Footer/Footer.cjs");
+const require_Group = require("./components/Group/Group.cjs");
 const require_SideBarThemeProvider = require("./SideBarThemeProvider.cjs");
 let _redislabsdev_redis_ui_styles = require("@redislabsdev/redis-ui-styles");
 let react_jsx_runtime = require("react/jsx-runtime");
 let react = require("react");
 //#region src/SideBar/SideBar.tsx
-var SideBar = Object.assign(({ isExpanded, ...rest }) => {
+var SideBar = Object.assign(({ isExpanded, expandedWidth, ...rest }) => {
 	const [transitionEnd, setTransitionEnd] = (0, react.useState)(true);
 	const prefersReducedMotion = (0, _redislabsdev_redis_ui_styles.usePrefersReducedMotion)();
 	const sidebarId = require_index.useId();
@@ -40,6 +41,7 @@ var SideBar = Object.assign(({ isExpanded, ...rest }) => {
 			"data-state": isExpanded ? "expanded" : "collapsed",
 			"data-transition": transitionEnd ? "inactive" : "active",
 			"data-role": "nav-bar",
+			$expandedWidth: expandedWidth,
 			...rest
 		}) })
 	}) });
@@ -52,7 +54,8 @@ var SideBar = Object.assign(({ isExpanded, ...rest }) => {
 	Item: require_Item.default,
 	Button: require_Button.default,
 	Header: require_Header.default,
-	Footer: require_Footer.default
+	Footer: require_Footer.default,
+	Group: require_Group.default
 });
 //#endregion
 exports.default = SideBar;

package/dist/SideBar/SideBar.d.ts

@@ -1,5 +1,5 @@
 import { SideBarProps } from './SideBar.types';
-declare const SideBar: (({ isExpanded, ...rest }: SideBarProps) => import("react/jsx-runtime").JSX.Element) & {
+declare const SideBar: (({ isExpanded, expandedWidth, ...rest }: SideBarProps) => import("react/jsx-runtime").JSX.Element) & {
     SideBarLogo: ({ logoIcon: LogoIcon, ...restProps }: import("./components/SideBarLogo/SideBarLogo.types").SideBarLogoProps) => import("react/jsx-runtime").JSX.Element;
     ItemsContainer: (props: import("./components/ItemsContainer/ItemsContainer.types").SideBarItemsContainerProps) => import("react/jsx-runtime").JSX.Element;
     ScrollContainer: (props: import("./components/ScrollContainer/ScrollContainer.types").SideBarScrollContainerProps) => import("react/jsx-runtime").JSX.Element;
@@ -9,6 +9,7 @@ declare const SideBar: (({ isExpanded, ...rest }: SideBarProps) => import("react
         Icon: ({ icon: ItemIcon, ...restProps }: import("./components/Item/components/Icon/Icon.types").SideBarItemIconProps) => import("react/jsx-runtime").JSX.Element;
         Text: (props: import("./components/Item/components/Text/Text.types").SideBarItemTextProps) => import("react/jsx-runtime").JSX.Element;
         Button: import("react").ForwardRefExoticComponent<import("..").ActionIconButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
+        Badge: import("react").ForwardRefExoticComponent<import("..").BadgeProps & import("react").RefAttributes<HTMLDivElement>>;
     };
     Button: ({ tooltipProps: { text: tooltipText, placement, ...tooltipProps }, buttonExpandedContent, buttonCollapsedIcon: ButtonCollapsedIcon, ...rest }: import("./components/Button/Button.types").SideBarButtonProps) => import("react/jsx-runtime").JSX.Element;
     Header: ({ children, onToggle, ...rest }: import("./components/Header/Header.types").SideBarHeaderProps) => import("react/jsx-runtime").JSX.Element;
@@ -17,5 +18,8 @@ declare const SideBar: (({ isExpanded, ...rest }: SideBarProps) => import("react
         Link: ({ children, ...rest }: import("./components/Footer/components/Link/Link.types").LinkProps) => import("react/jsx-runtime").JSX.Element;
         Text: (props: import("./components/Footer/components/Text/Text.types").TextProps) => import("react/jsx-runtime").JSX.Element;
     };
+    Group: ((props: import("./components/Group/Group.types").SideBarGroupProps) => import("react/jsx-runtime").JSX.Element) & {
+        Title: ({ children, ...rest }: import("./components/Group/components/Title/Title.types").SideBarGroupTitleProps) => import("react/jsx-runtime").JSX.Element;
+    };
 };
 export default SideBar;

package/dist/SideBar/SideBar.js

@@ -11,12 +11,13 @@ import Button from "./components/Button/Button.js";
 import Header from "./components/Header/Header.js";
 import ScrollContainer from "./components/ScrollContainer/ScrollContainer.js";
 import Footer from "./components/Footer/Footer.js";
+import Group from "./components/Group/Group.js";
 import { SideBarThemeProvider } from "./SideBarThemeProvider.js";
 import { usePrefersReducedMotion } from "@redislabsdev/redis-ui-styles";
 import { jsx } from "react/jsx-runtime";
 import { useState } from "react";
 //#region src/SideBar/SideBar.tsx
-var SideBar = Object.assign(({ isExpanded, ...rest }) => {
+var SideBar = Object.assign(({ isExpanded, expandedWidth, ...rest }) => {
 	const [transitionEnd, setTransitionEnd] = useState(true);
 	const prefersReducedMotion = usePrefersReducedMotion();
 	const sidebarId = useId();
@@ -39,6 +40,7 @@ var SideBar = Object.assign(({ isExpanded, ...rest }) => {
 			"data-state": isExpanded ? "expanded" : "collapsed",
 			"data-transition": transitionEnd ? "inactive" : "active",
 			"data-role": "nav-bar",
+			$expandedWidth: expandedWidth,
 			...rest
 		}) })
 	}) });
@@ -51,7 +53,8 @@ var SideBar = Object.assign(({ isExpanded, ...rest }) => {
 	Item,
 	Button,
 	Header,
-	Footer
+	Footer,
+	Group
 });
 //#endregion
 export { SideBar as default };

package/dist/SideBar/SideBar.style.cjs

@@ -11,20 +11,20 @@ var useRootStateStyle = (getStyle) => {
 	const { expanded, collapsed } = (0, _redislabsdev_redis_ui_styles.useTheme)().components.sideBar;
 	return styled_components.css`
     &[data-state='collapsed'] {
-      ${getStyle(collapsed)}
+      ${getStyle(collapsed, "collapsed")}
     }
     &[data-state='expanded'] {
-      ${getStyle(expanded)}
+      ${getStyle(expanded, "expanded")}
     }
   `;
 };
 var SideBarContainer = (0, styled_components.default)(require_FlexGroup.FlexGroup).withConfig({
 	displayName: "SideBarstyle__SideBarContainer",
 	componentId: "RedisUI__sc-suwica-0"
-})(["position:relative;height:100%;transition:width 0.6s;@media (prefers-reduced-motion:reduce){transition:none;}", ""], () => useRootStateStyle((theme) => styled_components.css`
+})(["position:relative;height:100%;transition:width 0.6s;@media (prefers-reduced-motion:reduce){transition:none;}", ""], ({ $expandedWidth }) => useRootStateStyle((theme, state) => styled_components.css`
         box-shadow: ${theme.shadow};
         background-color: ${theme.bgColor};
-        width: ${theme.width};
+        width: ${(state === "expanded" ? $expandedWidth : void 0) ?? theme.width};
         border-right: ${theme.borderRight};
       `));
 //#endregion

package/dist/SideBar/SideBar.style.d.ts

@@ -1,3 +1,3 @@
-import { ThemeProps } from 'styled-components/macro';
-import { Theme } from '@redislabsdev/redis-ui-styles';
-export declare const SideBarContainer: import("styled-components").StyledComponent<({ gap, direction, align, justify, wrap, ...restProps }: import("../Layouts").FlexGroupProps) => import("react/jsx-runtime").JSX.Element, any, ThemeProps<Theme>, never>;
+export declare const SideBarContainer: import("styled-components").StyledComponent<({ gap, direction, align, justify, wrap, ...restProps }: import("../Layouts").FlexGroupProps) => import("react/jsx-runtime").JSX.Element, any, {
+    $expandedWidth?: string;
+}, never>;

package/dist/SideBar/SideBar.style.js

@@ -9,20 +9,20 @@ var useRootStateStyle = (getStyle) => {
 	const { expanded, collapsed } = useTheme().components.sideBar;
 	return css`
     &[data-state='collapsed'] {
-      ${getStyle(collapsed)}
+      ${getStyle(collapsed, "collapsed")}
     }
     &[data-state='expanded'] {
-      ${getStyle(expanded)}
+      ${getStyle(expanded, "expanded")}
     }
   `;
 };
 var SideBarContainer = _styled(FlexGroup).withConfig({
 	displayName: "SideBarstyle__SideBarContainer",
 	componentId: "RedisUI__sc-suwica-0"
-})(["position:relative;height:100%;transition:width 0.6s;@media (prefers-reduced-motion:reduce){transition:none;}", ""], () => useRootStateStyle((theme) => css`
+})(["position:relative;height:100%;transition:width 0.6s;@media (prefers-reduced-motion:reduce){transition:none;}", ""], ({ $expandedWidth }) => useRootStateStyle((theme, state) => css`
         box-shadow: ${theme.shadow};
         background-color: ${theme.bgColor};
-        width: ${theme.width};
+        width: ${(state === "expanded" ? $expandedWidth : void 0) ?? theme.width};
         border-right: ${theme.borderRight};
       `));
 //#endregion

package/dist/SideBar/SideBar.types.d.ts

@@ -2,6 +2,7 @@ import { TooltipContentProps } from '../Tooltip/components/Content/Content.types
 import { FlexGroupProps } from '../Layouts';
 export interface SideBarProps extends Omit<FlexGroupProps, 'direction'> {
     isExpanded: boolean;
+    expandedWidth?: string;
 }
 export interface SideBarContextProps {
     isExpanded: boolean;

package/dist/SideBar/components/Group/Group.cjs

@@ -0,0 +1,7 @@
+require("../../../_virtual/_rolldown/runtime.cjs");
+const require_Title = require("./components/Title/Title.cjs");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/SideBar/components/Group/Group.tsx
+var Group = Object.assign((props) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { ...props }), { Title: require_Title.default });
+//#endregion
+exports.default = Group;

package/dist/SideBar/components/Group/Group.d.ts

@@ -0,0 +1,5 @@
+import { SideBarGroupProps } from './Group.types';
+declare const Group: ((props: SideBarGroupProps) => import("react/jsx-runtime").JSX.Element) & {
+    Title: ({ children, ...rest }: import("./components/Title/Title.types").SideBarGroupTitleProps) => import("react/jsx-runtime").JSX.Element;
+};
+export default Group;

package/dist/SideBar/components/Group/Group.js

@@ -0,0 +1,6 @@
+import Title from "./components/Title/Title.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/SideBar/components/Group/Group.tsx
+var Group = Object.assign((props) => /* @__PURE__ */ jsx("div", { ...props }), { Title });
+//#endregion
+export { Group as default };

package/dist/SideBar/components/Group/Group.types.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export type SideBarGroupProps = React.HTMLAttributes<HTMLDivElement>;

package/dist/SideBar/components/Group/Group.types.js

@@ -0,0 +1 @@
+export {};

package/dist/SideBar/components/Group/components/Title/Title.cjs

@@ -0,0 +1,20 @@
+require("../../../../../_virtual/_rolldown/runtime.cjs");
+const require_SideBar_context = require("../../../../SideBar.context.cjs");
+const require_Title_style = require("./Title.style.cjs");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/SideBar/components/Group/components/Title/Title.tsx
+var Title = ({ children, ...rest }) => {
+	const { isExpanded, transitionEnd } = require_SideBar_context.useSideBarContext();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Title_style.Container, {
+		...rest,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Title_style.Label, {
+			size: "M",
+			component: "span",
+			$isExpanded: isExpanded,
+			$transitionEnd: transitionEnd,
+			children
+		})
+	});
+};
+//#endregion
+exports.default = Title;

package/dist/SideBar/components/Group/components/Title/Title.d.ts

@@ -0,0 +1,3 @@
+import { SideBarGroupTitleProps } from './Title.types';
+declare const Title: ({ children, ...rest }: SideBarGroupTitleProps) => import("react/jsx-runtime").JSX.Element;
+export default Title;

package/dist/SideBar/components/Group/components/Title/Title.js

@@ -0,0 +1,19 @@
+import { useSideBarContext } from "../../../../SideBar.context.js";
+import { Container, Label } from "./Title.style.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/SideBar/components/Group/components/Title/Title.tsx
+var Title = ({ children, ...rest }) => {
+	const { isExpanded, transitionEnd } = useSideBarContext();
+	return /* @__PURE__ */ jsx(Container, {
+		...rest,
+		children: /* @__PURE__ */ jsx(Label, {
+			size: "M",
+			component: "span",
+			$isExpanded: isExpanded,
+			$transitionEnd: transitionEnd,
+			children
+		})
+	});
+};
+//#endregion
+export { Title as default };

package/dist/SideBar/components/Group/components/Title/Title.style.cjs

@@ -0,0 +1,25 @@
+const require_runtime = require("../../../../../_virtual/_rolldown/runtime.cjs");
+const require_Typography = require("../../../../../Typography/Typography.cjs");
+const require_SideBar_utils = require("../../../../SideBar.utils.cjs");
+let styled_components = require("styled-components");
+styled_components = require_runtime.__toESM(styled_components, 1);
+//#region src/SideBar/components/Group/components/Title/Title.style.ts
+var Container = styled_components.default.div.withConfig({
+	displayName: "Titlestyle__Container",
+	componentId: "RedisUI__sc-1qd2bt1-0"
+})(["display:block;overflow:hidden;", ""], () => require_SideBar_utils.useStateStyle((theme) => styled_components.css`
+        padding: ${theme.groupTitle.padding};
+      `));
+var Label = (0, styled_components.default)(require_Typography.default.Body).withConfig({
+	displayName: "Titlestyle__Label",
+	componentId: "RedisUI__sc-1qd2bt1-1"
+})([
+	"display:block;white-space:nowrap;transition:opacity 0.4s;@media (prefers-reduced-motion:reduce){transition:none;}opacity:",
+	";",
+	""
+], ({ $isExpanded, $transitionEnd }) => $isExpanded && $transitionEnd ? "1" : "0", () => require_SideBar_utils.useStateStyle((theme) => styled_components.css`
+        color: ${theme.groupTitle.textColor};
+      `));
+//#endregion
+exports.Container = Container;
+exports.Label = Label;

package/dist/SideBar/components/Group/components/Title/Title.style.d.ts

@@ -0,0 +1,5 @@
+export declare const Container: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const Label: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../../../../../Typography").TypographyBodyProps & import("react").RefAttributes<HTMLElement>>, any, {
+    $isExpanded: boolean;
+    $transitionEnd: boolean;
+}, never>;

package/dist/SideBar/components/Group/components/Title/Title.style.js

@@ -0,0 +1,22 @@
+import Typography from "../../../../../Typography/Typography.js";
+import { useStateStyle } from "../../../../SideBar.utils.js";
+import _styled, { css } from "styled-components";
+//#region src/SideBar/components/Group/components/Title/Title.style.ts
+var Container = _styled.div.withConfig({
+	displayName: "Titlestyle__Container",
+	componentId: "RedisUI__sc-1qd2bt1-0"
+})(["display:block;overflow:hidden;", ""], () => useStateStyle((theme) => css`
+        padding: ${theme.groupTitle.padding};
+      `));
+var Label = _styled(Typography.Body).withConfig({
+	displayName: "Titlestyle__Label",
+	componentId: "RedisUI__sc-1qd2bt1-1"
+})([
+	"display:block;white-space:nowrap;transition:opacity 0.4s;@media (prefers-reduced-motion:reduce){transition:none;}opacity:",
+	";",
+	""
+], ({ $isExpanded, $transitionEnd }) => $isExpanded && $transitionEnd ? "1" : "0", () => useStateStyle((theme) => css`
+        color: ${theme.groupTitle.textColor};
+      `));
+//#endregion
+export { Container, Label };

package/dist/SideBar/components/Group/components/Title/Title.types.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+export interface SideBarGroupTitleProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> {
+    children: React.ReactNode;
+}

package/dist/SideBar/components/Group/components/Title/Title.types.js

@@ -0,0 +1 @@
+export {};

package/dist/SideBar/components/Item/Item.cjs

@@ -4,6 +4,7 @@ const require_SideBar_context = require("../../SideBar.context.cjs");
 const require_Icon = require("./components/Icon/Icon.cjs");
 const require_Text = require("./components/Text/Text.cjs");
 const require_Button = require("./components/Button/Button.cjs");
+const require_Badge = require("./components/Badge/Badge.cjs");
 const require_Item_style = require("./Item.style.cjs");
 let react_jsx_runtime = require("react/jsx-runtime");
 let react = require("react");
@@ -39,7 +40,8 @@ var Item = Object.assign(({ tooltipProps, isActive = false, onKeyDown, ...restPr
 }, {
 	Icon: require_Icon.default,
 	Text: require_Text.default,
-	Button: require_Button.default
+	Button: require_Button.default,
+	Badge: require_Badge.default
 });
 //#endregion
 exports.default = Item;

package/dist/SideBar/components/Item/Item.d.ts

@@ -3,5 +3,6 @@ declare const Item: (({ tooltipProps, isActive, onKeyDown, ...restProps }: SideB
     Icon: ({ icon: ItemIcon, ...restProps }: import("./components/Icon/Icon.types").SideBarItemIconProps) => import("react/jsx-runtime").JSX.Element;
     Text: (props: import("./components/Text/Text.types").SideBarItemTextProps) => import("react/jsx-runtime").JSX.Element;
     Button: import("react").ForwardRefExoticComponent<import("../../..").ActionIconButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
+    Badge: import("react").ForwardRefExoticComponent<import("../../..").BadgeProps & import("react").RefAttributes<HTMLDivElement>>;
 };
 export default Item;

package/dist/SideBar/components/Item/Item.js

@@ -3,6 +3,7 @@ import { useSideBarContext } from "../../SideBar.context.js";
 import Icon from "./components/Icon/Icon.js";
 import Text from "./components/Text/Text.js";
 import Button from "./components/Button/Button.js";
+import Badge from "./components/Badge/Badge.js";
 import { SideBarItem, TooltipContent } from "./Item.style.js";
 import { jsx } from "react/jsx-runtime";
 import { useRef } from "react";
@@ -38,7 +39,8 @@ var Item = Object.assign(({ tooltipProps, isActive = false, onKeyDown, ...restPr
 }, {
 	Icon,
 	Text,
-	Button
+	Button,
+	Badge
 });
 //#endregion
 export { Item as default };

package/dist/SideBar/components/Item/Item.style.cjs

@@ -17,13 +17,15 @@ var SideBarItem = styled_components.default.li.withConfig({
 	";}",
 	";& > svg{transition:inherit;}"
 ], () => (0, _redislabsdev_redis_ui_styles.useTheme)().core.focus.size, () => (0, _redislabsdev_redis_ui_styles.useTheme)().core.focus.color, () => (0, _redislabsdev_redis_ui_styles.useTheme)().core.focus.size, () => {
-	return require_SideBar_utils.useStateStyle(({ item: theme }) => {
+	return require_SideBar_utils.useStateStyle(({ item: theme }, state) => {
 		const { states } = theme;
 		return styled_components.css`
         margin: ${theme.margin};
-        :has(> button) {
-          margin-inline-end: ${theme.itemWithButtonOffset};
-        }
+        ${state === "expanded" && styled_components.css`
+          :has(> button) {
+            margin-inline-end: ${theme.itemWithButtonOffset};
+          }
+        `}
         height: ${theme.height};
         padding: ${theme.padding};
         border-radius: ${theme.borderRadius};
@@ -51,6 +53,17 @@ var SideBarItem = styled_components.default.li.withConfig({
 			fallbackTokens: states.normal
 		})}
         }
+
+        &[data-state='active']::before {
+          content: '';
+          position: absolute;
+          left: ${theme.activeIndicator.left};
+          top: ${theme.activeIndicator.top};
+          bottom: ${theme.activeIndicator.bottom};
+          width: ${theme.activeIndicator.width};
+          background-color: ${theme.activeIndicator.bgColor};
+          border-radius: ${theme.activeIndicator.borderRadius};
+        }
       `;
 	});
 });

package/dist/SideBar/components/Item/Item.style.js

@@ -15,13 +15,15 @@ var SideBarItem = _styled.li.withConfig({
 	";}",
 	";& > svg{transition:inherit;}"
 ], () => useTheme().core.focus.size, () => useTheme().core.focus.color, () => useTheme().core.focus.size, () => {
-	return useStateStyle(({ item: theme }) => {
+	return useStateStyle(({ item: theme }, state) => {
 		const { states } = theme;
 		return css`
         margin: ${theme.margin};
-        :has(> button) {
-          margin-inline-end: ${theme.itemWithButtonOffset};
-        }
+        ${state === "expanded" && css`
+          :has(> button) {
+            margin-inline-end: ${theme.itemWithButtonOffset};
+          }
+        `}
         height: ${theme.height};
         padding: ${theme.padding};
         border-radius: ${theme.borderRadius};
@@ -49,6 +51,17 @@ var SideBarItem = _styled.li.withConfig({
 			fallbackTokens: states.normal
 		})}
         }
+
+        &[data-state='active']::before {
+          content: '';
+          position: absolute;
+          left: ${theme.activeIndicator.left};
+          top: ${theme.activeIndicator.top};
+          bottom: ${theme.activeIndicator.bottom};
+          width: ${theme.activeIndicator.width};
+          background-color: ${theme.activeIndicator.bgColor};
+          border-radius: ${theme.activeIndicator.borderRadius};
+        }
       `;
 	});
 });

package/dist/SideBar/components/Item/components/Badge/Badge.cjs

@@ -0,0 +1,18 @@
+const require_runtime = require("../../../../../_virtual/_rolldown/runtime.cjs");
+const require_SideBar_context = require("../../../../SideBar.context.cjs");
+const require_Badge_style = require("./Badge.style.cjs");
+let react_jsx_runtime = require("react/jsx-runtime");
+let react = require("react");
+react = require_runtime.__toESM(react, 1);
+//#region src/SideBar/components/Item/components/Badge/Badge.tsx
+var Badge = react.default.forwardRef((props, ref) => {
+	const { isExpanded, transitionEnd } = require_SideBar_context.useSideBarContext();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Badge_style.Badge, {
+		ref,
+		$isExpanded: isExpanded,
+		$transitionEnd: transitionEnd,
+		...props
+	});
+});
+//#endregion
+exports.default = Badge;

package/dist/SideBar/components/Item/components/Badge/Badge.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { BadgeProps } from '../../../../../Badge/Badge.types';
+declare const Badge: React.ForwardRefExoticComponent<BadgeProps & React.RefAttributes<HTMLDivElement>>;
+export default Badge;

package/dist/SideBar/components/Item/components/Badge/Badge.js

@@ -0,0 +1,16 @@
+import { useSideBarContext } from "../../../../SideBar.context.js";
+import { Badge as Badge$1 } from "./Badge.style.js";
+import { jsx } from "react/jsx-runtime";
+import React from "react";
+//#region src/SideBar/components/Item/components/Badge/Badge.tsx
+var Badge = React.forwardRef((props, ref) => {
+	const { isExpanded, transitionEnd } = useSideBarContext();
+	return /* @__PURE__ */ jsx(Badge$1, {
+		ref,
+		$isExpanded: isExpanded,
+		$transitionEnd: transitionEnd,
+		...props
+	});
+});
+//#endregion
+export { Badge as default };

package/dist/SideBar/components/Item/components/Badge/Badge.style.cjs

@@ -0,0 +1,11 @@
+const require_runtime = require("../../../../../_virtual/_rolldown/runtime.cjs");
+const require_Badge = require("../../../../../Badge/Badge.cjs");
+let styled_components = require("styled-components");
+styled_components = require_runtime.__toESM(styled_components, 1);
+//#region src/SideBar/components/Item/components/Badge/Badge.style.ts
+var Badge = (0, styled_components.default)(require_Badge.default).withConfig({
+	displayName: "Badgestyle__Badge",
+	componentId: "RedisUI__sc-am1mdr-0"
+})(["margin-inline-start:auto;transition:opacity 0.4s;@media (prefers-reduced-motion:reduce){transition:none;}opacity:", ";"], ({ $isExpanded, $transitionEnd }) => $isExpanded && $transitionEnd ? "1" : "0");
+//#endregion
+exports.Badge = Badge;

package/dist/SideBar/components/Item/components/Badge/Badge.style.d.ts

@@ -0,0 +1,4 @@
+export declare const Badge: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../../../../..").BadgeProps & import("react").RefAttributes<HTMLDivElement>>, any, {
+    $isExpanded: boolean;
+    $transitionEnd: boolean;
+}, never>;

package/dist/SideBar/components/Item/components/Badge/Badge.style.js

@@ -0,0 +1,9 @@
+import Badge$1 from "../../../../../Badge/Badge.js";
+import _styled from "styled-components";
+//#region src/SideBar/components/Item/components/Badge/Badge.style.ts
+var Badge = _styled(Badge$1).withConfig({
+	displayName: "Badgestyle__Badge",
+	componentId: "RedisUI__sc-am1mdr-0"
+})(["margin-inline-start:auto;transition:opacity 0.4s;@media (prefers-reduced-motion:reduce){transition:none;}opacity:", ";"], ({ $isExpanded, $transitionEnd }) => $isExpanded && $transitionEnd ? "1" : "0");
+//#endregion
+export { Badge };

package/dist/SideBar/components/Item/components/Button/Button.cjs

@@ -6,12 +6,19 @@ let react = require("react");
 react = require_runtime.__toESM(react, 1);
 //#region src/SideBar/components/Item/components/Button/Button.tsx
 var Button = react.default.forwardRef(({ size = "M", ...props }, ref) => {
-	const { isExpanded } = require_SideBar_context.useSideBarContext();
-	return isExpanded ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Button_style.SideBarItemButton, {
+	const { isExpanded, transitionEnd } = require_SideBar_context.useSideBarContext();
+	const isHidden = !isExpanded || !transitionEnd;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Button_style.SideBarItemButton, {
 		size,
 		ref,
-		...props
-	}) : null;
+		$isExpanded: isExpanded,
+		$transitionEnd: transitionEnd,
+		...props,
+		...isHidden && {
+			tabIndex: -1,
+			"aria-hidden": true
+		}
+	});
 });
 //#endregion
 exports.default = Button;

package/dist/SideBar/components/Item/components/Button/Button.js

@@ -4,12 +4,19 @@ import { jsx } from "react/jsx-runtime";
 import React from "react";
 //#region src/SideBar/components/Item/components/Button/Button.tsx
 var Button = React.forwardRef(({ size = "M", ...props }, ref) => {
-	const { isExpanded } = useSideBarContext();
-	return isExpanded ? /* @__PURE__ */ jsx(SideBarItemButton, {
+	const { isExpanded, transitionEnd } = useSideBarContext();
+	const isHidden = !isExpanded || !transitionEnd;
+	return /* @__PURE__ */ jsx(SideBarItemButton, {
 		size,
 		ref,
-		...props
-	}) : null;
+		$isExpanded: isExpanded,
+		$transitionEnd: transitionEnd,
+		...props,
+		...isHidden && {
+			tabIndex: -1,
+			"aria-hidden": true
+		}
+	});
 });
 //#endregion
 export { Button as default };

package/dist/SideBar/components/Item/components/Button/Button.style.cjs

@@ -7,7 +7,12 @@ styled_components = require_runtime.__toESM(styled_components, 1);
 var SideBarItemButton = (0, styled_components.default)(require_ActionIconButton.default).withConfig({
 	displayName: "Buttonstyle__SideBarItemButton",
 	componentId: "RedisUI__sc-13x3wha-0"
-})(["position:absolute;padding:0;right:0;transform:translateX(50%);", ""], () => require_SideBar_utils.useStateStyle((theme) => styled_components.css`
+})([
+	"position:absolute;padding:0;right:0;transform:translateX(50%);transition:opacity 0.4s;@media (prefers-reduced-motion:reduce){transition:none;}opacity:",
+	";pointer-events:",
+	";",
+	""
+], ({ $isExpanded, $transitionEnd }) => $isExpanded && $transitionEnd ? "1" : "0", ({ $isExpanded, $transitionEnd }) => $isExpanded && $transitionEnd ? "auto" : "none", () => require_SideBar_utils.useStateStyle((theme) => styled_components.css`
           background-color: ${theme.item.button.bgColor};
           border-color: ${theme.item.button.borderColor};
           border-width: ${theme.item.button.borderSize};

package/dist/SideBar/components/Item/components/Button/Button.style.d.ts

@@ -1 +1,4 @@
-export declare const SideBarItemButton: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../../../../..").ActionIconButtonProps & import("react").RefAttributes<HTMLButtonElement>>, any, {}, never>;
+export declare const SideBarItemButton: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../../../../..").ActionIconButtonProps & import("react").RefAttributes<HTMLButtonElement>>, any, {
+    $isExpanded: boolean;
+    $transitionEnd: boolean;
+}, never>;

package/dist/SideBar/components/Item/components/Button/Button.style.js

@@ -5,7 +5,12 @@ import _styled, { css } from "styled-components";
 var SideBarItemButton = _styled(ActionIconButton).withConfig({
 	displayName: "Buttonstyle__SideBarItemButton",
 	componentId: "RedisUI__sc-13x3wha-0"
-})(["position:absolute;padding:0;right:0;transform:translateX(50%);", ""], () => useStateStyle((theme) => css`
+})([
+	"position:absolute;padding:0;right:0;transform:translateX(50%);transition:opacity 0.4s;@media (prefers-reduced-motion:reduce){transition:none;}opacity:",
+	";pointer-events:",
+	";",
+	""
+], ({ $isExpanded, $transitionEnd }) => $isExpanded && $transitionEnd ? "1" : "0", ({ $isExpanded, $transitionEnd }) => $isExpanded && $transitionEnd ? "auto" : "none", () => useStateStyle((theme) => css`
           background-color: ${theme.item.button.bgColor};
           border-color: ${theme.item.button.borderColor};
           border-width: ${theme.item.button.borderSize};

package/dist/SideBar/components/Item/components/Text/Text.cjs

@@ -1,12 +1,18 @@
 require("../../../../../_virtual/_rolldown/runtime.cjs");
+const require_SideBar_context = require("../../../../SideBar.context.cjs");
 const require_Text_style = require("./Text.style.cjs");
 let react_jsx_runtime = require("react/jsx-runtime");
 //#region src/SideBar/components/Item/components/Text/Text.tsx
-var Text = (props) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Text_style.SideBarItemText, {
-	ellipsis: true,
-	tooltipOnEllipsis: true,
-	component: "span",
-	...props
-});
+var Text = (props) => {
+	const { isExpanded, transitionEnd } = require_SideBar_context.useSideBarContext();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Text_style.SideBarItemText, {
+		ellipsis: true,
+		tooltipOnEllipsis: true,
+		component: "span",
+		$isExpanded: isExpanded,
+		$transitionEnd: transitionEnd,
+		...props
+	});
+};
 //#endregion
 exports.default = Text;

package/dist/SideBar/components/Item/components/Text/Text.js

@@ -1,11 +1,17 @@
+import { useSideBarContext } from "../../../../SideBar.context.js";
 import { SideBarItemText } from "./Text.style.js";
 import { jsx } from "react/jsx-runtime";
 //#region src/SideBar/components/Item/components/Text/Text.tsx
-var Text = (props) => /* @__PURE__ */ jsx(SideBarItemText, {
-	ellipsis: true,
-	tooltipOnEllipsis: true,
-	component: "span",
-	...props
-});
+var Text = (props) => {
+	const { isExpanded, transitionEnd } = useSideBarContext();
+	return /* @__PURE__ */ jsx(SideBarItemText, {
+		ellipsis: true,
+		tooltipOnEllipsis: true,
+		component: "span",
+		$isExpanded: isExpanded,
+		$transitionEnd: transitionEnd,
+		...props
+	});
+};
 //#endregion
 export { Text as default };

package/dist/SideBar/components/Item/components/Text/Text.style.cjs

@@ -1,15 +1,11 @@
 const require_runtime = require("../../../../../_virtual/_rolldown/runtime.cjs");
 const require_Typography = require("../../../../../Typography/Typography.cjs");
-const require_SideBar_context = require("../../../../SideBar.context.cjs");
 let styled_components = require("styled-components");
 styled_components = require_runtime.__toESM(styled_components, 1);
 //#region src/SideBar/components/Item/components/Text/Text.style.ts
 var SideBarItemText = (0, styled_components.default)(require_Typography.default.Body).withConfig({
 	displayName: "Textstyle__SideBarItemText",
 	componentId: "RedisUI__sc-17tjfvd-0"
-})(["transition:width 0.6s,opacity 0.4s;@media (prefers-reduced-motion:reduce){transition:none;}opacity:", ";"], () => {
-	const { isExpanded, transitionEnd } = require_SideBar_context.useSideBarContext();
-	return isExpanded && transitionEnd ? "1" : "0";
-});
+})(["transition:opacity 0.4s;@media (prefers-reduced-motion:reduce){transition:none;}opacity:", ";"], ({ $isExpanded, $transitionEnd }) => $isExpanded && $transitionEnd ? "1" : "0");
 //#endregion
 exports.SideBarItemText = SideBarItemText;

package/dist/SideBar/components/Item/components/Text/Text.style.d.ts

@@ -1 +1,4 @@
-export declare const SideBarItemText: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../../../../../Typography").TypographyBodyProps & import("react").RefAttributes<HTMLElement>>, any, {}, never>;
+export declare const SideBarItemText: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../../../../../Typography").TypographyBodyProps & import("react").RefAttributes<HTMLElement>>, any, {
+    $isExpanded: boolean;
+    $transitionEnd: boolean;
+}, never>;

package/dist/SideBar/components/Item/components/Text/Text.style.js

@@ -1,13 +1,9 @@
 import Typography from "../../../../../Typography/Typography.js";
-import { useSideBarContext } from "../../../../SideBar.context.js";
 import _styled from "styled-components";
 //#region src/SideBar/components/Item/components/Text/Text.style.ts
 var SideBarItemText = _styled(Typography.Body).withConfig({
 	displayName: "Textstyle__SideBarItemText",
 	componentId: "RedisUI__sc-17tjfvd-0"
-})(["transition:width 0.6s,opacity 0.4s;@media (prefers-reduced-motion:reduce){transition:none;}opacity:", ";"], () => {
-	const { isExpanded, transitionEnd } = useSideBarContext();
-	return isExpanded && transitionEnd ? "1" : "0";
-});
+})(["transition:opacity 0.4s;@media (prefers-reduced-motion:reduce){transition:none;}opacity:", ";"], ({ $isExpanded, $transitionEnd }) => $isExpanded && $transitionEnd ? "1" : "0");
 //#endregion
 export { SideBarItemText };

package/dist/SideBar/components/ScrollContainer/ScrollContainer.style.cjs

@@ -6,6 +6,6 @@ styled_components = require_runtime.__toESM(styled_components, 1);
 var ScrollContainer = (0, styled_components.default)(require_FlexGroup.FlexGroup).withConfig({
 	displayName: "ScrollContainerstyle__ScrollContainer",
 	componentId: "RedisUI__sc-15iez38-0"
-})(["overflow-y:auto;"]);
+})(["overflow-y:auto;overflow-x:hidden;scrollbar-gutter:stable;"]);
 //#endregion
 exports.ScrollContainer = ScrollContainer;

package/dist/SideBar/components/ScrollContainer/ScrollContainer.style.js

@@ -4,6 +4,6 @@ import _styled from "styled-components";
 var ScrollContainer = _styled(FlexGroup).withConfig({
 	displayName: "ScrollContainerstyle__ScrollContainer",
 	componentId: "RedisUI__sc-15iez38-0"
-})(["overflow-y:auto;"]);
+})(["overflow-y:auto;overflow-x:hidden;scrollbar-gutter:stable;"]);
 //#endregion
 export { ScrollContainer };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@redis-ui/components",
   "license": "UNLICENSED",
-  "version": "47.0.1",
+  "version": "47.2.0",
   "type": "module",
   "sideEffects": false,
   "repository": "git@github.com:redislabsdev/redis-ui.git",
@@ -30,7 +30,7 @@
   },
   "peerDependencies": {
     "@redis-ui/icons": "^8.0.0",
-    "@redis-ui/styles": "^16.0.0",
+    "@redis-ui/styles": "^16.3.0",
     "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
     "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0",
     "styled-components": "^5.0.0"

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

@@ -1,6 +1,6 @@
 # SideBar
 
-Collapsible sidebar navigation with a header toggle, grouped items, scrollable middle content, and a footer area. The component is designed as a compound API so the header, items, splitters, and footer pieces can be composed as needed.
+Collapsible sidebar navigation with a header toggle, grouped items, scrollable middle content, and a footer area. The component is designed as a compound API so the header, items, splitters, group titles, and footer pieces can be composed as needed.
 
 ## Import
 
@@ -13,6 +13,7 @@ import { SideBar } from '@redis-ui/components';
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
 | isExpanded | `boolean` | *required* | Controls whether the sidebar is expanded or collapsed |
+| expandedWidth | `string` | design-system default | Overrides the sidebar width when expanded |
 
 The component also accepts all `FlexGroupProps` except `direction`, which is fixed to a vertical sidebar layout.
 
@@ -28,7 +29,10 @@ The component also accepts all `FlexGroupProps` except `direction`, which is fix
 - `SideBar.Item` - Navigation item with tooltip support when collapsed.
 - `SideBar.Item.Icon` - Icon slot for a sidebar item.
 - `SideBar.Item.Text` - Text slot for a sidebar item.
-- `SideBar.Item.Button` - Compact action button that is shown only when the sidebar is expanded.
+- `SideBar.Item.Button` - Compact action button rendered inside a sidebar item.
+- `SideBar.Item.Badge` - Badge slot rendered to the right of `Item.Text` (e.g. `NEW`, `BETA`).
+- `SideBar.Group` - Wrapper around a section's `Group.Title` and items. Use one `SideBar.Group` per logical section.
+- `SideBar.Group.Title` - Section label rendered above a group of items.
 - `SideBar.Footer` - Footer wrapper for metadata, links, and text.
 - `SideBar.Footer.MetaData` - Footer metadata container.
 - `SideBar.Footer.Link` - Footer link rendered as body text.
@@ -52,11 +56,11 @@ The logo also accepts standard `HTMLAttributes<HTMLSpanElement>` except `childre
 
 ### SideBar.ItemsContainer Props
 
-This component inherits `FlexGroupProps` except `direction`. It renders a column list container with `gap="0"`, `flex="none"`, and `selfAlign="stretch"`.
+This component inherits `FlexGroupProps` except `direction`. Use it to render a vertical list of sidebar items.
 
 ### SideBar.ScrollContainer Props
 
-This component inherits `FlexGroupProps` except `direction`. It renders a flexible column container with `gap="0"`, `flex="1"`, and `selfAlign="stretch"`.
+This component inherits `FlexGroupProps` except `direction`. Use it for sidebar content that should scroll when vertical space is constrained.
 
 ### SideBar.Divider Props
 
@@ -73,7 +77,7 @@ The divider also accepts standard `HTMLAttributes<HTMLDivElement>` except `child
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
 | tooltipProps | `SideBarTooltipProps` | *required* | Tooltip configuration used when the sidebar is collapsed |
-| isActive | `boolean` | `false` | Marks the item as the active route/item |
+| isActive | `boolean` | `false` | Marks the item as the active route/item and applies the design-system active visual treatment |
 
 The item also accepts standard `HTMLAttributes<HTMLLIElement>`.
 The tooltip text is used as the collapsed label and tooltip placement defaults to `right`.
@@ -86,11 +90,27 @@ The tooltip text is used as the collapsed label and tooltip placement defaults t
 
 ### SideBar.Item.Text Props
 
-This slot inherits `TypographyBodyProps`. It renders a `Typography.Body` element with `component="span"`, `ellipsis`, and `tooltipOnEllipsis` enabled.
+This slot inherits `TypographyBodyProps`. Use it for the sidebar item text label.
 
 ### SideBar.Item.Button Props
 
-This slot inherits all `ActionIconButtonProps`, defaults `size` to `M`, and renders only while the sidebar is expanded.
+This slot inherits all `ActionIconButtonProps` and defaults `size` to `M`. It is available when the sidebar is expanded and hidden while collapsed.
+
+### SideBar.Item.Badge Props
+
+This slot inherits all `BadgeProps` from the base `Badge` component. It is shown next to item text when the sidebar is expanded and hidden while collapsed.
+
+### SideBar.Group Props
+
+This wrapper accepts standard `HTMLAttributes<HTMLDivElement>`. Place a `SideBar.Group.Title` and the section's items inside.
+
+### SideBar.Group.Title Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| children | `React.ReactNode` | *required* | Title text shown above the group of items |
+
+The group title also accepts standard `HTMLAttributes<HTMLDivElement>` except `children`. It is shown when the sidebar is expanded and hidden while collapsed.
 
 ### SideBar.Button Props
 
@@ -129,7 +149,7 @@ The link also accepts standard `AnchorHTMLAttributes<HTMLAnchorElement>` except
 |------|------|---------|-------------|
 | children | `React.ReactNode` | *required* | Footer text content |
 
-This slot inherits `TypographyBodyProps` except `children` and renders a small body-text footer line.
+This slot inherits `TypographyBodyProps` except `children` and renders footer text.
 
 ## Examples
 
@@ -249,6 +269,66 @@ const [activeLink, setActiveLink] = useState(items.top[0].content);
 </SideBar>
 ```
 
+### Groups
+
+> Sidebar items can be split into groups, each with an optional title label. Items inside a group may also render an optional `SideBar.Item.Badge` (e.g. `NEW`, `BETA`) to the right of the text.
+
+```tsx
+import { SideBar } from '@redis-ui/components';
+import { PlusIcon } from '@redis-ui/icons';
+import { useState } from 'react';
+import { RedisIcon } from '@redis-ui/icons/multicolor';
+import { groups } from './SideBar.data';
+
+const [expanded, setExpanded] = useState(true);
+const [activeLink, setActiveLink] = useState(groups[0].items[0].content);
+
+<SideBar
+  isExpanded={expanded}
+  style={{ maxHeight: '55rem', height: 'calc(100vh - 2rem)' }}
+  expandedWidth="35rem"
+>
+  <SideBar.Header onToggle={() => setExpanded(!expanded)}>
+    <SideBar.SideBarLogo logoIcon={RedisIcon} />
+  </SideBar.Header>
+  <SideBar.ScrollContainer>
+    {groups.map((group, groupIdx) => (
+      <SideBar.Group key={group.title ?? `group-${groupIdx}`}>
+        {group.title && <SideBar.Group.Title>{group.title}</SideBar.Group.Title>}
+        <SideBar.ItemsContainer>
+          {group.items.map((item) => (
+            <SideBar.Item
+              isActive={item.content === activeLink}
+              onClick={() => setActiveLink(item.content)}
+              key={item.content}
+              tooltipProps={{ text: item.content, placement: 'right' }}
+            >
+              <SideBar.Item.Icon icon={item.icon} />
+              <SideBar.Item.Text>{item.content}</SideBar.Item.Text>
+              {'badge' in item && item.badge && (
+                <SideBar.Item.Badge label={item.badge.label} variant={item.badge.variant} />
+              )}
+              {'hasButton' in item && item.hasButton && (
+                <SideBar.Item.Button
+                  icon={PlusIcon}
+                  variant="primary"
+                  onClick={(e) => e.stopPropagation()}
+                  title={`New ${item.content}`}
+                />
+              )}
+            </SideBar.Item>
+          ))}
+        </SideBar.ItemsContainer>
+      </SideBar.Group>
+    ))}
+  </SideBar.ScrollContainer>
+  <SideBar.Footer>
+    <SideBar.Divider fullWidth />
+    <SideBar.Footer.MetaData>© 2026 Redis</SideBar.Footer.MetaData>
+  </SideBar.Footer>
+</SideBar>
+```
+
 ### HeaderAndFooter
 
 > `Header` includes toggle button and. Set `onToggle` handler to switch expanded state.  
@@ -458,11 +538,15 @@ const [expanded, setExpanded] = useState(true);
 ## Notes
 
 - `SideBar` is a collapsible navigation shell with a fixed header/footer layout and grouped content in the middle.
+- Hosts can override the expanded width by passing the `expandedWidth` prop.
 - `SideBar.Header` needs an `onToggle` handler and should usually render `SideBar.SideBarLogo` inside it.
 - `SideBar.Footer` is typically used with `Footer.MetaData`; that metadata area is hidden when the sidebar is collapsed.
 - `SideBar.ScrollContainer` is intended for the middle content when vertical space is constrained, and the docs recommend using only one per sidebar.
 - `SideBar.Split` can be used either directly under `SideBar` or under `SideBar.ScrollContainer`, but the two patterns should not be mixed.
 - `SideBar.Divider` supports `noMargin`, `fullWidth`, and `fullWidthWhenExpanded` for layout tuning.
-- `SideBar.Item` wraps collapsed items in a tooltip and exposes `Item.Icon`, `Item.Text`, and `Item.Button` for composition.
-- `SideBar.Item.Button` only renders while the sidebar is expanded and defaults its size to `M`.
+- `SideBar.Item` wraps collapsed items in a tooltip and exposes `Item.Icon`, `Item.Text`, `Item.Button`, and `Item.Badge` for composition.
+- `SideBar.Item` supports the `isActive` prop for marking the current route or selected item.
+- `SideBar.Item.Button` defaults its size to `M`.
 - `SideBar.Button` is the root collapsible action button, and it defaults to `PlusIcon` when no collapsed icon is provided.
+- `SideBar.Group` wraps a section's `Group.Title` (optional) and items so the title and the items stay together as one logical unit.
+- `SideBar.Group.Title` labels a group of items. Pair `SideBar.Item.Badge` with `Item.Text` if you need to mark individual items as `NEW`, `BETA`, etc.