@nexub/patterns 2.2.0 → 2.3.1

package/README.md

@@ -6,7 +6,10 @@ Composite UI patterns for the Nexub Design System, built on `@nexub/react`.
 pnpm add @nexub/patterns @nexub/react @nexub/icons @nexub/themes
 ```
 
-Like `@nexub/react`, the patterns are styled with Tailwind classes your app compiles: add `node_modules/@nexub/patterns/dist/**/*.js` to your Tailwind `content`, use the `@nexub/tokens/tailwind` preset, and import `@nexub/themes/base` plus a palette (e.g. `@nexub/themes/light` and `@nexub/themes/dark`).
+Like `@nexub/react`, the patterns are styled with Tailwind classes your app compiles, on Tailwind 3 or 4. Import `@nexub/themes/base` plus a palette (e.g. `@nexub/themes/light` and `@nexub/themes/dark`), then:
+
+- **Tailwind 3:** add `node_modules/@nexub/patterns/dist/**/*.js` to your Tailwind `content` and use the `@nexub/tokens/tailwind` preset.
+- **Tailwind 4:** `@import "@nexub/tokens/tailwind.css";` after `@import "tailwindcss";`, add `@source "../node_modules/@nexub/patterns/dist";`, and import the theme CSS with `layer(base)` so Tailwind's utilities still win over it. See [Getting Started](https://nexub-ds-docs.pages.dev/getting-started) for the full snippet.
 
 ## AppHeader
 
@@ -123,6 +126,8 @@ Search opens with the button, **⌘K / Ctrl+K** anywhere, or **/** when focus is
   </SettingsLayout>
   ```
 
+  `navFooter` pins a line to the bottom of the section sidebar and the phone menu while the items scroll, e.g. `navFooter="v1.2.0 · Updated 21 Oct 2026"`. In your own `Sidebar`, use `Sidebar.Footer` for the same.
+
 ### Strict CSP
 
 The header injects no `<style>` tags and sets no inline styles of its own: the search palette locks page scroll with a class (`scrollLock="class"`), and the org and account menus are non-modal. One known gap: the colour Nexub mark inside `Logo` still sets `style` on its gradient stops, so under `style-src 'self'` a server-rendered mark loses its colours until that is fixed.

package/dist/{chunk-WIHNK7RT.js → chunk-Z4FCC42C.js}

@@ -11,22 +11,26 @@ function SectionNav({
   activeId,
   onChoose,
   label,
+  footer,
   className
 }) {
-  return /* @__PURE__ */ jsx(Sidebar.Root, { "aria-label": label, className, children: /* @__PURE__ */ jsx(Sidebar.Group, { children: items.map((item) => /* @__PURE__ */ jsx(
-    Sidebar.Item,
-    {
-      href: item.href,
-      icon: item.icon,
-      active: item.id === activeId,
-      onClick: (e) => onChoose(e, item),
-      children: item.label
-    },
-    item.id
-  )) }) });
+  return /* @__PURE__ */ jsxs(Sidebar.Root, { "aria-label": label, className, children: [
+    /* @__PURE__ */ jsx(Sidebar.Group, { children: items.map((item) => /* @__PURE__ */ jsx(
+      Sidebar.Item,
+      {
+        href: item.href,
+        icon: item.icon,
+        active: item.id === activeId,
+        onClick: (e) => onChoose(e, item),
+        children: item.label
+      },
+      item.id
+    )) }),
+    footer && /* @__PURE__ */ jsx(Sidebar.Footer, { className: "px-5 py-3 text-xs text-[var(--color-on-surface-muted)]", children: footer })
+  ] });
 }
 var Root = React.forwardRef(
-  ({ items, activeId, onSelect, logo, actions, header, title, description, navLabel = "Settings", className, children, ...props }, ref) => {
+  ({ items, activeId, onSelect, logo, actions, header, title, description, navLabel = "Settings", navFooter, className, children, ...props }, ref) => {
     const [menuOpen, setMenuOpen] = React.useState(false);
     const onChoose = (e, item) => {
       if (!isPlainClick(e)) return;
@@ -51,6 +55,7 @@ var Root = React.forwardRef(
             activeId,
             onChoose,
             label: navLabel,
+            footer: navFooter,
             className: "sticky top-[var(--app-header-height,64px)] hidden h-[calc(100vh-var(--app-header-height,64px))] shrink-0 md:flex"
           }
         ),
@@ -66,7 +71,7 @@ var Root = React.forwardRef(
         /* @__PURE__ */ jsx(Sheet.Overlay, { className: "md:hidden" }),
         /* @__PURE__ */ jsxs(Sheet.Content, { side: "left", "aria-describedby": void 0, className: "md:hidden", children: [
           /* @__PURE__ */ jsx(Sheet.Title, { className: "px-5 pb-2 pt-5 text-base", children: navLabel }),
-          /* @__PURE__ */ jsx(SectionNav, { items, activeId, onChoose, label: navLabel, className: "w-full border-e-0" })
+          /* @__PURE__ */ jsx(SectionNav, { items, activeId, onChoose, label: navLabel, footer: navFooter, className: "min-h-0 w-full flex-1 border-e-0" })
         ] })
       ] }) })
     ] });

