@nexub/patterns 2.1.0 → 2.3.0

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-27N33TGN.js

@@ -0,0 +1,61 @@
+'use client';
+import {
+  PageFrame,
+  usePageMessages
+} from "./chunk-7QCJC2DV.js";
+
+// src/components/SettingsPage/SettingsPage.tsx
+import * as React from "react";
+import { cn } from "@nexub/react";
+import { ChevronRight } from "@nexub/icons";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function Row({ item }) {
+  const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+    item.leading && /* @__PURE__ */ jsx("span", { className: "flex shrink-0 text-[var(--color-on-surface-variant)]", children: item.leading }),
+    /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 flex-1 flex-col text-start", children: [
+      /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: cn(
+            "text-body-md font-medium",
+            item.destructive ? "text-[var(--color-error)]" : "text-[var(--color-on-surface)]"
+          ),
+          children: item.title
+        }
+      ),
+      item.subtitle && /* @__PURE__ */ jsx("span", { className: "text-body-sm text-[var(--color-on-surface-muted)]", children: item.subtitle })
+    ] }),
+    item.value != null && /* @__PURE__ */ jsx("span", { className: "shrink-0 text-body-md text-[var(--color-on-surface-muted)]", children: item.value }),
+    (item.href || item.onSelect) && !item.destructive && /* @__PURE__ */ jsx(ChevronRight, { size: "sm", "aria-hidden": "true", className: "shrink-0 text-[var(--color-on-surface-muted)] rtl:-scale-x-100" })
+  ] });
+  const row = "flex min-h-[56px] w-full items-center gap-3 px-4 py-3";
+  if (item.href)
+    return /* @__PURE__ */ jsx("a", { href: item.href, onClick: item.onSelect && ((e) => {
+      e.preventDefault();
+      item.onSelect?.();
+    }), className: cn(row, "nx-state-layer"), children: content });
+  if (item.onSelect)
+    return /* @__PURE__ */ jsx("button", { type: "button", onClick: item.onSelect, className: cn(row, "nx-state-layer"), children: content });
+  return /* @__PURE__ */ jsxs("div", { className: row, children: [
+    content,
+    item.control && /* @__PURE__ */ jsx("span", { className: "shrink-0", children: item.control })
+  ] });
+}
+var SettingsPage = React.forwardRef(function SettingsPage2({ groups, header, title, messages, ...props }, ref) {
+  const m = usePageMessages(messages);
+  return /* @__PURE__ */ jsxs(PageFrame, { ref, title: title ?? m.settings, ...props, children: [
+    header,
+    groups.map((g, i) => {
+      const id = `settings-group-${i}`;
+      return /* @__PURE__ */ jsxs("section", { "aria-labelledby": g.header ? id : void 0, className: "flex flex-col gap-2", children: [
+        g.header && /* @__PURE__ */ jsx("h2", { id, className: "px-4 text-label-lg text-[var(--color-on-surface-variant)]", children: g.header }),
+        /* @__PURE__ */ jsx("ul", { className: "overflow-hidden rounded-shape-container border border-[var(--color-outline-variant)] bg-[var(--color-surface-elevated)]", children: g.items.map((it) => /* @__PURE__ */ jsx("li", { className: "border-t border-[var(--color-outline-variant)] first:border-t-0", children: /* @__PURE__ */ jsx(Row, { item: it }) }, it.title)) }),
+        g.footer && /* @__PURE__ */ jsx("p", { className: "px-4 text-body-sm text-[var(--color-on-surface-muted)]", children: g.footer })
+      ] }, g.header ?? i);
+    })
+  ] });
+});
+
+export {
+  SettingsPage
+};

package/dist/chunk-33Z2ZPO7.js

