@redis-ui/components 47.5.0 → 47.5.2

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@redis-ui/components",
   "license": "UNLICENSED",
-  "version": "47.5.0",
+  "version": "47.5.2",
   "type": "module",
   "sideEffects": false,
   "repository": "git@github.com:redislabsdev/redis-ui.git",
@@ -29,7 +29,7 @@
     "test": "vitest"
   },
   "peerDependencies": {
-    "@redis-ui/icons": "^8.0.0",
+    "@redis-ui/icons": "^8.0.0 || ^9.0.0",
     "@redis-ui/styles": "^16.4.1",
     "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
     "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0",

package/skills/redis-ui-components/SKILL.md

@@ -21,7 +21,7 @@ or `style.width`/`height` for custom sizing. See the [Icons](./references/Icons.
 
 ```tsx
 import { EditIcon, DeleteIcon, iconVariants, type IconVariant } from '@redis-ui/icons';
-import { RedisIcon } from '@redis-ui/icons/multicolor';
+import { RedisLogoDarkMinIcon } from '@redis-ui/icons/multicolor';
 ```
 
 ## Key Patterns

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

@@ -7,7 +7,7 @@ Icon set published in `@redis-ui/icons`. Two flavors are available:
 
 ```tsx
 import { StarsIcon, EditIcon, DeleteIcon } from '@redis-ui/icons';
-import { RedisIcon } from '@redis-ui/icons/multicolor';
+import { RedisLogoDarkMinIcon } from '@redis-ui/icons/multicolor';
 ```
 
 Type and variant exports:
@@ -52,10 +52,10 @@ their colors are baked in.
 
 ```tsx
 import { StarsIcon } from '@redis-ui/icons';
-import { RedisIcon } from '@redis-ui/icons/multicolor';
+import { RedisLogoDarkMinIcon } from '@redis-ui/icons/multicolor';
 
 <StarsIcon size="XL" variant="success" />
-<RedisIcon />
+<RedisLogoDarkMinIcon />
 ```
 
 ### Sizes and Variants

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

@@ -96,7 +96,7 @@ import { PaginationInfoLabelProps } from '@redis-ui/components';
 import { columns, tableData } from './TableStory.data';
 
 const renderRowCount: PaginationInfoLabelProps['renderer'] = ({ visibleItemCount, totalItemCount }) =>
-  `Showing ${visibleItemCount} out of ${totalItemCount} rows`;
+  `Showing ${visibleItemCount} out of ${totalItemCount} ${totalItemCount === 1 ? 'row' : 'rows'}`;
 
 const renderPageCount: PaginationInfoLabelProps['renderer'] = ({ pageIndex, pageCount }) =>
   `${pageIndex + 1} of ${pageCount}`;

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

@@ -158,14 +158,14 @@ This slot inherits `TypographyBodyProps` except `children` and renders footer te
 ```tsx
 import { SideBar } from '@redis-ui/components';
 import { ShardIcon } from '@redis-ui/icons';
-import { RedisIcon } from '@redis-ui/icons/multicolor';
+import { RedisLogoDarkMinIcon } from '@redis-ui/icons/multicolor';
 import { useArgState } from '../../helpers/useArgState';
 
 const [expanded, onToggle] = useArgState({ arg: true, getNewState: (arg) => !arg });
 
 <SideBar isExpanded={expanded}>
   <SideBar.Header onToggle={onToggle}>
-    <SideBar.SideBarLogo logoIcon={RedisIcon} />
+    <SideBar.SideBarLogo logoIcon={RedisLogoDarkMinIcon} />
   </SideBar.Header>
   <SideBar.Item tooltipProps={{ text: 'tooltip' }}>
     <SideBar.Item.Icon icon={ShardIcon} />
@@ -187,7 +187,7 @@ const [expanded, onToggle] = useArgState({ arg: true, getNewState: (arg) => !arg
 import { SideBar } from '@redis-ui/components';
 import { PlusIcon } from '@redis-ui/icons';
 import { useState } from 'react';
-import { RedisIcon } from '@redis-ui/icons/multicolor';
+import { RedisLogoDarkMinIcon } from '@redis-ui/icons/multicolor';
 import { items } from './SideBar.data';
 
 const [expanded, setExpanded] = useState(true);
@@ -195,7 +195,7 @@ const [activeLink, setActiveLink] = useState(items.top[0].content);
 
 <SideBar isExpanded={expanded} style={{ maxHeight: '55rem', height: 'calc(100vh - 2rem)' }}>
   <SideBar.Header onToggle={() => setExpanded(!expanded)}>
-    <SideBar.SideBarLogo logoIcon={RedisIcon} />
+    <SideBar.SideBarLogo logoIcon={RedisLogoDarkMinIcon} />
   </SideBar.Header>
   <SideBar.ScrollContainer>
     <SideBar.ItemsContainer>
@@ -277,7 +277,7 @@ const [activeLink, setActiveLink] = useState(items.top[0].content);
 import { SideBar } from '@redis-ui/components';
 import { PlusIcon } from '@redis-ui/icons';
 import { useState } from 'react';
-import { RedisIcon } from '@redis-ui/icons/multicolor';
+import { RedisLogoDarkMinIcon } from '@redis-ui/icons/multicolor';
 import { groups } from './SideBar.data';
 
 const [expanded, setExpanded] = useState(true);
@@ -289,7 +289,7 @@ const [activeLink, setActiveLink] = useState(groups[0].items[0].content);
   expandedWidth="35rem"
 >
   <SideBar.Header onToggle={() => setExpanded(!expanded)}>
-    <SideBar.SideBarLogo logoIcon={RedisIcon} />
+    <SideBar.SideBarLogo logoIcon={RedisLogoDarkMinIcon} />
   </SideBar.Header>
   <SideBar.ScrollContainer>
     {groups.map((group, groupIdx) => (
@@ -340,7 +340,7 @@ const [activeLink, setActiveLink] = useState(groups[0].items[0].content);
 ```tsx
 import { SideBar } from '@redis-ui/components';
 import { useState } from 'react';
-import { RedisIcon } from '@redis-ui/icons/multicolor';
+import { RedisLogoDarkMinIcon } from '@redis-ui/icons/multicolor';
 import { StoryHList } from '../../helpers/Story.style';
 
 const [expanded, setExpanded] = useState(true);
@@ -348,7 +348,7 @@ const [expanded, setExpanded] = useState(true);
 const content = (
   <>
     <SideBar.Header onToggle={() => setExpanded((val) => !val)}>
-      <SideBar.SideBarLogo logoIcon={RedisIcon} />
+      <SideBar.SideBarLogo logoIcon={RedisLogoDarkMinIcon} />
     </SideBar.Header>
     <SideBar.Footer>
       <SideBar.Footer.MetaData>