package/dist/components/SettingsLayout/index.js

@@ -2,7 +2,7 @@
 import {
   SettingsLayout,
   SettingsRow
-} from "../../chunk-WIHNK7RT.js";
+} from "../../chunk-Z4FCC42C.js";
 export {
   SettingsLayout,
   SettingsRow

package/dist/index.d.ts

@@ -199,6 +199,8 @@ interface SettingsLayoutProps extends Omit<React.HTMLAttributes<HTMLDivElement>,
     description?: React.ReactNode;
     /** Accessible name of the section navigation. */
     navLabel?: string;
+    /** Pinned to the bottom of the section sidebar (and the phone menu) while the items scroll, e.g. `v1.2.0 · Updated 21 Oct 2026`. */
+    navFooter?: React.ReactNode;
 }
 interface SettingsLayoutSectionProps extends Omit<React.HTMLAttributes<HTMLElement>, 'title'> {
     title?: React.ReactNode;

package/dist/index.js

@@ -18,7 +18,7 @@ import {
 import {
   SettingsLayout,
   SettingsRow
-} from "./chunk-WIHNK7RT.js";
+} from "./chunk-Z4FCC42C.js";
 import {
   SettingsPage
 } from "./chunk-27N33TGN.js";
@@ -31,12 +31,6 @@ import {
 import {
   CheckoutPage
 } from "./chunk-CZR6NZDH.js";
-import {
-  DashboardPage
-} from "./chunk-33Z2ZPO7.js";
-import {
-  StatCard
-} from "./chunk-INKX2GYA.js";
 import {
   ErrorSummary,
   useFormErrors
@@ -45,14 +39,20 @@ import {
   FilterBar
 } from "./chunk-Z6VMCMSW.js";
 import {
-  InfoList
-} from "./chunk-WPNT5JOU.js";
+  DashboardPage
+} from "./chunk-33Z2ZPO7.js";
+import {
+  StatCard
+} from "./chunk-INKX2GYA.js";
 import {
   ListDetail
 } from "./chunk-5JU6HUVJ.js";
 import {
   NotificationItem
 } from "./chunk-5IORYY2L.js";
+import {
+  InfoList
+} from "./chunk-WPNT5JOU.js";
 import {
   ActivityFeed
 } from "./chunk-HYC5N5MO.js";
@@ -71,10 +71,6 @@ import {
 import {
   AuthCard
 } from "./chunk-HMJRSNJD.js";
-import {
-  BentoGrid,
-  BentoTile
-} from "./chunk-WZTDCJYP.js";
 import {
   ChatPage
 } from "./chunk-64PSI75E.js";
@@ -87,6 +83,10 @@ import {
   groupByDay,
   usePageMessages
 } from "./chunk-7QCJC2DV.js";
+import {
+  BentoGrid,
+  BentoTile
+} from "./chunk-WZTDCJYP.js";
 export {
   ActivityFeed,
   ActivityPage,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nexub/patterns",
-  "version": "2.2.0",
+  "version": "2.3.1",
   "description": "Composite UI patterns for Nexub Design System — pre-built, production-ready layouts and widgets built on @nexub/react.",
   "type": "module",
   "license": "MIT",
@@ -36,9 +36,9 @@
   "peerDependencies": {
     "react": ">=18 <20",
     "react-dom": ">=18 <20",
-    "@nexub/icons": "^2.2.0",
-    "@nexub/react": "^2.2.0",
-    "@nexub/tokens": "^2.2.0"
+    "@nexub/icons": "^2.3.1",
+    "@nexub/react": "^2.3.1",
+    "@nexub/tokens": "^2.3.1"
   },
   "peerDependenciesMeta": {
     "@nexub/icons": {
@@ -59,9 +59,9 @@
     "typescript": "^5.9.3",
     "vite": "^7.3.7",
     "vitest": "^5.0.5",
-    "@nexub/icons": "2.2.0",
-    "@nexub/react": "2.2.0",
-    "@nexub/tokens": "2.2.0"
+    "@nexub/icons": "2.3.1",
+    "@nexub/react": "2.3.1",
+    "@nexub/tokens": "2.3.1"
   },
   "scripts": {
     "build": "tsup",