@@ -0,0 +1,71 @@
+'use client';
+import {
+  StatCard
+} from "./chunk-INKX2GYA.js";
+import {
+  TransactionRow
+} from "./chunk-OC4XY3US.js";
+import {
+  PageFrame,
+  usePageMessages,
+  useTemplateLocale
+} from "./chunk-7QCJC2DV.js";
+
+// src/components/DashboardPage/DashboardPage.tsx
+import * as React from "react";
+import { Amount, Button, Card } from "@nexub/react";
+import { jsx, jsxs } from "react/jsx-runtime";
+function Panel({ title, action, children }) {
+  const id = React.useId();
+  return /* @__PURE__ */ jsxs("section", { "aria-labelledby": id, className: "flex flex-col gap-3", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2", children: [
+      /* @__PURE__ */ jsx("h2", { id, className: "text-title-md text-[var(--color-on-surface)]", children: title }),
+      action
+    ] }),
+    children
+  ] });
+}
+var DashboardPage = React.forwardRef(function DashboardPage2({
+  title,
+  balance,
+  quickActions = [],
+  stats = [],
+  recent = [],
+  onSelectTransaction,
+  onSeeAllActivity,
+  insights = [],
+  messages,
+  ...props
+}, ref) {
+  const m = usePageMessages(messages);
+  const locale = useTemplateLocale();
+  return /* @__PURE__ */ jsx(PageFrame, { ref, width: "lg", title, ...props, children: /* @__PURE__ */ jsxs("div", { className: "grid gap-6 lg:grid-cols-3", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-col gap-6 lg:col-span-2", children: [
+      /* @__PURE__ */ jsxs(Card, { className: "flex flex-col gap-5 p-6", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
+          /* @__PURE__ */ jsx("p", { className: "text-label-lg text-[var(--color-on-surface-variant)]", children: balance.label ?? m.totalBalance }),
+          /* @__PURE__ */ jsx(Amount, { value: balance.value, currency: balance.currency, locale, size: "display" })
+        ] }),
+        quickActions.length > 0 && /* @__PURE__ */ jsx("ul", { "aria-label": m.quickActions, className: "grid grid-cols-2 gap-2 sm:grid-cols-4", children: quickActions.map((a) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(Button, { variant: "secondary", fullWidth: true, onClick: a.onSelect, leadingIcon: a.icon, children: a.label }) }, a.id)) })
+      ] }),
+      stats.length > 0 && /* @__PURE__ */ jsx("div", { className: "grid gap-4 sm:grid-cols-2 xl:grid-cols-3", children: stats.map((s) => /* @__PURE__ */ jsx(StatCard, { ...s }, s.label)) }),
+      recent.length > 0 && /* @__PURE__ */ jsx(
+        Panel,
+        {
+          title: m.recentActivity,
+          action: onSeeAllActivity && /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "sm", onClick: onSeeAllActivity, children: m.seeAll }),
+          children: /* @__PURE__ */ jsx("ul", { className: "overflow-hidden rounded-shape-container border border-[var(--color-outline-variant)] bg-[var(--color-surface-elevated)]", children: recent.map((t) => /* @__PURE__ */ jsx(TransactionRow, { t, onSelect: onSelectTransaction, m, locale }, t.id)) })
+        }
+      )
+    ] }),
+    insights.length > 0 && /* @__PURE__ */ jsx(Panel, { title: m.insights, children: /* @__PURE__ */ jsx("ul", { className: "flex flex-col gap-3", children: insights.map((i) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(Card, { className: "flex flex-col gap-2 p-4", children: [
+      /* @__PURE__ */ jsx("h3", { className: "text-title-sm text-[var(--color-on-surface)]", children: i.title }),
+      /* @__PURE__ */ jsx("p", { className: "text-body-sm text-[var(--color-on-surface-muted)]", children: i.body }),
+      i.action && /* @__PURE__ */ jsx(Button, { variant: "link", size: "sm", className: "self-start px-0", onClick: i.action.onSelect, children: i.action.label })
+    ] }) }, i.id)) }) })
+  ] }) });
+});
+
+export {
+  DashboardPage
+};

package/dist/chunk-64PSI75E.js

