@nexub/patterns 1.1.0 → 1.2.0

package/dist/chunk-QSJUE24Y.js

@@ -0,0 +1,112 @@
+'use client';
+
+// src/components/SettingsLayout/SettingsLayout.tsx
+import * as React from "react";
+import { Card, IconButton, Sheet, Sidebar, TopNav, cn } from "@nexub/react";
+import { Menu } from "@nexub/icons";
+import { jsx, jsxs } from "react/jsx-runtime";
+var isPlainClick = (e) => e.button === 0 && !e.metaKey && !e.ctrlKey && !e.shiftKey && !e.altKey;
+function SectionNav({
+  items,
+  activeId,
+  onChoose,
+  label,
+  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
+  )) }) });
+}
+var Root = React.forwardRef(
+  ({ items, activeId, onSelect, logo, actions, title, description, navLabel = "Settings", className, children, ...props }, ref) => {
+    const [menuOpen, setMenuOpen] = React.useState(false);
+    const onChoose = (e, item) => {
+      if (!isPlainClick(e)) return;
+      if (onSelect) {
+        e.preventDefault();
+        onSelect(item);
+      }
+      setMenuOpen(false);
+    };
+    return /* @__PURE__ */ jsxs("div", { ref, className: cn("flex min-h-screen flex-col bg-[var(--color-bg-default)]", className), ...props, children: [
+      /* @__PURE__ */ jsxs(TopNav.Root, { children: [
+        /* @__PURE__ */ jsx(IconButton, { label: `Open ${navLabel.toLowerCase()} menu`, className: "-ml-2 md:hidden", onClick: () => setMenuOpen(true), children: /* @__PURE__ */ jsx(Menu, { size: "md", "aria-hidden": "true" }) }),
+        logo && /* @__PURE__ */ jsx(TopNav.Logo, { className: "min-w-0", children: logo }),
+        actions && /* @__PURE__ */ jsx(TopNav.Actions, { children: actions })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-1", children: [
+        /* @__PURE__ */ jsx(
+          SectionNav,
+          {
+            items,
+            activeId,
+            onChoose,
+            label: navLabel,
+            className: "sticky top-[var(--size-nav-header,64px)] hidden h-[calc(100vh-var(--size-nav-header,64px))] shrink-0 md:flex"
+          }
+        ),
+        /* @__PURE__ */ jsx("main", { className: "min-w-0 flex-1 px-4 py-6 md:px-8 md:py-10", children: /* @__PURE__ */ jsxs("div", { className: "mx-auto flex w-full max-w-3xl flex-col gap-6", children: [
+          (title || description) && /* @__PURE__ */ jsxs("header", { className: "flex flex-col gap-1", children: [
+            title && /* @__PURE__ */ jsx("h1", { className: "text-2xl font-semibold tracking-tight text-[var(--color-text-primary)]", children: title }),
+            description && /* @__PURE__ */ jsx("p", { className: "text-sm text-[var(--color-text-muted)]", children: description })
+          ] }),
+          children
+        ] }) })
+      ] }),
+      /* @__PURE__ */ jsx(Sheet.Root, { open: menuOpen, onOpenChange: setMenuOpen, direction: "left", children: /* @__PURE__ */ jsxs(Sheet.Portal, { children: [
+        /* @__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-r-0" })
+        ] })
+      ] }) })
+    ] });
+  }
+);
+Root.displayName = "SettingsLayout";
+var Section = React.forwardRef(
+  ({ title, description, className, children, ...props }, ref) => /* @__PURE__ */ jsx(Card, { asChild: true, className: cn("px-5 py-1", className), children: /* @__PURE__ */ jsxs("section", { ref, ...props, children: [
+    (title || description) && /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1 border-b border-[var(--color-border-default)] pb-4 pt-4", children: [
+      title && /* @__PURE__ */ jsx("h2", { className: "text-base font-semibold text-[var(--color-text-primary)]", children: title }),
+      description && /* @__PURE__ */ jsx("p", { className: "text-sm text-[var(--color-text-muted)]", children: description })
+    ] }),
+    children
+  ] }) })
+);
+Section.displayName = "SettingsLayout.Section";
+var SettingsRow = React.forwardRef(
+  ({ label, description, value, action, className, ...props }, ref) => /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref,
+      className: cn(
+        "flex flex-col gap-2 border-t border-[var(--color-border-default)] py-4 first:border-t-0 sm:flex-row sm:items-center sm:gap-4",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-0.5 sm:w-1/3 sm:shrink-0", children: [
+          /* @__PURE__ */ jsx("span", { className: "text-sm font-medium text-[var(--color-text-primary)]", children: label }),
+          description && /* @__PURE__ */ jsx("span", { className: "text-xs text-[var(--color-text-muted)]", children: description })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "min-w-0 flex-1 break-words text-sm text-[var(--color-text-secondary)]", children: value }),
+        action && /* @__PURE__ */ jsx("div", { className: "flex shrink-0 items-center gap-2", children: action })
+      ]
+    }
+  )
+);
+SettingsRow.displayName = "SettingsRow";
+var SettingsLayout = Object.assign(Root, { Section, Row: SettingsRow });
+
+export {
+  SettingsRow,
+  SettingsLayout
+};

package/dist/chunk-WQX5FFVK.js

@@ -0,0 +1,97 @@
+'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-xl object-cover",
+        onError: () => setFailed(true)
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(Avatar, { name: app.name, size: "md", className: "rounded-xl", "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-lg px-1 py-3 text-center text-xs text-[var(--color-text-primary)] transition-colors",
+                "hover:bg-[var(--color-bg-subtle)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-ring-default)]",
+                app.current && "bg-[var(--color-bg-subtle)] font-semibold"
+              ),
+              children: [
+                /* @__PURE__ */ jsx(AppIcon, { app }),
+                /* @__PURE__ */ jsx("span", { className: "w-full truncate", children: app.name })
+              ]
+            }
+          ) }, app.id)) })
+        }
+      ) })
+    ] });
+  }
+);
+AppLauncher.displayName = "AppLauncher";
+
+export {
+  AppLauncher
+};

