@nexub/patterns 1.6.0 → 1.8.0

package/dist/{chunk-ZV73WS4X.js → chunk-5IORYY2L.js}

@@ -20,6 +20,7 @@ var NotificationItem = React.forwardRef(
           "span",
           {
             className: "mt-1.5 h-2 w-2 shrink-0 rounded-full bg-[var(--color-primary)]",
+            role: "img",
             "aria-label": "Unread"
           }
         ),

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

@@ -14,6 +14,7 @@ import {
   Logo,
   TopNav,
   cn,
+  useNexubMessages,
   useTheme
 } from "@nexub/react";
 import { Building2, ChevronDown, Moon, Search, Sun } from "@nexub/icons";
@@ -26,6 +27,7 @@ function HeaderSearch({
   items,
   onSearch
 }) {
+  const t = useNexubMessages();
   const [open, setOpen] = React.useState(false);
   const [query, setQuery] = React.useState("");
   const [results, setResults] = React.useState([]);
@@ -88,11 +90,7 @@ function HeaderSearch({
     "aria-haspopup": "dialog"
   };
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsxs("span", { id: hintId, className: "sr-only", children: [
-      "Keyboard shortcut: ",
-      isMac ? "Command" : "Control",
-      " K"
-    ] }),
+    /* @__PURE__ */ jsx("span", { id: hintId, className: "sr-only", children: t.keyboardShortcut(`${isMac ? t.commandKey : t.controlKey} K`) }),
     /* @__PURE__ */ jsxs(
       "button",
       {
@@ -118,8 +116,8 @@ function HeaderSearch({
         children: [
           /* @__PURE__ */ jsx(CommandPalette.Input, { placeholder, value: query, onValueChange: setQuery }),
           /* @__PURE__ */ jsxs(CommandPalette.List, { children: [
-            loading && /* @__PURE__ */ jsx("div", { role: "status", className: "px-3 py-2 text-sm text-[var(--color-on-surface-muted)]", children: "Searching\u2026" }),
-            !loading && /* @__PURE__ */ jsx(CommandPalette.Empty, { children: failed ? "Search failed. Try again." : query ? `No results for \u201C${query}\u201D` : "Type to search" }),
+            loading && /* @__PURE__ */ jsx("div", { role: "status", className: "px-3 py-2 text-sm text-[var(--color-on-surface-muted)]", children: t.searching }),
+            !loading && /* @__PURE__ */ jsx(CommandPalette.Empty, { children: failed ? t.searchFailed : query ? t.noResultsFor(query) : t.typeToSearch }),
             groups.map((group) => /* @__PURE__ */ jsx(CommandPalette.Group, { heading: group.label, children: group.items.map((item) => /* @__PURE__ */ jsxs(
               CommandPalette.Item,
               {
@@ -149,6 +147,7 @@ function OrgSwitcher({
   currentOrgId,
   onOrgChange
 }) {
+  const t = useNexubMessages();
   const current = orgs.find((o) => o.id === currentOrgId) ?? orgs[0];
   if (!current) return null;
   if (orgs.length === 1) {
@@ -161,7 +160,7 @@ function OrgSwitcher({
         "button",
         {
           type: "button",
-          "aria-label": `${current.name}, switch organization`,
+          "aria-label": t.switchOrganization(current.name),
           title: current.name,
           className: "nx-state-layer inline-flex h-9 min-w-0 shrink-0 items-center gap-1 rounded-shape-control px-2 text-sm sm:shrink font-medium text-[var(--color-on-surface)]",
           children: [
@@ -172,24 +171,32 @@ function OrgSwitcher({
         }
       ) }),
       /* @__PURE__ */ jsx(DropdownMenu.Portal, { children: /* @__PURE__ */ jsxs(DropdownMenu.Content, { align: "end", className: "max-w-[calc(100vw-1rem)]", children: [
-        /* @__PURE__ */ jsx(DropdownMenu.Label, { children: "Organizations" }),
+        /* @__PURE__ */ jsx(DropdownMenu.Label, { children: t.organizations }),
         /* @__PURE__ */ jsx(DropdownMenu.RadioGroup, { value: current.id, onValueChange: (id) => onOrgChange?.(id), children: orgs.map((org) => /* @__PURE__ */ jsx(DropdownMenu.RadioItem, { value: org.id, children: /* @__PURE__ */ jsx("span", { className: "truncate", children: org.name }) }, org.id)) })
       ] }) })
     ] })
   );
 }
 function ThemeSwitch() {
+  const t = useNexubMessages();
   const { resolvedTheme, setTheme } = useTheme();
   const dark = resolvedTheme === "dark";
-  return /* @__PURE__ */ jsx(IconButton, { label: dark ? "Switch to light theme" : "Switch to dark theme", onClick: () => setTheme(dark ? "light" : "dark"), children: dark ? /* @__PURE__ */ jsx(Sun, { size: "md", "aria-hidden": "true" }) : /* @__PURE__ */ jsx(Moon, { size: "md", "aria-hidden": "true" }) });
+  return /* @__PURE__ */ jsx(IconButton, { label: dark ? t.switchToLightTheme : t.switchToDarkTheme, onClick: () => setTheme(dark ? "light" : "dark"), children: dark ? /* @__PURE__ */ jsx(Sun, { size: "md", "aria-hidden": "true" }) : /* @__PURE__ */ jsx(Moon, { size: "md", "aria-hidden": "true" }) });
 }
-var GLASS_LABELS = { clear: "Clear", balanced: "Balanced", tinted: "Tinted", off: "Solid" };
+var GLASS_MODES = ["clear", "balanced", "tinted", "off"];
 function GlassItems() {
+  const t = useNexubMessages();
   const { glass, setGlass } = useTheme();
+  const labels = {
+    clear: t.glassClear,
+    balanced: t.glassBalanced,
+    tinted: t.glassTinted,
+    off: t.glassSolid
+  };
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(DropdownMenu.Separator, {}),
-    /* @__PURE__ */ jsx(DropdownMenu.Label, { children: "Glass" }),
-    /* @__PURE__ */ jsx(DropdownMenu.RadioGroup, { value: glass, onValueChange: (v) => setGlass(v), children: Object.keys(GLASS_LABELS).map((mode) => /* @__PURE__ */ jsx(DropdownMenu.RadioItem, { value: mode, onSelect: (e) => e.preventDefault(), children: GLASS_LABELS[mode] }, mode)) })
+    /* @__PURE__ */ jsx(DropdownMenu.Label, { children: t.glass }),
+    /* @__PURE__ */ jsx(DropdownMenu.RadioGroup, { value: glass, onValueChange: (v) => setGlass(v), children: GLASS_MODES.map((mode) => /* @__PURE__ */ jsx(DropdownMenu.RadioItem, { value: mode, onSelect: (e) => e.preventDefault(), children: labels[mode] }, mode)) })
   ] });
 }
 function AccountMenu({
@@ -201,6 +208,7 @@ function AccountMenu({
   accountMenuItems,
   glassControl
 }) {
+  const t = useNexubMessages();
   const [open, setOpen] = React.useState(false);
   const [signingOut, setSigningOut] = React.useState(false);
   const signOut = (e) => {
@@ -214,23 +222,23 @@ function AccountMenu({
   };
   const link = (href, label) => /* @__PURE__ */ jsx(DropdownMenu.Item, { asChild: true, children: /* @__PURE__ */ jsx("a", { href, children: label }) });
   const legal = (privacyHref || termsHref) && /* @__PURE__ */ jsxs(Fragment, { children: [
-    privacyHref && link(privacyHref, "Privacy policy"),
-    termsHref && link(termsHref, "Terms of service")
+    privacyHref && link(privacyHref, t.privacyPolicy),
+    termsHref && link(termsHref, t.termsOfService)
   ] });
   const last = (accountMenuItems || onSignOut) && /* @__PURE__ */ jsxs(Fragment, { children: [
     accountMenuItems,
-    onSignOut && /* @__PURE__ */ jsx(DropdownMenu.Item, { disabled: signingOut, onSelect: signOut, children: signingOut ? "Signing out\u2026" : "Sign out" })
+    onSignOut && /* @__PURE__ */ jsx(DropdownMenu.Item, { disabled: signingOut, onSelect: signOut, children: signingOut ? t.signingOut : t.signOut })
   ] });
   return (
     // modal={false}: Radix's modal menu injects a <style> scroll lock (strict CSP).
     /* @__PURE__ */ jsxs(DropdownMenu.Root, { open, onOpenChange: setOpen, modal: false, children: [
-      /* @__PURE__ */ jsx(DropdownMenu.Trigger, { asChild: true, children: /* @__PURE__ */ jsx("button", { type: "button", "aria-label": `Account: ${user.name}`, className: "ms-1 shrink-0 rounded-full", children: /* @__PURE__ */ jsx(Avatar, { name: user.name, src: user.avatarUrl, size: "sm", "aria-hidden": "true" }) }) }),
+      /* @__PURE__ */ jsx(DropdownMenu.Trigger, { asChild: true, children: /* @__PURE__ */ jsx("button", { type: "button", "aria-label": t.accountMenu(user.name), className: "ms-1 shrink-0 rounded-full", children: /* @__PURE__ */ jsx(Avatar, { name: user.name, src: user.avatarUrl, size: "sm", "aria-hidden": "true" }) }) }),
       /* @__PURE__ */ jsx(DropdownMenu.Portal, { children: /* @__PURE__ */ jsxs(DropdownMenu.Content, { align: "end", className: "w-72 max-w-[calc(100vw-1rem)]", children: [
         /* @__PURE__ */ jsxs(DropdownMenu.Label, { className: "flex flex-col gap-0.5 py-2", children: [
           /* @__PURE__ */ jsx("span", { className: "truncate text-title-sm text-[var(--color-on-surface)]", children: user.name }),
           user.email && /* @__PURE__ */ jsx("span", { className: "truncate text-body-sm text-[var(--color-on-surface-muted)]", children: user.email })
         ] }),
-        accountHref && link(accountHref, "Manage your Nexub Account"),
+        accountHref && link(accountHref, t.manageAccount),
         glassControl && /* @__PURE__ */ jsx(GlassItems, {}),
         legal && /* @__PURE__ */ jsx(DropdownMenu.Separator, {}),
         legal,
@@ -262,10 +270,12 @@ var AppHeader = React.forwardRef(
     accountMenuItems,
     surface = "solid",
     condense = false,
+    position = "fixed",
     className,
     ...props
   }, ref) => {
-    const placeholder = searchPlaceholder ?? (productName ? `Search ${productName}` : "Search");
+    const t = useNexubMessages();
+    const placeholder = searchPlaceholder ?? (productName ? t.searchProduct(productName) : t.search);
     return /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsx(
         TopNav.Root,
@@ -274,7 +284,13 @@ var AppHeader = React.forwardRef(
           role: "banner",
           surface,
           "data-condense": condense ? "" : void 0,
-          className: cn("fixed inset-x-0 top-0 h-[var(--app-header-height,64px)] px-2 sm:px-4", className),
+          className: cn(
+            "h-[var(--app-header-height,64px)] px-2 sm:px-4",
+            // TopNav.Root is sticky by default.
+            position === "fixed" && "fixed inset-x-0 top-0",
+            position === "static" && "static",
+            className
+          ),
           ...props,
           children: /* @__PURE__ */ jsxs("div", { className: "flex w-full min-w-0 items-center gap-1 sm:gap-2", children: [
             menu && /* @__PURE__ */ jsx("div", { className: "flex shrink-0 md:hidden", children: menu }),
@@ -293,7 +309,7 @@ var AppHeader = React.forwardRef(
               }
             ),
             /* @__PURE__ */ jsx("div", { className: "ms-auto flex shrink-0 md:ms-0 md:min-w-0 md:flex-1 md:justify-center md:px-2 lg:px-4", children: (onSearch || searchItems) && /* @__PURE__ */ jsx(HeaderSearch, { placeholder, items: searchItems, onSearch }) }),
-            /* @__PURE__ */ jsxs("nav", { "aria-label": "Account and apps", className: "flex shrink-0 items-center gap-0.5 sm:gap-1", children: [
+            /* @__PURE__ */ jsxs("nav", { "aria-label": t.accountAndApps, className: "flex shrink-0 items-center gap-0.5 sm:gap-1", children: [
               orgs.length > 0 && /* @__PURE__ */ jsx(OrgSwitcher, { orgs, currentOrgId, onOrgChange }),
               showThemeSwitch && /* @__PURE__ */ jsx(ThemeSwitch, {}),
               apps && /* @__PURE__ */ jsx(AppLauncher, { apps, surface, onNavigate: onNavigate && ((app) => onNavigate(app.href)) }),
@@ -313,7 +329,7 @@ var AppHeader = React.forwardRef(
           ] })
         }
       ),
-      /* @__PURE__ */ jsx("div", { "aria-hidden": "true", className: "h-[var(--app-header-height,64px)] shrink-0" })
+      position === "fixed" && /* @__PURE__ */ jsx("div", { "aria-hidden": "true", className: "h-[var(--app-header-height,64px)] shrink-0" })
     ] });
   }
 );

package/dist/{chunk-JTIMCXPS.js → chunk-HYC5N5MO.js}

@@ -9,7 +9,6 @@ var Root = React.forwardRef(
     "ul",
     {
       ref,
-      role: "feed",
       "aria-label": "Activity feed",
       className: cn("flex flex-col divide-y divide-[var(--color-outline-variant)]", className),
       ...props,

package/dist/{chunk-K5EFLRKU.js → chunk-INKX2GYA.js}

@@ -11,13 +11,15 @@ var StatCard = React.forwardRef(
     value,
     delta,
     deltaType = "neutral",
+    sentiment,
     icon,
     description,
     animate = false,
     className,
     ...props
   }, ref) => {
-    const deltaColor = deltaType === "increase" ? "text-[var(--color-success)]" : deltaType === "decrease" ? "text-[var(--color-error)]" : "text-[var(--color-on-surface-muted)]";
+    const tone = sentiment ?? (deltaType === "increase" ? "positive" : deltaType === "decrease" ? "negative" : "neutral");
+    const deltaColor = tone === "positive" ? "text-[var(--color-success)]" : tone === "negative" ? "text-[var(--color-error)]" : "text-[var(--color-on-surface-muted)]";
     const DeltaIcon = deltaType === "increase" ? TrendingUp : deltaType === "decrease" ? TrendingDown : Minus;
     return /* @__PURE__ */ jsxs(
       "div",
@@ -40,6 +42,7 @@ var StatCard = React.forwardRef(
               {
                 className: cn("inline-flex items-center gap-1 text-xs font-medium", deltaColor),
                 "data-delta-type": deltaType,
+                "data-sentiment": tone,
                 children: [
                   /* @__PURE__ */ jsx(DeltaIcon, { size: "xs", "aria-hidden": "true" }),
                   delta

package/dist/components/ActivityFeed/index.js

@@ -1,7 +1,7 @@
 'use client';
 import {
   ActivityFeed
-} from "../../chunk-JTIMCXPS.js";
+} from "../../chunk-HYC5N5MO.js";
 export {
   ActivityFeed
 };

package/dist/components/AppHeader/index.js

@@ -1,7 +1,7 @@
 'use client';
 import {
   AppHeader
-} from "../../chunk-LAYYOVIK.js";
+} from "../../chunk-6PV4NM55.js";
 import "../../chunk-H5UTW5ML.js";
 export {
   AppHeader

package/dist/components/NotificationItem/index.js

@@ -1,7 +1,7 @@
 'use client';
 import {
   NotificationItem
-} from "../../chunk-ZV73WS4X.js";
+} from "../../chunk-5IORYY2L.js";
 export {
   NotificationItem
 };

package/dist/components/StatCard/index.js

@@ -1,7 +1,7 @@
 'use client';
 import {
   StatCard
-} from "../../chunk-K5EFLRKU.js";
+} from "../../chunk-INKX2GYA.js";
 export {
   StatCard
 };

package/dist/index.d.ts

@@ -29,7 +29,14 @@ interface StatCardProps extends React.HTMLAttributes<HTMLDivElement> {
     label: string;
     value: React.ReactNode;
     delta?: string;
+    /** Direction of the change: sets the arrow (and, by default, the colour). */
     deltaType?: 'increase' | 'decrease' | 'neutral';
+    /**
+     * Whether the change is good or bad, independent of its direction — e.g. churn going
+     * down is `deltaType="decrease"` + `sentiment="positive"`.
+     * @default derived from `deltaType` (increase → positive, decrease → negative)
+     */
+    sentiment?: 'positive' | 'negative' | 'neutral';
     icon?: React.ReactNode;
     description?: string;
     /** Roll digits when a number/string `value` changes (NumberTicker); announced politely. */
@@ -268,10 +275,17 @@ interface AppHeaderProps extends Omit<React.HTMLAttributes<HTMLElement>, 'childr
     scrollEdge?: 'soft' | 'hard';
     /** Shrink 64 → 52px and lift onto elevation 1 over the first 64px of page scroll (CSS scroll timeline; static where unsupported). */
     condense?: boolean;
+    /**
+     * `fixed` pins it to the viewport and renders a spacer after it. `sticky` and `static`
+     * keep it in flow (no spacer), for layouts, embeds and previews.
+     * @default 'fixed'
+     */
+    position?: 'fixed' | 'sticky' | 'static';
 }
 /**
- * The one top header every Nexub app shares. Fixed to the top; renders a
- * spacer of `--app-header-height` after itself, so content starts below it.
+ * The one top header every Nexub app shares. Fixed to the top by default and
+ * renders a spacer of `--app-header-height` after itself, so content starts
+ * below it; `position="sticky" | "static"` keeps it in flow without a spacer.
  */
 declare const AppHeader: React.ForwardRefExoticComponent<AppHeaderProps & React.RefAttributes<HTMLElement>>;
 

package/dist/index.js

@@ -1,19 +1,20 @@
 'use client';
 import {
-  InfoList
-} from "./chunk-WPNT5JOU.js";
+  UserCard
+} from "./chunk-7NYGYETG.js";
 import {
-  StepIndicator
-} from "./chunk-L456OB3Q.js";
+  ErrorSummary,
+  useFormErrors
+} from "./chunk-RWPFCNMJ.js";
 import {
-  FilterBar
-} from "./chunk-Z6VMCMSW.js";
+  InfoList
+} from "./chunk-WPNT5JOU.js";
 import {
   ListDetail
 } from "./chunk-5JU6HUVJ.js";
 import {
   NotificationItem
-} from "./chunk-ZV73WS4X.js";
+} from "./chunk-5IORYY2L.js";
 import {
   PlanCard
 } from "./chunk-YB7G4YBU.js";
@@ -26,16 +27,16 @@ import {
 } from "./chunk-U3FT7XAU.js";
 import {
   StatCard
-} from "./chunk-K5EFLRKU.js";
+} from "./chunk-INKX2GYA.js";
 import {
-  UserCard
-} from "./chunk-7NYGYETG.js";
+  StepIndicator
+} from "./chunk-L456OB3Q.js";
 import {
   ActivityFeed
-} from "./chunk-JTIMCXPS.js";
+} from "./chunk-HYC5N5MO.js";
 import {
   AppHeader
-} from "./chunk-LAYYOVIK.js";
+} from "./chunk-6PV4NM55.js";
 import "./chunk-VYMTTYPR.js";
 import {
   AppLauncher
@@ -51,9 +52,8 @@ import {
   Conversation
 } from "./chunk-WRP73TXG.js";
 import {
-  ErrorSummary,
-  useFormErrors
-} from "./chunk-RWPFCNMJ.js";
+  FilterBar
+} from "./chunk-Z6VMCMSW.js";
 export {
   ActivityFeed,
   AppHeader,

package/package.json

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