@@ -0,0 +1,83 @@
+'use client';
+import {
+  Conversation
+} from "./chunk-WRP73TXG.js";
+import {
+  usePageMessages
+} from "./chunk-7QCJC2DV.js";
+
+// src/components/ChatPage/ChatPage.tsx
+import * as React from "react";
+import { MessageBubble, PromptInput, ThinkingIndicator, cn } from "@nexub/react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var ChatPage = React.forwardRef(function ChatPage2({
+  messages: list,
+  onSend,
+  onStop,
+  thinking,
+  placeholder,
+  empty,
+  assistantAvatar,
+  title,
+  showTitle = false,
+  as: Tag = "main",
+  strings,
+  className,
+  ...props
+}, ref) {
+  const m = usePageMessages(strings);
+  const [draft, setDraft] = React.useState("");
+  const streaming = list.at(-1)?.streaming ?? false;
+  const headingId = React.useId();
+  return /* @__PURE__ */ jsxs(
+    Tag,
+    {
+      ref,
+      "aria-labelledby": headingId,
+      className: cn("flex h-full min-h-0 w-full flex-col", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("h1", { id: headingId, className: showTitle ? "px-4 pt-4 text-title-lg text-[var(--color-on-surface)]" : "sr-only", children: title ?? m.chat }),
+        /* @__PURE__ */ jsx(
+          Conversation,
+          {
+            className: "min-h-0 flex-1",
+            composer: /* @__PURE__ */ jsx(
+              PromptInput,
+              {
+                value: draft,
+                onValueChange: setDraft,
+                placeholder,
+                status: streaming ? "streaming" : thinking ? "submitting" : "idle",
+                onStop,
+                onSubmit: (text) => {
+                  const t = text.trim();
+                  if (!t) return;
+                  onSend(t);
+                  setDraft("");
+                }
+              }
+            ),
+            children: list.length === 0 && !thinking ? /* @__PURE__ */ jsx("div", { className: "flex flex-1 items-center justify-center py-16 text-center text-body-md text-[var(--color-on-surface-muted)]", children: empty ?? m.chatEmpty }) : /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4", children: [
+              list.map((msg) => /* @__PURE__ */ jsx(
+                MessageBubble,
+                {
+                  from: msg.role,
+                  avatar: msg.role === "assistant" ? assistantAvatar : void 0,
+                  "aria-busy": msg.streaming || void 0,
+                  children: msg.text
+                },
+                msg.id
+              )),
+              thinking && /* @__PURE__ */ jsx(ThinkingIndicator, {})
+            ] })
+          }
+        )
+      ]
+    }
+  );
+});
+
+export {
+  ChatPage
+};

package/dist/chunk-7QCJC2DV.js