package/dist/components/AppLauncher/index.js

@@ -0,0 +1,7 @@
+'use client';
+import {
+  AppLauncher
+} from "../../chunk-WQX5FFVK.js";
+export {
+  AppLauncher
+};

package/dist/components/SettingsLayout/index.js

@@ -0,0 +1,9 @@
+'use client';
+import {
+  SettingsLayout,
+  SettingsRow
+} from "../../chunk-QSJUE24Y.js";
+export {
+  SettingsLayout,
+  SettingsRow
+};

package/dist/index.d.ts

@@ -116,4 +116,66 @@ interface NotificationItemProps extends React.HTMLAttributes<HTMLDivElement> {
 }
 declare const NotificationItem: React.ForwardRefExoticComponent<NotificationItemProps & React.RefAttributes<HTMLDivElement>>;
 
-export { ActivityFeed, type ActivityItemProps, AuthCard, type AuthCardProps, FilterBar, type FilterBarProps, InfoList, type InfoListItemProps, type InfoListRootProps, NotificationItem, type NotificationItemProps, PlanCard, type PlanCardProps, SettingsSection, type SettingsSectionProps, StatCard, type StatCardProps, StepIndicator, type StepIndicatorProps, type StepIndicatorStep, UserCard, type UserCardProps };
+interface AppLauncherApp {
+    id: string;
+    name: string;
+    href: string;
+    /** Tile image URL (e.g. `@nexub/brand/app-icon-account.svg`). Falls back to initials. */
+    icon?: string;
+    /** The app the user is in now. */
+    current?: boolean;
+}
+interface AppLauncherProps {
+    apps: AppLauncherApp[];
+    /** Client-side routing. When set, plain clicks call this instead of following `href`. */
+    onNavigate?: (app: AppLauncherApp) => void;
+    surface?: 'solid' | 'glass';
+    /** Accessible name of the trigger and the menu. */
+    label?: string;
+    className?: string;
+}
+declare const AppLauncher: React.ForwardRefExoticComponent<AppLauncherProps & React.RefAttributes<HTMLButtonElement>>;
+
+interface SettingsLayoutItem {
+    id: string;
+    label: string;
+    icon?: React.ReactNode;
+    href: string;
+}
+interface SettingsLayoutProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title' | 'onSelect'> {
+    /** Sections in the sidebar (and the phone menu). Each one is a page. */
+    items: SettingsLayoutItem[];
+    activeId?: string;
+    /** Router hook-in. When set, plain clicks call this instead of following `href`. */
+    onSelect?: (item: SettingsLayoutItem) => void;
+    /** Top bar, left: usually `<Logo product="Account" />`. */
+    logo?: React.ReactNode;
+    /** Top bar, right: theme switch, `<AppLauncher>`, account menu. */
+    actions?: React.ReactNode;
+    /** Page header. */
+    title?: React.ReactNode;
+    description?: React.ReactNode;
+    /** Accessible name of the section navigation. */
+    navLabel?: string;
+}
+interface SettingsLayoutSectionProps extends Omit<React.HTMLAttributes<HTMLElement>, 'title'> {
+    title?: React.ReactNode;
+    description?: React.ReactNode;
+}
+interface SettingsRowProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> {
+    label: React.ReactNode;
+    /** Optional hint under the label. */
+    description?: React.ReactNode;
+    /** The current value, e.g. an email address. */
+    value?: React.ReactNode;
+    /** Usually a Button or Switch. */
+    action?: React.ReactNode;
+}
+/** Label | value | action. Stacks on phones. */
+declare const SettingsRow: React.ForwardRefExoticComponent<SettingsRowProps & React.RefAttributes<HTMLDivElement>>;
+declare const SettingsLayout: React.ForwardRefExoticComponent<SettingsLayoutProps & React.RefAttributes<HTMLDivElement>> & {
+    Section: React.ForwardRefExoticComponent<SettingsLayoutSectionProps & React.RefAttributes<HTMLElement>>;
+    Row: React.ForwardRefExoticComponent<SettingsRowProps & React.RefAttributes<HTMLDivElement>>;
+};
+
+export { ActivityFeed, type ActivityItemProps, AppLauncher, type AppLauncherApp, type AppLauncherProps, AuthCard, type AuthCardProps, FilterBar, type FilterBarProps, InfoList, type InfoListItemProps, type InfoListRootProps, NotificationItem, type NotificationItemProps, PlanCard, type PlanCardProps, SettingsLayout, type SettingsLayoutItem, type SettingsLayoutProps, type SettingsLayoutSectionProps, SettingsRow, type SettingsRowProps, SettingsSection, type SettingsSectionProps, StatCard, type StatCardProps, StepIndicator, type StepIndicatorProps, type StepIndicatorStep, UserCard, type UserCardProps };

