TiendaNube · joacotornello · Sep 17, 2025 · Sep 18, 2025 · Sep 18, 2025 · Sep 18, 2025
diff --git a/.yarn/versions/d407b440.yml b/.yarn/versions/d407b440.yml
@@ -0,0 +1,14 @@
+releases:
+  "@nimbus-ds/nav-tabs": minor
+  "@nimbus-ds/patterns": minor
+
+declined:
+  - nimbus-patterns
+  - "@nimbus-ds/app-shell"
+  - "@nimbus-ds/empty-message"
+  - "@nimbus-ds/formfield"
+  - "@nimbus-ds/menubutton"
+  - "@nimbus-ds/page"
+  - "@nimbus-ds/product-data-list"
+  - "@nimbus-ds/sidemodal"
+  - "@nimbus-ds/sortable"
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -3,6 +3,12 @@
 This is the log of notable changes to the Nimbus Patterns that are developer-facing.
 Package-specific changes not released in any package will be added here just before the release. Until then, you can find them in changelogs of the individual packages (see [packages](./packages) directory).
 
+## 2025-09-17
+
+#### 🐛 Bug fixes
+
+- Removed @nimbus-ds/icons from devDependencies from several components, and added it to the general monorepo dependencies to avoid outdated versions when developing locally. ([#122](https://github.com/TiendaNube/nimbus-patterns/pull/122) by [@joacotornello](https://github.com/joacotornello))
+
 ## 2025-08-08
 
 #### 🎉 New features
@@ -16,14 +22,12 @@ Package-specific changes not released in any package will be added here just bef
 - Added Cursor Rules to the project. ([#109](https://github.com/TiendaNube/nimbus-patterns/pull/109) by [@joacotornello](https://github.com/joacotornello))
 - Added CodeRabbit config to the project. ([#109](https://github.com/TiendaNube/nimbus-patterns/pull/109) by [@joacotornello](https://github.com/joacotornello))
 
-
 ## 2025-04-24
 
 #### 🎉 New features
 
 - Added a [workflow](https://github.com/TiendaNube/nimbus-patterns/blob/master/.github/workflows/preview-storybook.yml) to build and deploy a Storybook preview to an S3 bucket when a pull request is opened, synchronized, or reopened. ([#110](https://github.com/TiendaNube/nimbus-patterns/pull/110) by [@harrytiendanube](https://github.com/harrytiendanube))
 
-
 ## 2023-12-22
 
 ### 🎉 New features

diff --git a/package.json b/package.json
@@ -62,10 +62,11 @@
     "@commitlint/config-conventional": "^17.2.0",
     "@jest/types": "^29.2.1",
     "@mdx-js/react": "^1.6.22",
-    "@nimbus-ds/components": "5.19.0",
+    "@nimbus-ds/components": "5.24.0",
+    "@nimbus-ds/icons": "1.13.1",
     "@nimbus-ds/scripts": "1.8.0",
-    "@nimbus-ds/styles": "9.23.0",
-    "@nimbus-ds/tokens": "9.3.0",
+    "@nimbus-ds/styles": "9.27.0",
+    "@nimbus-ds/tokens": "9.4.0",
     "@storybook/addon-docs": "^7.5.1",
     "@storybook/addon-essentials": "^7.5.1",
     "@storybook/addon-interactions": "^7.5.1",

diff --git a/packages/react/CHANGELOG.md b/packages/react/CHANGELOG.md
@@ -2,6 +2,12 @@
 
 Nimbus is an open-source Design System created by Tiendanube / Nuvesmhop’s team to empower and enhance more stories every day, with simplicity, accessibility, consistency and performance.
 
+## 2025-09-17 `1.21.0`
+
+#### 🎉 New features
+
+- Added `ai-generative` appearance for `NavTabs.Item` component. ([#122](https://github.com/TiendaNube/nimbus-patterns/pull/122) by [@joacotornello](https://github.com/joacotornello))
+
 ## 2025-09-10 `1.20.1`
 
 #### 🐛 Bug fixes

diff --git a/packages/react/src/components/AppShell/package.json b/packages/react/src/components/AppShell/package.json
@@ -29,7 +29,6 @@
     "url": "https://github.com/TiendaNube/nimbus-patterns/issues"
   },
   "devDependencies": {
-    "@nimbus-ds/icons": "^1",
     "@nimbus-ds/menu": "workspace:^",
     "@nimbus-ds/menubutton": "workspace:^",
     "@nimbus-ds/page": "workspace:^"

diff --git a/packages/react/src/components/EmptyMessage/package.json b/packages/react/src/components/EmptyMessage/package.json
@@ -27,8 +27,5 @@
   },
   "bugs": {
     "url": "https://github.com/TiendaNube/nimbus-patterns/issues"
-  },
-  "devDependencies": {
-    "@nimbus-ds/icons": "^1"
   }
 }
diff --git a/packages/react/src/components/FormField/package.json b/packages/react/src/components/FormField/package.json
@@ -27,8 +27,5 @@
   },
   "bugs": {
     "url": "https://github.com/TiendaNube/nimbus-patterns/issues"
-  },
-  "devDependencies": {
-    "@nimbus-ds/icons": "^1"
   }
 }
diff --git a/packages/react/src/components/MenuButton/package.json b/packages/react/src/components/MenuButton/package.json
@@ -30,8 +30,5 @@
   },
   "dependencies": {
     "@nimbus-ds/typings": "^1.1.0"
-  },
-  "devDependencies": {
-    "@nimbus-ds/icons": "^1"
   }
 }
diff --git a/packages/react/src/components/NavTabs/CHANGELOG.md b/packages/react/src/components/NavTabs/CHANGELOG.md
@@ -2,6 +2,12 @@
 
 The NavTabs component represents the main navigation dock for an application on a mobile device, including up to 5 tabs or buttons for different sections. The component has a fixed position on the bottom of the screen.
 
+## 2025-09-17 `1.4.0`
+
+#### 🎉 New features
+
+- Added `ai-generative` appearance for `NavTabs.Item` component. ([#122](https://github.com/TiendaNube/nimbus-patterns/pull/122) by [@joacotornello](https://github.com/joacotornello))
+
 ## 2025-06-04 `1.2.5`
 
 #### 💡 Others

diff --git a/packages/react/src/components/NavTabs/package.json b/packages/react/src/components/NavTabs/package.json
@@ -27,8 +27,5 @@
   },
   "bugs": {
     "url": "https://github.com/TiendaNube/nimbus-patterns/issues"
-  },
-  "devDependencies": {
-    "@nimbus-ds/icons": "^1"
   }
 }
diff --git a/packages/react/src/components/NavTabs/src/components/NavTabsItem/NavTabsItem.tsx b/packages/react/src/components/NavTabs/src/components/NavTabsItem/NavTabsItem.tsx
@@ -1,9 +1,19 @@
 import React from "react";
 
-import { Icon, Box } from "@nimbus-ds/components";
+import {
+  Icon,
+  Box,
+  BoxProperties,
+  IconProperties,
+} from "@nimbus-ds/components";
 
 import { NavTabsItemProps } from "./navTabsItem.types";
 
+interface NavTabsItemAppearance {
+  container: BoxProperties;
+  icon: Partial<IconProperties>;
+}
+
 const NavTabsItem: React.FC<NavTabsItemProps> = ({
   className: _className,
   style: _style,
@@ -12,39 +22,69 @@ const NavTabsItem: React.FC<NavTabsItemProps> = ({
   badge = false,
   onClick,
   ariaLabel,
+  appearance = "default",
   ...rest
-}: NavTabsItemProps) => (
-  <Box
-    {...rest}
-    className={_className}
-    style={_style}
-    backgroundColor={active ? "primary-surface" : "transparent"}
-    borderColor="transparent"
-    borderRadius="2"
-    cursor="pointer"
-    as="button"
-    type="button"
-    p="2-5"
-    position="relative"
-    onClick={onClick}
-    aria-label={ariaLabel}
-  >
-    <Icon
-      source={icon}
-      color={active ? "primary-interactive" : "primary-textLow"}
-    />
-    {badge && (
-      <Box
-        borderRadius="full"
-        backgroundColor="primary-interactive"
-        height=".25rem"
-        position="absolute"
-        right=".25rem"
-        top=".25rem"
-        width=".25rem"
+}: NavTabsItemProps) => {
+  const defaultAppearance: NavTabsItemAppearance = {
+    container: {
+      backgroundColor: active ? "primary-surface" : "transparent",
+      borderColor: "transparent",
+    },
+    icon: {
+      color: active ? "primary-interactive" : "primary-textLow",
+    },
+  };
+
+  const aiGenerativeAppearance: NavTabsItemAppearance = {
+    container: {
+      borderColor: "transparent",
+      background: "ai-generative-interactive-border",
+      borderWidth: "1",
+      borderStyle: "solid",
+    },
+    icon: {
+      color: "ai-generative",
+    },
+  };
+
+  return (
+    <Box
+      {...rest}
+      className={_className}
+      style={_style}
+      {...(appearance === "default"
+        ? defaultAppearance.container
+        : aiGenerativeAppearance.container)}
+      as="button"
+      borderWidth="1"
+      borderStyle="solid"
+      borderRadius="2"
+      cursor="pointer"
+      type="button"
+      p="2-5"
+      position="relative"
+      onClick={onClick}
+      aria-label={ariaLabel}
+    >
+      <Icon
+        source={icon}
+        {...(appearance === "default"
+          ? defaultAppearance.icon
+          : aiGenerativeAppearance.icon)}
       />
-    )}
-  </Box>
-);
+      {badge && (
+        <Box
+          borderRadius="full"
+          backgroundColor="primary-interactive"
+          height=".25rem"
+          position="absolute"
+          right=".25rem"
+          top=".25rem"
+          width=".25rem"
+        />
+      )}
+    </Box>
+  );
+};
 
 export { NavTabsItem };
diff --git a/packages/react/src/components/NavTabs/src/components/NavTabsItem/navTabsItem.spec.tsx b/packages/react/src/components/NavTabs/src/components/NavTabsItem/navTabsItem.spec.tsx
@@ -40,5 +40,24 @@ describe("GIVEN <NavTabsItem />", () => {
       fireEvent.click(buttonClick);
       expect(mockedClickFunction).toHaveBeenCalled();
     });
+
+    it("renders active badge with ai-generative appearance", () => {
+      makeSut({ active: true, badge: true, appearance: "ai-generative" });
+
+      const button = screen.getByRole("button");
+      expect(button.className).toContain("background");
+
+      const badge = button.querySelector('[class*="position-absolute"]');
+      expect(badge).toBeInTheDocument();
+    });
+
+    it("applies ai-generative appearance when specified", () => {
+      makeSut({ appearance: "ai-generative" });
+
+      const button = screen.getByRole("button");
+      expect(button.className).toContain("background");
+      expect(button.className).toContain("borderColor");
+      expect(button.className).toContain("borderWidth");
+    });
   });
 });