@@ -0,0 +1,113 @@
+'use client';
+
+// src/components/PageFrame/PageFrame.tsx
+import * as React from "react";
+import { Badge, cn, useLocale, useNexubMessages } from "@nexub/react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var defaultPageTemplateMessages = {
+  activity: "Activity",
+  noActivityTitle: "No activity yet",
+  noActivityDescription: "Your payments and transfers will show up here.",
+  loadMore: "Load more",
+  refresh: "Refresh",
+  pending: "Pending",
+  failed: "Failed",
+  completed: "Completed",
+  date: "Date",
+  details: "Details",
+  back: "Back",
+  settings: "Settings",
+  signIn: "Sign in",
+  email: "Email",
+  password: "Password",
+  forgotPassword: "Forgot password?",
+  createAccount: "Create an account",
+  howMuch: "How much?",
+  amountToSend: "Amount to send",
+  balance: (b) => `Balance ${b}`,
+  overBalance: (b) => `More than your balance (${b})`,
+  fee: "Fee",
+  rate: "Rate",
+  recipientGets: "Recipient gets",
+  arrives: "Arrives",
+  continue: "Continue",
+  checkDetails: "Check the details",
+  edit: "Edit",
+  done: "Done",
+  stepOf: (s, t) => `Step ${s} of ${t}`,
+  sent: "Sent",
+  chat: "Chat",
+  chatEmpty: "Ask anything to get started.",
+  restorePurchases: "Restore purchases",
+  choosePlan: "Choose a plan",
+  totalBalance: "Total balance",
+  quickActions: "Quick actions",
+  recentActivity: "Recent activity",
+  seeAll: "See all",
+  insights: "Insights"
+};
+function usePageMessages(overrides) {
+  const provided = useNexubMessages();
+  const out = { ...defaultPageTemplateMessages };
+  for (const key of Object.keys(out)) {
+    const v = overrides?.[key] ?? provided[key];
+    if (v !== void 0 && typeof v === typeof out[key]) out[key] = v;
+  }
+  return out;
+}
+function formatMoney(value, currency, locale, opts) {
+  return new Intl.NumberFormat(locale, { style: "currency", currency, ...opts }).format(value);
+}
+function groupByDay(transactions, locale) {
+  const day = new Intl.DateTimeFormat(locale, { dateStyle: "medium" });
+  const map = /* @__PURE__ */ new Map();
+  for (const t of [...transactions].sort((a, b) => +b.date - +a.date)) {
+    const key = day.format(t.date);
+    map.set(key, [...map.get(key) ?? [], t]);
+  }
+  return [...map].map(([title, data]) => ({ title, data }));
+}
+function useTemplateLocale() {
+  return useLocale().locale;
+}
+function StatusBadge({ status, m, dot }) {
+  if (!status) return null;
+  return /* @__PURE__ */ jsxs(Badge, { tone: status === "failed" ? "danger" : "warning", size: "sm", children: [
+    dot && /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "me-1 inline-block h-1.5 w-1.5 rounded-full bg-current" }),
+    status === "failed" ? m.failed : m.pending
+  ] });
+}
+var widths = { sm: "max-w-[480px]", md: "max-w-3xl", lg: "max-w-6xl" };
+var PageFrame = React.forwardRef(function PageFrame2({ as: Tag = "main", title, description, actions, eyebrow, width = "md", className, children, ...props }, ref) {
+  const headingId = React.useId();
+  return /* @__PURE__ */ jsxs(
+    Tag,
+    {
+      ref,
+      "aria-labelledby": title ? headingId : void 0,
+      className: cn("mx-auto flex w-full flex-col gap-6 px-4 py-6 sm:px-6 lg:py-10", widths[width], className),
+      ...props,
+      children: [
+        (title || actions || eyebrow) && /* @__PURE__ */ jsxs("header", { className: "flex flex-col gap-2", children: [
+          eyebrow,
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center justify-between gap-3", children: [
+            title && /* @__PURE__ */ jsx("h1", { id: headingId, className: "text-headline-sm text-[var(--color-on-surface)]", children: title }),
+            actions && /* @__PURE__ */ jsx("div", { className: "flex flex-wrap items-center gap-2", children: actions })
+          ] }),
+          description && /* @__PURE__ */ jsx("p", { className: "text-body-md text-[var(--color-on-surface-muted)]", children: description })
+        ] }),
+        children
+      ]
+    }
+  );
+});
+
+export {
+  defaultPageTemplateMessages,
+  usePageMessages,
+  formatMoney,
+  groupByDay,
+  useTemplateLocale,
+  StatusBadge,
+  PageFrame
+};

package/dist/chunk-CJBHDX2U.js

