@nexub/patterns 1.9.0 → 2.0.0

package/dist/{chunk-6PV4NM55.js → chunk-2WKGBINE.js}

@@ -1,7 +1,7 @@
 'use client';
 import {
   AppLauncher
-} from "./chunk-H5UTW5ML.js";
+} from "./chunk-BDCVWAH7.js";
 
 // src/components/AppHeader/AppHeader.tsx
 import * as React from "react";

package/dist/chunk-BDCVWAH7.js

@@ -0,0 +1,123 @@
+'use client';
+
+// src/components/AppLauncher/AppLauncher.tsx
+import * as React from "react";
+import { Avatar, IconButton, Popover, cn } from "@nexub/react";
+import { Apps } from "@nexub/icons";
+import { jsx, jsxs } from "react/jsx-runtime";
+var COLUMNS = 3;
+function groupApps(apps) {
+  const sections = [];
+  for (const app of apps) {
+    const s = sections.find((x) => x.group === app.group);
+    if (s) s.items.push(app);
+    else sections.push({ group: app.group, items: [app], firstRow: 0 });
+  }
+  let row = 0;
+  for (const s of sections) {
+    s.firstRow = row;
+    row += Math.ceil(s.items.length / COLUMNS);
+  }
+  return sections;
+}
+function AppIcon({ app }) {
+  const [failed, setFailed] = React.useState(false);
+  if (app.icon && !failed) {
+    return /* @__PURE__ */ jsx(
+      "img",
+      {
+        src: app.icon,
+        alt: "",
+        width: 40,
+        height: 40,
+        className: "h-10 w-10 rounded-[12px] object-cover",
+        onError: () => setFailed(true)
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(Avatar, { name: app.name, size: "md", className: "rounded-[12px]", "aria-hidden": "true" });
+}
+var AppLauncher = React.forwardRef(
+  ({ apps, onNavigate, surface = "solid", label = "Nexub apps", className }, ref) => {
+    const [open, setOpen] = React.useState(false);
+    const listRef = React.useRef(null);
+    if (apps.length === 0) return null;
+    const sections = groupApps(apps);
+    const onOpenAutoFocus = (e) => {
+      e.preventDefault();
+      const list = listRef.current;
+      (list?.querySelector("a[aria-current]") ?? list?.querySelector("a"))?.focus();
+    };
+    const onKeyDown = (e) => {
+      const links = [...e.currentTarget.querySelectorAll("a")];
+      const i = links.indexOf(document.activeElement);
+      if (i < 0) return;
+      const at = (a) => [Number(a.dataset.row), Number(a.dataset.col)];
+      const vertical = (dir) => {
+        const [row, col] = at(links[i]);
+        const next = links.filter((a) => at(a)[0] === row + dir);
+        return next.length ? links.indexOf(next[Math.min(col, next.length - 1)]) : i;
+      };
+      const target = {
+        ArrowRight: () => i + 1,
+        ArrowLeft: () => i - 1,
+        ArrowDown: () => vertical(1),
+        ArrowUp: () => vertical(-1),
+        Home: () => 0,
+        End: () => links.length - 1
+      };
+      const go = target[e.key];
+      if (!go) return;
+      e.preventDefault();
+      links[Math.min(links.length - 1, Math.max(0, go()))]?.focus();
+    };
+    const onClick = (e, app) => {
+      const plain = e.button === 0 && !e.metaKey && !e.ctrlKey && !e.shiftKey && !e.altKey;
+      if (onNavigate && plain) {
+        e.preventDefault();
+        onNavigate(app);
+      }
+      if (plain) setOpen(false);
+    };
+    return /* @__PURE__ */ jsxs(Popover.Root, { open, onOpenChange: setOpen, children: [
+      /* @__PURE__ */ jsx(Popover.Trigger, { asChild: true, children: /* @__PURE__ */ jsx(IconButton, { ref, label, className, children: /* @__PURE__ */ jsx(Apps, { size: "md", "aria-hidden": "true" }) }) }),
+      /* @__PURE__ */ jsx(Popover.Portal, { children: /* @__PURE__ */ jsx(
+        Popover.Content,
+        {
+          align: "end",
+          surface,
+          "aria-label": label,
+          onOpenAutoFocus,
+          className: "w-80 max-w-[calc(100vw-2rem)] p-2",
+          children: /* @__PURE__ */ jsx("div", { ref: listRef, className: "flex flex-col gap-2", onKeyDown, children: sections.map(({ group, items, firstRow }) => /* @__PURE__ */ jsxs("div", { children: [
+            group && /* @__PURE__ */ jsx("h3", { className: "px-2 py-1 text-label-sm text-[var(--color-on-surface-variant)]", children: group }),
+            /* @__PURE__ */ jsx("ul", { className: "grid grid-cols-3 gap-1", "aria-label": group, children: items.map((app, n) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(
+              "a",
+              {
+                href: app.href,
+                "aria-current": app.current ? "page" : void 0,
+                "data-row": firstRow + Math.floor(n / COLUMNS),
+                "data-col": n % COLUMNS,
+                onClick: (e) => onClick(e, app),
+                className: cn(
+                  "flex flex-col items-center gap-1.5 rounded-[8px] px-1 py-3 text-center text-xs text-[var(--color-on-surface)] transition-colors",
+                  "hover:bg-[color-mix(in_srgb,var(--color-on-surface)_8%,transparent)]",
+                  app.current && "bg-[var(--color-surface-container-low)] font-semibold"
+                ),
+                children: [
+                  /* @__PURE__ */ jsx(AppIcon, { app }),
+                  /* @__PURE__ */ jsx("span", { className: "w-full truncate", children: app.name })
+                ]
+              }
+            ) }, app.id)) })
+          ] }, group ?? "")) })
+        }
+      ) })
+    ] });
+  }
+);
+AppLauncher.displayName = "AppLauncher";
+
+export {
+  AppLauncher
+};

package/dist/components/AppHeader/index.js

@@ -1,8 +1,8 @@
 'use client';
 import {
   AppHeader
-} from "../../chunk-6PV4NM55.js";
-import "../../chunk-H5UTW5ML.js";
+} from "../../chunk-2WKGBINE.js";
+import "../../chunk-BDCVWAH7.js";
 export {
   AppHeader
 };