package/dist/index.js

@@ -1,4 +1,11 @@
 'use client';
+import {
+  SettingsLayout,
+  SettingsRow
+} from "./chunk-QSJUE24Y.js";
+import {
+  SettingsSection
+} from "./chunk-OTNHVOPC.js";
 import {
   StatCard
 } from "./chunk-7GYTYFUD.js";
@@ -8,6 +15,9 @@ import {
 import {
   UserCard
 } from "./chunk-AEYLZU3F.js";
+import {
+  AppLauncher
+} from "./chunk-WQX5FFVK.js";
 import {
   ActivityFeed
 } from "./chunk-YX7UO577.js";
@@ -26,16 +36,16 @@ import {
 import {
   PlanCard
 } from "./chunk-QMYBXQG4.js";
-import {
-  SettingsSection
-} from "./chunk-OTNHVOPC.js";
 export {
   ActivityFeed,
+  AppLauncher,
   AuthCard,
   FilterBar,
   InfoList,
   NotificationItem,
   PlanCard,
+  SettingsLayout,
+  SettingsRow,
   SettingsSection,
   StatCard,
   StepIndicator,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nexub/patterns",
-  "version": "1.1.0",
+  "version": "1.2.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/react": "^1.1.0",
-    "@nexub/icons": "^1.1.0",
-    "@nexub/tokens": "^1.1.0"
+    "@nexub/react": "^1.2.0",
+    "@nexub/icons": "^1.2.0",
+    "@nexub/tokens": "^1.2.0"
   },
   "peerDependenciesMeta": {
     "@nexub/icons": {
@@ -58,9 +58,9 @@
     "tsup": "^8.3.5",
     "typescript": "^5.6.3",
     "vitest": "^2.1.8",
-    "@nexub/icons": "1.1.0",
-    "@nexub/react": "1.1.0",
-    "@nexub/tokens": "1.1.0"
+    "@nexub/icons": "1.2.0",
+    "@nexub/react": "1.2.0",
+    "@nexub/tokens": "1.2.0"
   },
   "scripts": {
     "build": "tsup",