@@ -0,0 +1,42 @@
+'use client';
+import {
+  InfoList
+} from "./chunk-WPNT5JOU.js";
+import {
+  PageFrame,
+  usePageMessages,
+  useTemplateLocale
+} from "./chunk-7QCJC2DV.js";
+
+// src/components/TransactionDetailPage/TransactionDetailPage.tsx
+import * as React from "react";
+import { Amount, Avatar, Badge, Button } from "@nexub/react";
+import { ArrowLeft } from "@nexub/icons";
+import { jsx, jsxs } from "react/jsx-runtime";
+var TransactionDetailPage = React.forwardRef(
+  function TransactionDetailPage2({ transaction: t, rows = [], footer, onBack, messages, ...props }, ref) {
+    const m = usePageMessages(messages);
+    const locale = useTemplateLocale();
+    const headingId = React.useId();
+    const when = new Intl.DateTimeFormat(locale, { dateStyle: "full", timeStyle: "short" }).format(t.date);
+    return /* @__PURE__ */ jsxs(PageFrame, { ref, width: "sm", "aria-labelledby": headingId, ...props, children: [
+      onBack && /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "sm", className: "self-start", onClick: onBack, leadingIcon: /* @__PURE__ */ jsx(ArrowLeft, { size: "sm", className: "rtl:-scale-x-100", "aria-hidden": "true" }), children: m.back }),
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-2 py-4 text-center", children: [
+        /* @__PURE__ */ jsx(Avatar, { name: t.title, src: t.image, size: "xl" }),
+        /* @__PURE__ */ jsx("h1", { id: headingId, className: "text-title-lg text-[var(--color-on-surface)]", children: t.title }),
+        /* @__PURE__ */ jsx(Amount, { value: t.amount, currency: t.currency, locale, size: "display", tone: "auto", signDisplay: "exceptZero" }),
+        /* @__PURE__ */ jsx(Badge, { tone: t.status === "failed" ? "danger" : t.status === "pending" ? "warning" : "success", children: t.status === "failed" ? m.failed : t.status === "pending" ? m.pending : m.completed })
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "rounded-shape-container border border-[var(--color-outline-variant)] bg-[var(--color-surface-elevated)] px-4", children: /* @__PURE__ */ jsxs(InfoList.Root, { children: [
+        /* @__PURE__ */ jsx(InfoList.Item, { label: m.date, value: when }),
+        t.subtitle && /* @__PURE__ */ jsx(InfoList.Item, { label: m.details, value: t.subtitle }),
+        rows.map((r) => /* @__PURE__ */ jsx(InfoList.Item, { label: r.label, value: r.value }, r.label))
+      ] }) }),
+      footer && /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-2 sm:flex-row sm:justify-center", children: footer })
+    ] });
+  }
+);
+
+export {
+  TransactionDetailPage
+};

package/dist/chunk-CWFZA7ZQ.js

@@ -0,0 +1 @@
+'use client';

package/dist/chunk-CZR6NZDH.js