package/dist/components/AppLauncher/index.js

@@ -2,7 +2,7 @@
 import "../../chunk-VYMTTYPR.js";
 import {
   AppLauncher
-} from "../../chunk-H5UTW5ML.js";
+} from "../../chunk-BDCVWAH7.js";
 export {
   AppLauncher
 };

package/dist/index.d.ts

@@ -156,6 +156,8 @@ interface AppLauncherApp {
     href: string;
     /** Tile image URL (e.g. `@nexub/brand/app-icon-account.svg`). Falls back to initials. */
     icon?: string;
+    /** Section heading, e.g. "People & HR". Apps with the same group sit together, in order of first appearance. */
+    group?: string;
     /** The app the user is in now. */
     current?: boolean;
 }

package/dist/index.js

@@ -1,13 +1,19 @@
 'use client';
+import {
+  StepIndicator
+} from "./chunk-L456OB3Q.js";
+import {
+  UserCard
+} from "./chunk-7NYGYETG.js";
+import {
+  FilterBar
+} from "./chunk-Z6VMCMSW.js";
 import {
   InfoList
 } from "./chunk-WPNT5JOU.js";
 import {
   ListDetail
 } from "./chunk-5JU6HUVJ.js";
-import {
-  FilterBar
-} from "./chunk-Z6VMCMSW.js";
 import {
   NotificationItem
 } from "./chunk-5IORYY2L.js";