diff --git a/packages/react/src/components/NavTabs/src/components/NavTabsItem/navTabsItem.stories.tsx b/packages/react/src/components/NavTabs/src/components/NavTabsItem/navTabsItem.stories.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 import type { Meta, StoryObj } from "@storybook/react";
-import { HomeIcon } from "@nimbus-ds/icons";
+import { GenerativeStarsIcon, HomeIcon } from "@nimbus-ds/icons";
 
 import { NavTabs } from "../../NavTabs";
 
@@ -24,3 +24,13 @@ export const basic: Story = {
     ariaLabel: "Home",
   },
 };
+
+export const aiGenerative: Story = {
+  args: {
+    active: true,
+    icon: <GenerativeStarsIcon size="medium" />,
+    onClick: () => false,
+    ariaLabel: "AI",
+    appearance: "ai-generative",
+  },
+};
diff --git a/packages/react/src/components/NavTabs/src/components/NavTabsItem/navTabsItem.types.ts b/packages/react/src/components/NavTabs/src/components/NavTabsItem/navTabsItem.types.ts
@@ -24,6 +24,10 @@ export interface NavTabsItemProperties {
    * Text label used for accessibility.
    */
   ariaLabel: string;
+  /**
+   * Appearance of the button.
+   */
+  appearance?: "default" | "ai-generative";
 }
 
 export type NavTabsItemProps = NavTabsItemProperties &