@@ -0,0 +1,134 @@
+'use client';
+import {
+  InfoList
+} from "./chunk-WPNT5JOU.js";
+import {
+  PageFrame,
+  formatMoney,
+  usePageMessages,
+  useTemplateLocale
+} from "./chunk-7QCJC2DV.js";
+
+// src/components/CheckoutPage/CheckoutPage.tsx
+import * as React from "react";
+import { Alert, Amount, Button, FormField, MoneyInput, Progress } from "@nexub/react";
+import { CheckCircle2, ShieldCheck } from "@nexub/icons";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var CheckoutPage = React.forwardRef(function CheckoutPage2({
+  from,
+  to,
+  balance,
+  quote,
+  reviewRows,
+  confirmLabel,
+  confirmHint,
+  onConfirm,
+  resultTitle,
+  resultDescription,
+  onDone,
+  messages,
+  ...props
+}, ref) {
+  const m = usePageMessages(messages);
+  const locale = useTemplateLocale();
+  const [step, setStep] = React.useState("amount");
+  const [amount, setAmount] = React.useState(null);
+  const [busy, setBusy] = React.useState(false);
+  const [error, setError] = React.useState();
+  const headingRef = React.useRef(null);
+  const fmt = (n, c) => formatMoney(n, c, locale);
+  const over = amount != null && amount > balance;
+  const q = amount && !over ? quote(amount) : void 0;
+  const index = step === "amount" ? 1 : step === "review" ? 2 : 3;
+  const first = React.useRef(true);
+  React.useEffect(() => {
+    if (first.current) {
+      first.current = false;
+      return;
+    }
+    headingRef.current?.focus();
+  }, [step]);
+  const rows = amount && q ? reviewRows?.(amount, q) ?? [
+    { label: m.amountToSend, value: fmt(amount, from) },
+    { label: m.fee, value: fmt(q.fee, from) },
+    { label: m.rate, value: `1 ${from} = ${q.rate} ${to}` },
+    { label: m.recipientGets, value: fmt((amount - q.fee) * q.rate, to) },
+    { label: m.arrives, value: q.arrives }
+  ] : [];
+  const confirm = async () => {
+    if (!amount) return;
+    setBusy(true);
+    setError(void 0);
+    try {
+      await onConfirm(amount);
+      setStep("done");
+    } catch (e) {
+      setError(e instanceof Error ? e.message : String(e));
+    } finally {
+      setBusy(false);
+    }
+  };
+  const title = step === "amount" ? m.howMuch : step === "review" ? m.checkDetails : resultTitle ?? m.sent;
+  return /* @__PURE__ */ jsxs(PageFrame, { ref, width: "sm", ...props, children: [
+    step !== "done" && /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
+      /* @__PURE__ */ jsx(Progress, { value: index, max: 3, "aria-label": m.stepOf(index, 3) }),
+      /* @__PURE__ */ jsx("p", { className: "text-label-md text-[var(--color-on-surface-variant)]", children: m.stepOf(index, 3) })
+    ] }),
+    step === "done" ? /* @__PURE__ */ jsxs("div", { role: "status", className: "flex flex-col items-center gap-4 py-8 text-center", children: [
+      /* @__PURE__ */ jsx("span", { className: "grid h-20 w-20 place-items-center rounded-full bg-[var(--color-success-container)] text-[var(--color-success)]", children: /* @__PURE__ */ jsx(CheckCircle2, { size: 40, "aria-hidden": "true" }) }),
+      /* @__PURE__ */ jsx("h1", { ref: headingRef, tabIndex: -1, className: "text-headline-sm text-[var(--color-on-surface)] outline-none", children: title }),
+      amount != null && /* @__PURE__ */ jsx(Amount, { value: amount, currency: from, locale, size: "display" }),
+      resultDescription && /* @__PURE__ */ jsx("p", { className: "text-body-md text-[var(--color-on-surface-muted)]", children: resultDescription }),
+      /* @__PURE__ */ jsx(Button, { size: "lg", fullWidth: true, onClick: onDone, children: m.done })
+    ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("h1", { ref: headingRef, tabIndex: -1, className: "text-headline-sm text-[var(--color-on-surface)] outline-none", children: title }),
+      step === "amount" && /* @__PURE__ */ jsxs(
+        "form",
+        {
+          className: "flex flex-col gap-6",
+          onSubmit: (e) => {
+            e.preventDefault();
+            if (amount && !over) setStep("review");
+          },
+          children: [
+            /* @__PURE__ */ jsxs(FormField.Root, { invalid: over, children: [
+              /* @__PURE__ */ jsx(FormField.Label, { children: m.amountToSend }),
+              /* @__PURE__ */ jsx(FormField.Control, { children: /* @__PURE__ */ jsx(MoneyInput, { currency: from, locale, value: amount, onValueChange: setAmount }) }),
+              over ? /* @__PURE__ */ jsx(FormField.Error, { children: m.overBalance(fmt(balance, from)) }) : /* @__PURE__ */ jsx(FormField.Description, { children: m.balance(fmt(balance, from)) })
+            ] }),
+            q && amount && /* @__PURE__ */ jsx("div", { "aria-live": "polite", className: "rounded-shape-container border border-[var(--color-outline-variant)] bg-[var(--color-surface-elevated)] px-4", children: /* @__PURE__ */ jsxs(InfoList.Root, { children: [
+              /* @__PURE__ */ jsx(InfoList.Item, { label: m.fee, value: fmt(q.fee, from) }),
+              /* @__PURE__ */ jsx(InfoList.Item, { label: m.rate, value: `1 ${from} = ${q.rate} ${to}` }),
+              /* @__PURE__ */ jsx(InfoList.Item, { label: m.recipientGets, value: fmt((amount - q.fee) * q.rate, to) }),
+              /* @__PURE__ */ jsx(InfoList.Item, { label: m.arrives, value: q.arrives })
+            ] }) }),
+            /* @__PURE__ */ jsx(Button, { type: "submit", size: "lg", fullWidth: true, disabled: !amount || over, children: m.continue })
+          ]
+        }
+      ),
+      step === "review" && /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-6", children: [
+        error && /* @__PURE__ */ jsx(Alert, { tone: "danger", role: "alert", children: error }),
+        /* @__PURE__ */ jsx("div", { className: "rounded-shape-container border border-[var(--color-outline-variant)] bg-[var(--color-surface-elevated)] px-4", children: /* @__PURE__ */ jsx(InfoList.Root, { children: rows.map((r) => /* @__PURE__ */ jsx(InfoList.Item, { label: r.label, value: r.value }, r.label)) }) }),
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              size: "lg",
+              fullWidth: true,
+              loading: busy,
+              leadingIcon: confirmHint ? /* @__PURE__ */ jsx(ShieldCheck, { size: "sm", "aria-hidden": "true" }) : void 0,
+              onClick: confirm,
+              children: confirmLabel
+            }
+          ),
+          confirmHint && /* @__PURE__ */ jsx("p", { className: "text-center text-body-sm text-[var(--color-on-surface-muted)]", children: confirmHint }),
+          /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "lg", fullWidth: true, disabled: busy, onClick: () => setStep("amount"), children: m.edit })
+        ] })
+      ] })
+    ] })
+  ] });
+});
+
+export {
+  CheckoutPage
+};

