@actioneer/ads 1.0.8 → 1.0.9

package/components/tabs.d.ts

@@ -19,7 +19,12 @@ export declare const TabList: React.ForwardRefExoticComponent<TabListProps & Rea
 export interface TabProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
     value: string;
     isDisabled?: boolean;
-    /** Optional trailing count, rendered as `· N` (e.g. a filter's match count). */
+    /**
+     * Optional trailing count (e.g. a filter's match count), rendered as the bare
+     * number 6px after the label. It stays quieter than the label: Regular
+     * weight and tabular figures in every state, tertiary grey when inactive and
+     * the primary-action teal when active.
+     */
     count?: number;
 }
 export declare const Tab: React.ForwardRefExoticComponent<TabProps & React.RefAttributes<HTMLButtonElement>>;

package/components/tabs.js

@@ -1,5 +1,5 @@
 "use client";
-import { jsx as m, jsxs as E } from "react/jsx-runtime";
+import { jsx as p, jsxs as E } from "react/jsx-runtime";
 import * as r from "react";
 import { MotionConfig as j, motion as $ } from "motion/react";
 import { cva as L } from "class-variance-authority";
@@ -18,26 +18,26 @@ const U = r.forwardRef(
     value: e,
     defaultValue: t,
     onValueChange: a,
-    variant: w,
+    variant: g,
     orientation: c = "horizontal",
-    size: p,
+    size: m,
     children: R,
     ...A
   }, k) => {
-    const x = e !== void 0, [y, v] = r.useState(t), T = r.useId().replaceAll(":", ""), d = r.useId(), g = r.useRef([]), h = r.useRef(/* @__PURE__ */ new Set()), f = x ? e : y, I = r.useCallback(
+    const x = e !== void 0, [y, v] = r.useState(t), T = r.useId().replaceAll(":", ""), d = r.useId(), w = r.useRef([]), h = r.useRef(/* @__PURE__ */ new Set()), f = x ? e : y, I = r.useCallback(
       (l) => {
         x || v(l), a == null || a(l);
       },
       [x, a]
     ), i = r.useCallback((l) => {
-      g.current.includes(l) || g.current.push(l);
+      w.current.includes(l) || w.current.push(l);
     }, []), s = r.useMemo(
       () => ({
         value: f,
         setValue: I,
         baseId: T,
         registerTab: i,
-        tabs: g,
+        tabs: w,
         disabled: h,
         thumbId: d,
         orientation: c
@@ -51,7 +51,7 @@ const U = r.forwardRef(
         c
       ]
     );
-    return /* @__PURE__ */ m(P.Provider, { value: s, children: /* @__PURE__ */ m(
+    return /* @__PURE__ */ p(P.Provider, { value: s, children: /* @__PURE__ */ p(
       "div",
       {
         ref: k,
@@ -63,13 +63,13 @@ const U = r.forwardRef(
           o
         ),
         ...A,
-        children: /* @__PURE__ */ m(j, { reducedMotion: "user", children: R })
+        children: /* @__PURE__ */ p(j, { reducedMotion: "user", children: R })
       }
     ) });
   }
 );
 U.displayName = "Tabs";
-const C = L("inline-flex text-l", {
+const C = L("inline-flex text-m", {
   variants: {
     orientation: {
       horizontal: b(
@@ -88,7 +88,7 @@ const C = L("inline-flex text-l", {
 }), B = r.forwardRef(
   ({ className: o, ...e }, t) => {
     const { orientation: a } = z("TabList");
-    return /* @__PURE__ */ m(
+    return /* @__PURE__ */ p(
       "div",
       {
         ref: t,
@@ -127,7 +127,7 @@ const H = L(
     }
   }
 ), O = r.forwardRef(
-  ({ className: o, value: e, isDisabled: t, count: a, children: w, onClick: c, onKeyDown: p, ...R }, A) => {
+  ({ className: o, value: e, isDisabled: t, count: a, children: g, onClick: c, onKeyDown: m, ...R }, A) => {
     const {
       value: k,
       setValue: x,
@@ -135,7 +135,7 @@ const H = L(
       registerTab: v,
       tabs: T,
       disabled: d,
-      thumbId: g,
+      thumbId: w,
       orientation: h
     } = z("Tab"), f = k === e;
     r.useEffect(() => {
@@ -144,7 +144,7 @@ const H = L(
       t ? d.current.add(e) : d.current.delete(e);
     }, [d, t, e]);
     const I = (i) => {
-      if (p == null || p(i), i.defaultPrevented) return;
+      if (m == null || m(i), i.defaultPrevented) return;
       const s = T.current, l = s.indexOf(e);
       if (l === -1) return;
       const V = h === "vertical" ? ["ArrowDown"] : ["ArrowRight", "ArrowDown"], _ = h === "vertical" ? ["ArrowUp"] : ["ArrowLeft", "ArrowUp"];
@@ -199,10 +199,10 @@ const H = L(
         onKeyDown: I,
         ...R,
         children: [
-          f && /* @__PURE__ */ m(
+          f && /* @__PURE__ */ p(
             $.span,
             {
-              layoutId: g,
+              layoutId: w,
               "aria-hidden": !0,
               transition: M,
               className: b(
@@ -211,19 +211,16 @@ const H = L(
               )
             }
           ),
-          /* @__PURE__ */ E("span", { className: "relative inline-flex items-center gap-1", children: [
-            w,
-            a != null && /* @__PURE__ */ E(
+          /* @__PURE__ */ E("span", { className: "relative inline-flex items-center gap-1.5", children: [
+            g,
+            a != null && /* @__PURE__ */ p(
               "span",
               {
                 className: b(
-                  "tabular-nums",
-                  f ? "text-action-primary-text" : "text-secondary"
+                  "font-normal tabular-nums",
+                  f ? "text-action-primary-text" : "text-on-white-tertiary"
                 ),
-                children: [
-                  "· ",
-                  a
-                ]
+                children: a
               }
             )
           ] })
@@ -236,7 +233,7 @@ O.displayName = "Tab";
 const q = r.forwardRef(
   ({ className: o, ...e }, t) => {
     const { orientation: a } = z("TabSeparator");
-    return /* @__PURE__ */ m(
+    return /* @__PURE__ */ p(
       "span",
       {
         ref: t,
@@ -254,15 +251,15 @@ const q = r.forwardRef(
 );
 q.displayName = "TabSeparator";
 const F = r.forwardRef(
-  ({ className: o, value: e, children: t, ...a }, w) => {
-    const { value: c, baseId: p } = z("TabPanel");
-    return c !== e ? null : /* @__PURE__ */ m(
+  ({ className: o, value: e, children: t, ...a }, g) => {
+    const { value: c, baseId: m } = z("TabPanel");
+    return c !== e ? null : /* @__PURE__ */ p(
       "div",
       {
-        ref: w,
+        ref: g,
         role: "tabpanel",
-        id: N(p, "panel", e),
-        "aria-labelledby": N(p, "tab", e),
+        id: N(m, "panel", e),
+        "aria-labelledby": N(m, "tab", e),
         tabIndex: 0,
         className: b(
           "flex-1 outline-none focus-visible:ring-3 focus-visible:ring-ring rounded-sm",

package/demo/components/add-to-artifact.js

@@ -35,6 +35,7 @@ import "react-aria-components";
 import "../../components/autocomplete.js";
 import "../../components/slider.js";
 import "../../components/segmented.js";
+import "../../components/filters.js";
 import { Modal as q, ModalHeader as J, ModalTitle as Q, ModalBody as x, ModalFooter as g } from "../../components/modal.js";
 import "../../components/drawer.js";
 import "../../components/popover.js";
@@ -106,7 +107,7 @@ import "../../components/assistant-ui/quote.js";
 import "../../components/assistant-ui/sources.js";
 import "../../components/assistant-ui/tool-fallback.js";
 import "../../components/assistant-ui/tool-group.js";
-function ei({
+function ii({
   block: i,
   trigger: v = "button",
   className: A,
@@ -358,5 +359,5 @@ function ei({
   ] });
 }
 export {
-  ei as AddToArtifact
+  ii as AddToArtifact
 };

package/examples/README.md

@@ -13,6 +13,8 @@ root in `MotionConfig`, `ToastProvider` and `TooltipProvider`.
 | `agents-screen.tsx` | `AgentsScreen` | A full list page: `PageHeader` with a primary action, a summary strip, `Tabs` with counts leading a `SearchDisclosure`, a filter `Dropdown`, a sortable `Table` with clickable rows and a pinned action column, per-row actions with `Tooltip`s, and filtered `EmptyState`s. |
 | `settings-screen.tsx` | `SettingsScreen` | A settings card: `Card` header with a status `Badge`, an `InputField`, a `SettingList` of `SettingRow`s with `Switch` and `Button` controls, and one primary action. |
 | `workspace-header.tsx` | `WorkspaceHeaderScreen` | A page header with a status `Badge` and trailing actions, then `Tabs` with counts whose panels hold `Card`s. |
+| `campaigns-screen.tsx` | `CampaignsScreen` | The collection-screen recipe: `BodyPageHeader` with one primary action, counted `Tabs` leading `SearchDisclosure` + `Filters`, a multi-select `Table` (hover-revealed checkboxes, cohort child rows, `isActive` open row) whose page size fills the panel with `Pagination` at the bottom, a shell-level `Drawer` with status under the title and Performance / Details sections, and the fixed-height New campaign `Modal`. |
+| `campaign-analysis-screen.tsx` | `CampaignAnalysisScreen` | The record-analytics recipe: a 16px `Breadcrumbs` title with the primary action on the same row, record `Tabs`, outlined stat cards with `Progress`, and outlined `BarChart` / `LineChart` cards with header legends and printed values. |
 
 ```tsx
 // app/agents/page.tsx
@@ -25,6 +27,5 @@ export default function Page() {
 }
 ```
 
-These are the same compositions the ADS Storybook renders under
-**Recipes**, so what you see there is what these files produce. Icons come from
+Icons come from
 `@actioneer/ads/lib/icons`; never install a second icon package.

package/examples/campaign-analysis-screen.tsx

@@ -0,0 +1,138 @@
+/**
+ * Campaign analysis screen — the ADS record/analytics-page recipe, built only
+ * from ADS exports.
+ *
+ * Follows principles `leading-back-navigation`, `analytics-surfaces` and
+ * `status-language` (see `get_principles`):
+ *
+ * - The 16px Breadcrumbs trail (parent / record) IS the page title; the one
+ *   primary action sits at the right end of the same row. No back arrow and
+ *   no repeated H1.
+ * - Every stat and every chart sits in its own outlined card (1px WG3 border,
+ *   radius-l, 20px padding, flat), 16px apart.
+ * - A stat card stacks label → number + scope 4px apart, then a Progress bar
+ *   12px below that fills the card.
+ * - A chart card puts its title + scope subtitle on the left and the legend at
+ *   the right of the same row (`legendPlacement="header"`), and prints its
+ *   values on the chart — never hover-only.
+ *
+ * Copy it and replace the sample STATS / SEGMENT / REACH data with your own.
+ */
+import * as React from "react";
+import {
+  BarChart,
+  BreadcrumbItem,
+  Breadcrumbs,
+  Button,
+  LineChart,
+  Progress,
+  Tab,
+  TabList,
+  Tabs,
+} from "@actioneer/ads";
+
+export const STATS = [
+  { label: "Calls analysed", value: 3930, of: "of 4,800 calls", percent: 82, color: "primary" as const },
+  { label: "Recipients reached", value: 864, of: "of 4,800 people", percent: 18, color: "primary" as const },
+  // The one number that needs attention is the only amber one.
+  { label: "Asked for a callback", value: 144, of: "of 864 calls", percent: 17, color: "warning" as const },
+];
+
+export const SEGMENT = [
+  { day: "Oct 19", netNew: 3200, already: 1900 },
+  { day: "Oct 20", netNew: 420, already: 3080 },
+  { day: "Oct 21", netNew: 360, already: 3240 },
+  { day: "Oct 22", netNew: 440, already: 3460 },
+  { day: "Oct 23", netNew: 380, already: 3520 },
+];
+
+export const REACH = [
+  { day: "Oct 19", reached: 12, booked: 2 },
+  { day: "Oct 20", reached: 14, booked: 3 },
+  { day: "Oct 21", reached: 15, booked: 4 },
+  { day: "Oct 22", reached: 17, booked: 4 },
+  { day: "Oct 23", reached: 18, booked: 5 },
+];
+
+const TABS = ["Script", "Workflow", "Analysis", "Call logs", "Guardrails"];
+
+/** Outlined container for one stat or one chart (principle `analytics-surfaces`). */
+function DataCard({ children, label }: { children: React.ReactNode; label: string }) {
+  return (
+    <section aria-label={label} className="flex min-w-0 flex-col rounded-l border border-tertiary bg-card p-5">
+      {children}
+    </section>
+  );
+}
+
+export function CampaignAnalysisScreen() {
+  const [tab, setTab] = React.useState("Analysis");
+
+  return (
+    <div className="flex h-screen bg-background p-3 text-foreground">
+      <main aria-label="Q4 renewal reminders" className="flex min-w-0 flex-1 flex-col overflow-hidden rounded-l bg-card">
+        <div className="px-6 pt-6">
+          <Breadcrumbs actions={<Button>Pause campaign</Button>}>
+            <BreadcrumbItem href="#campaigns">Voice campaigns</BreadcrumbItem>
+            <BreadcrumbItem isCurrent>Q4 renewal reminders</BreadcrumbItem>
+          </Breadcrumbs>
+        </div>
+
+        <div className="px-6 pt-5">
+          <Tabs value={tab} onValueChange={setTab}>
+            <TabList aria-label="Campaign sections">
+              {TABS.map((item) => (
+                <Tab key={item} value={item}>{item}</Tab>
+              ))}
+            </TabList>
+          </Tabs>
+        </div>
+
+        <div className="flex min-h-0 flex-1 flex-col gap-4 overflow-y-auto px-6 pt-6 pb-6">
+          <div role="list" aria-label="Campaign progress" className="grid grid-cols-[repeat(auto-fill,minmax(16rem,1fr))] gap-4">
+            {STATS.map((stat) => (
+              <div role="listitem" key={stat.label} className="contents">
+                <DataCard label={stat.label}>
+                  <p className="text-m text-secondary">{stat.label}</p>
+                  <p className="mt-1 flex items-baseline gap-2">
+                    <span className="text-3xl tabular-nums text-foreground">{stat.value.toLocaleString("en-IN")}</span>
+                    <span className="text-m text-secondary">{stat.of}</span>
+                  </p>
+                  <Progress className="mt-3" value={stat.percent} color={stat.color} label={stat.label} />
+                </DataCard>
+              </div>
+            ))}
+          </div>
+
+          <div className="grid grid-cols-[repeat(auto-fill,minmax(24rem,1fr))] gap-4">
+            <DataCard label="Who was in the segment">
+              <BarChart
+                title="Who was in the segment"
+                subtitle="4,800 net new numbers · Oct 19 – 23"
+                legendPlacement="header"
+                data={SEGMENT}
+                categoryKey="day"
+                series={["netNew", "already"]}
+                seriesLabels={{ netNew: "Net new", already: "Already in campaign" }}
+                stacked
+                height={360}
+              />
+            </DataCard>
+            <DataCard label="Did we reach them?">
+              <LineChart
+                title="Did we reach them?"
+                subtitle="Share of 4,800 people · by day"
+                legendPlacement="header"
+                data={REACH}
+                categoryKey="day"
+                series={["reached", "booked"]}
+                seriesLabels={{ reached: "Reached", booked: "Booked" }}
+                height={360}
+              />
+            </DataCard>
+          </div>
+        </div>
+      </main>
+    </div>
+  );
+}