diff --git a/packages/react/src/components/NavTabs/src/navTabs.stories.tsx b/packages/react/src/components/NavTabs/src/navTabs.stories.tsx
@@ -1,6 +1,12 @@
 import React from "react";
 import type { Meta, StoryObj } from "@storybook/react";
-import { HomeIcon, MoneyIcon, TagIcon, MenuIcon } from "@nimbus-ds/icons";
+import {
+  HomeIcon,
+  MoneyIcon,
+  TagIcon,
+  MenuIcon,
+  GenerativeStarsIcon,
+} from "@nimbus-ds/icons";
 
 import { NavTabs } from "./NavTabs";
 
@@ -46,3 +52,40 @@ export const basic: Story = {
     ),
   },
 };
+
+export const withAiItem: Story = {
+  args: {
+    children: (
+      <>
+        <NavTabs.Item
+          active
+          icon={<HomeIcon size="medium" />}
+          onClick={() => false}
+          ariaLabel="Home"
+        />
+        <NavTabs.Item
+          badge
+          icon={<MoneyIcon size="medium" />}
+          onClick={() => false}
+          ariaLabel="Orders"
+        />
+        <NavTabs.Item
+          icon={<GenerativeStarsIcon size="medium" />}
+          onClick={() => false}
+          ariaLabel="AI"
+          appearance="ai-generative"
+        />
+        <NavTabs.Item
+          icon={<TagIcon size="medium" />}
+          onClick={() => false}
+          ariaLabel="Products"
+        />
+        <NavTabs.Item
+          icon={<MenuIcon size="medium" />}
+          onClick={() => false}
+          ariaLabel="Menu"
+        />
+      </>
+    ),
+  },
+};
diff --git a/packages/react/src/components/Page/package.json b/packages/react/src/components/Page/package.json
@@ -27,8 +27,5 @@
   },
   "bugs": {
     "url": "https://github.com/TiendaNube/nimbus-patterns/issues"
-  },
-  "devDependencies": {
-    "@nimbus-ds/icons": "^1"
   }
 }
diff --git a/packages/react/src/components/ProductDataList/package.json b/packages/react/src/components/ProductDataList/package.json
@@ -19,7 +19,6 @@
   },
   "devDependencies": {
     "@nimbus-ds/components": "^5",
-    "@nimbus-ds/icons": "^1",
     "@nimbus-ds/sortable": "workspace:*"
   },
   "repository": {

diff --git a/packages/react/src/components/SideModal/package.json b/packages/react/src/components/SideModal/package.json
@@ -27,8 +27,5 @@
   },
   "bugs": {
     "url": "https://github.com/TiendaNube/nimbus-patterns/issues"
-  },
-  "devDependencies": {
-    "@nimbus-ds/icons": "^1"
   }
 }
diff --git a/packages/react/src/components/Sortable/package.json b/packages/react/src/components/Sortable/package.json
@@ -34,7 +34,6 @@
   "devDependencies": {
     "@dnd-kit/core": "^6.1.0",
     "@dnd-kit/sortable": "^7.0.2",
-    "@dnd-kit/utilities": "^3.2.2",
-    "@nimbus-ds/icons": "^1"
+    "@dnd-kit/utilities": "^3.2.2"
   }
 }