package/dist/chunk-M3OHX4F4.js

@@ -0,0 +1,42 @@
+'use client';
+import {
+  PageFrame,
+  usePageMessages
+} from "./chunk-7QCJC2DV.js";
+
+// src/components/PaywallPage/PaywallPage.tsx
+import * as React from "react";
+import { Badge, Button, RadioCard, RadioCardGroup } from "@nexub/react";
+import { Check } from "@nexub/icons";
+import { jsx, jsxs } from "react/jsx-runtime";
+var PaywallPage = React.forwardRef(function PaywallPage2({ title, description, plans, defaultPlan, onSubscribe, onRestore, terms, loading, messages, ...props }, ref) {
+  const m = usePageMessages(messages);
+  const [plan, setPlan] = React.useState(defaultPlan ?? plans[0]?.id);
+  return /* @__PURE__ */ jsxs(PageFrame, { ref, width: "sm", title, description, ...props, children: [
+    /* @__PURE__ */ jsx(RadioCardGroup, { value: plan, onValueChange: setPlan, "aria-label": m.choosePlan, columns: 1, children: plans.map((p) => /* @__PURE__ */ jsx(
+      RadioCard,
+      {
+        value: p.id,
+        title: /* @__PURE__ */ jsxs("span", { className: "flex flex-wrap items-center gap-2", children: [
+          p.name,
+          p.badge && /* @__PURE__ */ jsx(Badge, { tone: "info", size: "sm", children: p.badge })
+        ] }),
+        description: p.price,
+        children: /* @__PURE__ */ jsx("ul", { className: "mt-2 flex flex-col gap-1.5", children: p.features.map((f) => /* @__PURE__ */ jsxs("li", { className: "flex items-start gap-2 text-body-sm text-[var(--color-on-surface-variant)]", children: [
+          /* @__PURE__ */ jsx(Check, { size: "sm", "aria-hidden": "true", className: "mt-0.5 shrink-0 text-[var(--color-success)]" }),
+          f
+        ] }, f)) })
+      },
+      p.id
+    )) }),
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
+      /* @__PURE__ */ jsx(Button, { size: "lg", fullWidth: true, loading, disabled: !plan, onClick: () => plan && onSubscribe(plan), children: m.continue }),
+      onRestore && /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "lg", fullWidth: true, onClick: onRestore, children: m.restorePurchases }),
+      terms && /* @__PURE__ */ jsx("p", { className: "text-center text-label-sm text-[var(--color-on-surface-muted)]", children: terms })
+    ] })
+  ] });
+});
+
+export {
+  PaywallPage
+};

package/dist/chunk-OC4XY3US.js