@@ -24,36 +30,30 @@ import {
 import {
   StatCard
 } from "./chunk-INKX2GYA.js";
-import {
-  StepIndicator
-} from "./chunk-L456OB3Q.js";
-import {
-  UserCard
-} from "./chunk-7NYGYETG.js";
 import {
   ActivityFeed
 } from "./chunk-HYC5N5MO.js";
 import {
   AppHeader
-} from "./chunk-6PV4NM55.js";
+} from "./chunk-2WKGBINE.js";
 import "./chunk-VYMTTYPR.js";
 import {
   AppLauncher
-} from "./chunk-H5UTW5ML.js";
+} from "./chunk-BDCVWAH7.js";
 import {
   AuthCard
 } from "./chunk-HMJRSNJD.js";
 import {
-  ErrorSummary,
-  useFormErrors
-} from "./chunk-RWPFCNMJ.js";
+  BentoGrid,
+  BentoTile
+} from "./chunk-WZTDCJYP.js";
 import {
   Conversation
 } from "./chunk-WRP73TXG.js";
 import {
-  BentoGrid,
-  BentoTile
-} from "./chunk-WZTDCJYP.js";
+  ErrorSummary,
+  useFormErrors
+} from "./chunk-RWPFCNMJ.js";
 export {
   ActivityFeed,
   AppHeader,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nexub/patterns",
-  "version": "1.9.0",
+  "version": "2.0.0",
   "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": "^1.9.0",
-    "@nexub/react": "^1.9.0",
-    "@nexub/tokens": "^1.9.0"
+    "@nexub/icons": "^2.0.0",
+    "@nexub/react": "^2.0.0",
+    "@nexub/tokens": "^2.0.0"
   },
   "peerDependenciesMeta": {
     "@nexub/icons": {
@@ -59,9 +59,9 @@
     "typescript": "^5.9.3",
     "vite": "^7.3.7",
     "vitest": "^5.0.5",
-    "@nexub/icons": "1.9.0",
-    "@nexub/react": "1.9.0",
-    "@nexub/tokens": "1.9.0"
+    "@nexub/icons": "2.0.0",
+    "@nexub/react": "2.0.0",
+    "@nexub/tokens": "2.0.0"
   },
   "scripts": {
     "build": "tsup",

package/dist/chunk-H5UTW5ML.js

@@ -1,97 +0,0 @@
-'use client';
-
-// src/components/AppLauncher/AppLauncher.tsx
-import * as React from "react";
-import { Avatar, IconButton, Popover, cn } from "@nexub/react";
-import { Apps } from "@nexub/icons";
-import { jsx, jsxs } from "react/jsx-runtime";
-var COLUMNS = 3;
-function AppIcon({ app }) {
-  const [failed, setFailed] = React.useState(false);
-  if (app.icon && !failed) {
-    return /* @__PURE__ */ jsx(
-      "img",
-      {
-        src: app.icon,
-        alt: "",
-        width: 40,
-        height: 40,
-        className: "h-10 w-10 rounded-[12px] object-cover",
-        onError: () => setFailed(true)
-      }
-    );
-  }
-  return /* @__PURE__ */ jsx(Avatar, { name: app.name, size: "md", className: "rounded-[12px]", "aria-hidden": "true" });
-}
-var AppLauncher = React.forwardRef(
-  ({ apps, onNavigate, surface = "solid", label = "Nexub apps", className }, ref) => {
-    const [open, setOpen] = React.useState(false);
-    const listRef = React.useRef(null);
-    if (apps.length === 0) return null;
-    const onOpenAutoFocus = (e) => {
-      e.preventDefault();
-      const list = listRef.current;
-      (list?.querySelector("a[aria-current]") ?? list?.querySelector("a"))?.focus();
-    };
-    const onKeyDown = (e) => {
-      const links = [...e.currentTarget.querySelectorAll("a")];
-      const i = links.indexOf(document.activeElement);
-      if (i < 0) return;
-      const step = {
-        ArrowRight: 1,
-        ArrowLeft: -1,
-        ArrowDown: COLUMNS,
-        ArrowUp: -COLUMNS,
-        Home: -i,
-        End: links.length - 1 - i
-      };
-      const delta = step[e.key];
-      if (delta === void 0) return;
-      e.preventDefault();
-      links[Math.min(links.length - 1, Math.max(0, i + delta))]?.focus();
-    };
-    const onClick = (e, app) => {
-      const plain = e.button === 0 && !e.metaKey && !e.ctrlKey && !e.shiftKey && !e.altKey;
-      if (onNavigate && plain) {
-        e.preventDefault();
-        onNavigate(app);
-      }
-      if (plain) setOpen(false);
-    };
-    return /* @__PURE__ */ jsxs(Popover.Root, { open, onOpenChange: setOpen, children: [
-      /* @__PURE__ */ jsx(Popover.Trigger, { asChild: true, children: /* @__PURE__ */ jsx(IconButton, { ref, label, className, children: /* @__PURE__ */ jsx(Apps, { size: "md", "aria-hidden": "true" }) }) }),
-      /* @__PURE__ */ jsx(Popover.Portal, { children: /* @__PURE__ */ jsx(
-        Popover.Content,
-        {
-          align: "end",
-          surface,
-          "aria-label": label,
-          onOpenAutoFocus,
-          className: "w-80 max-w-[calc(100vw-2rem)] p-2",
-          children: /* @__PURE__ */ jsx("ul", { ref: listRef, className: "grid grid-cols-3 gap-1", onKeyDown, children: apps.map((app) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(
-            "a",
-            {
-              href: app.href,
-              "aria-current": app.current ? "page" : void 0,
-              onClick: (e) => onClick(e, app),
-              className: cn(
-                "flex flex-col items-center gap-1.5 rounded-[8px] px-1 py-3 text-center text-xs text-[var(--color-on-surface)] transition-colors",
-                "hover:bg-[color-mix(in_srgb,var(--color-on-surface)_8%,transparent)]",
-                app.current && "bg-[var(--color-surface-container-low)] font-semibold"
-              ),
-              children: [
-                /* @__PURE__ */ jsx(AppIcon, { app }),
-                /* @__PURE__ */ jsx("span", { className: "w-full truncate", children: app.name })
-              ]
-            }
-          ) }, app.id)) })
-        }
-      ) })
-    ] });
-  }
-);
-AppLauncher.displayName = "AppLauncher";
-
-export {
-  AppLauncher
-};