@@ -0,0 +1,87 @@
+'use client';
+import {
+  PageFrame,
+  StatusBadge,
+  groupByDay,
+  usePageMessages,
+  useTemplateLocale
+} from "./chunk-7QCJC2DV.js";
+
+// src/components/ActivityPage/ActivityPage.tsx
+import * as React from "react";
+import { Amount, Avatar, Button, EmptyState, cn } from "@nexub/react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function TransactionRow({
+  t,
+  onSelect,
+  actions,
+  m,
+  locale
+}) {
+  const body = /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(Avatar, { name: t.title, src: t.image }),
+    /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 flex-1 flex-col text-start", children: [
+      /* @__PURE__ */ jsx("span", { className: "truncate text-body-md font-medium text-[var(--color-on-surface)]", children: t.title }),
+      t.subtitle && /* @__PURE__ */ jsx("span", { className: "truncate text-body-sm text-[var(--color-on-surface-muted)]", children: t.subtitle })
+    ] }),
+    /* @__PURE__ */ jsxs("span", { className: "flex shrink-0 flex-col items-end gap-1", children: [
+      /* @__PURE__ */ jsx(Amount, { value: t.amount, currency: t.currency, locale, tone: "auto", signDisplay: "exceptZero" }),
+      /* @__PURE__ */ jsx(StatusBadge, { status: t.status, m })
+    ] })
+  ] });
+  const row = "flex w-full items-center gap-3 px-4 py-3";
+  return /* @__PURE__ */ jsxs("li", { className: "flex items-center border-t border-[var(--color-outline-variant)] first:border-t-0", children: [
+    onSelect ? /* @__PURE__ */ jsx("button", { type: "button", onClick: () => onSelect(t), className: cn(row, "nx-state-layer min-h-[56px]"), children: body }) : /* @__PURE__ */ jsx("div", { className: row, children: body }),
+    actions && /* @__PURE__ */ jsx("div", { className: "shrink-0 pe-2", children: actions })
+  ] });
+}
+var ActivityPage = React.forwardRef(function ActivityPage2({
+  transactions,
+  onSelect,
+  onRefresh,
+  refreshing,
+  onLoadMore,
+  hasMore,
+  loadingMore,
+  rowActions,
+  toolbar,
+  empty,
+  title,
+  actions,
+  messages,
+  ...props
+}, ref) {
+  const m = usePageMessages(messages);
+  const locale = useTemplateLocale();
+  const sections = React.useMemo(() => groupByDay(transactions, locale), [transactions, locale]);
+  return /* @__PURE__ */ jsxs(
+    PageFrame,
+    {
+      ref,
+      title: title ?? m.activity,
+      actions: (actions || onRefresh) && /* @__PURE__ */ jsxs(Fragment, { children: [
+        actions,
+        onRefresh && /* @__PURE__ */ jsx(Button, { variant: "outline", size: "sm", onClick: onRefresh, loading: refreshing, children: m.refresh })
+      ] }),
+      ...props,
+      children: [
+        toolbar,
+        sections.length === 0 ? empty ?? /* @__PURE__ */ jsxs(EmptyState.Root, { children: [
+          /* @__PURE__ */ jsx(EmptyState.Title, { children: m.noActivityTitle }),
+          /* @__PURE__ */ jsx(EmptyState.Description, { children: m.noActivityDescription })
+        ] }) : /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-6", "aria-busy": refreshing || void 0, children: [
+          sections.map((s) => /* @__PURE__ */ jsxs("section", { "aria-label": s.title, className: "flex flex-col gap-2", children: [
+            /* @__PURE__ */ jsx("h2", { className: "px-1 text-title-sm text-[var(--color-on-surface-variant)]", children: s.title }),
+            /* @__PURE__ */ jsx("ul", { className: "overflow-hidden rounded-shape-container border border-[var(--color-outline-variant)] bg-[var(--color-surface-elevated)]", children: s.data.map((t) => /* @__PURE__ */ jsx(TransactionRow, { t, onSelect, actions: rowActions?.(t), m, locale }, t.id)) })
+          ] }, s.title)),
+          onLoadMore && hasMore && /* @__PURE__ */ jsx(Button, { variant: "secondary", className: "self-center", onClick: onLoadMore, loading: loadingMore, children: m.loadMore })
+        ] })
+      ]
+    }
+  );
+});
+
+export {
+  TransactionRow,
+  ActivityPage
+};