@sproutsocial/seeds-react-narrative-kit 0.2.0 → 0.4.0

package/.turbo/turbo-build.log

@@ -1,5 +1,5 @@
 yarn run v1.22.22
-$ tsup --dts && cp src/narrative-container.css dist/narrative-container.css && cp src/narrative-headline.css dist/narrative-headline.css && cp src/pull-quote.css dist/pull-quote.css && cp src/metric-highlight.css dist/metric-highlight.css && cp src/eyebrow-token.css dist/eyebrow-token.css
+$ tsup --dts && cp src/narrative-container.css dist/narrative-container.css && cp src/narrative-headline.css dist/narrative-headline.css && cp src/pull-quote.css dist/pull-quote.css && cp src/metric-highlight.css dist/metric-highlight.css && cp src/eyebrow-token.css dist/eyebrow-token.css && cp src/narrative-summary.css dist/narrative-summary.css && cp src/narrative-divider.css dist/narrative-divider.css && cp src/narrative-ordered-list.css dist/narrative-ordered-list.css && cp src/narrative-data-callout.css dist/narrative-data-callout.css && cp src/ai-container.css dist/ai-container.css
 CLI Building entry: src/index.ts
 CLI Using tsconfig: tsconfig.json
 CLI tsup v8.5.0
@@ -8,14 +8,14 @@ $ tsup --dts && cp src/narrative-container.css dist/narrative-container.css && c
 CLI Cleaning output folder
 CJS Build start
 ESM Build start
-CJS dist/index.js     12.80 KB
-CJS dist/index.js.map 23.24 KB
-CJS ⚡️ Build success in 22ms
-ESM dist/esm/index.js     10.40 KB
-ESM dist/esm/index.js.map 22.42 KB
-ESM ⚡️ Build success in 23ms
+CJS dist/index.js     18.81 KB
+CJS dist/index.js.map 33.28 KB
+CJS ⚡️ Build success in 19ms
+ESM dist/esm/index.js     15.63 KB
+ESM dist/esm/index.js.map 32.00 KB
+ESM ⚡️ Build success in 20ms
 DTS Build start
-DTS ⚡️ Build success in 3112ms
-DTS dist/index.d.ts  10.04 KB
-DTS dist/index.d.mts 10.04 KB
-Done in 4.67s.
+DTS ⚡️ Build success in 1732ms
+DTS dist/index.d.ts  19.92 KB
+DTS dist/index.d.mts 19.92 KB
+Done in 2.47s.

package/CHANGELOG.md

@@ -1,5 +1,51 @@
 # @sproutsocial/seeds-react-narrative-kit
 
+## 0.4.0
+
+### Minor Changes
+
+- e5a385e: Add the `NarrativeDataCallout` primitive to `seeds-react-narrative-kit` — a
+  horizontally oriented callout that pairs an injected data-viz `visual` (left,
+  ~1/3 width) with a block of body copy (right, ~2/3). The kit ships no chart of
+  its own; the `visual` slot accepts any node (the stories drop in a v2
+  `DonutChart`), so narrative-kit takes no runtime dependency on data-viz —
+  mirroring `MetricHighlight`'s `sparkline` slot. An optional `visualLabel`
+  applies an `img` role with an accessible name to the visual. Layout is driven by
+  a container query, so it collapses to a stacked column (visual on top, text
+  below) based on the width the component is given rather than the viewport.
+  Exported through `@sproutsocial/racine`.
+- 979bf12: Add the `NarrativeOrderedList` primitive to `seeds-react-narrative-kit` — a
+  numbered list of action items pairing a large ordinal (01, 02, …) with a title,
+  an optional description, and an optional call-to-action slot. Supports
+  `vertical` (default, stacked) and `horizontal` (row of equal columns)
+  orientations via a container query, so the horizontal layout collapses back to a
+  stack when its container is narrow. Exported through `@sproutsocial/racine`.
+
+### Patch Changes
+
+- be93d78: add AiContainer
+- Updated dependencies [a13a571]
+  - @sproutsocial/seeds-react-theme@4.1.1
+
+## 0.3.0
+
+### Minor Changes
+
+- 1aca1d1: `MetricHighlight` now takes a `sparkline` render slot instead of owning the
+  chart itself. Pass any node (e.g. a `<SparklineChart />` from
+  `@sproutsocial/seeds-react-data-viz/sparkline`) to render it beside/below the
+  metric; omit it to render the metric on its own. This replaces the previous
+  `data` and `chart` props.
+- 0b37765: Add the `NarrativeDivider` primitive to `seeds-react-narrative-kit` — a full-width,
+  1px horizontal rule for separating sections within a narrative brief, using the
+  `container.border` token (dark-mode aware). Exported through `@sproutsocial/racine`.
+- 0b37765: Add the `NarrativeSummary` primitive to `seeds-react-narrative-kit` — a composed
+  block pairing a lead column (eyebrow + headline + optional action) with a Summary
+  section and a Key themes list, laid out as a container-query-driven grid with
+  `three-column` and `two-column` (1/3 | 2/3) arrangements. Also adds a `size` prop
+  (`"default" | "small"`) to `NarrativeHeadline`. Exported through
+  `@sproutsocial/racine`.
+
 ## 0.2.0
 
 ### Minor Changes

package/dist/ai-container.css

@@ -0,0 +1,39 @@
+/**
+ * Seeds AIContainer component classes.
+ * Use these instead of writing out individual Tailwind utility classes.
+ *
+ * Requires @sproutsocial/seeds-react-theme/dist/theme-all.css imported for
+ * CSS variable definitions and dark mode support.
+ *
+ * Usage:
+ *   <div class="seeds-ai-container">…</div>            // subtle (default)
+ *   <div class="seeds-ai-container seeds-ai-container-vivid">…</div>
+ */
+
+@layer components {
+
+.seeds-ai-container {
+  position: relative;
+  overflow: hidden;
+  box-sizing: border-box;
+  border-radius: var(--radius-800);
+  box-shadow: var(--shadow-low);
+  font-family: var(--font-family);
+  /* Subtle (default): the 20% AI gradient tint composited over the base
+     surface. --color-gradient-ai-subtle is already translucent, so layering it
+     over the opaque base color produces the soft wash. */
+  background-color: var(--color-container-bg-base);
+  background-image: var(--color-gradient-ai-subtle);
+  color: var(--color-text-headline);
+}
+
+/* Vivid: the full-saturation AI gradient with white content. White has no
+   semantic Seeds token; it is part of the AI gradient treatment (mirrors the
+   raw brand hex used in --color-gradient-ai). */
+.seeds-ai-container-vivid {
+  background-color: transparent;
+  background-image: var(--color-gradient-ai);
+  color: #fff;
+}
+
+}

package/dist/esm/index.js

@@ -42,18 +42,24 @@ var NarrativeContainer_default = NarrativeContainer;
 // src/NarrativeHeadline/NarrativeHeadline.tsx
 import * as React2 from "react";
 import { jsx as jsx2 } from "react/jsx-runtime";
-var NarrativeHeadline = React2.forwardRef(({ children, headingLevel = 2, className, ...props }, ref) => {
-  const Heading = `h${headingLevel}`;
-  return /* @__PURE__ */ jsx2(
-    Heading,
-    {
-      ref,
-      className: cn("seeds-narrative-headline", className),
-      ...props,
-      children
-    }
-  );
-});
+var NarrativeHeadline = React2.forwardRef(
+  ({ children, headingLevel = 2, size = "default", className, ...props }, ref) => {
+    const Heading = `h${headingLevel}`;
+    return /* @__PURE__ */ jsx2(
+      Heading,
+      {
+        ref,
+        className: cn(
+          "seeds-narrative-headline",
+          { "seeds-narrative-headline-small": size === "small" },
+          className
+        ),
+        ...props,
+        children
+      }
+    );
+  }
+);
 NarrativeHeadline.displayName = "NarrativeHeadline";
 var NarrativeHeadline_default = NarrativeHeadline;
 
@@ -118,7 +124,14 @@ var NarrativeHeadlineRoll = React4.forwardRef(
         style: merged,
         ...rest,
         children: [
-          /* @__PURE__ */ jsx4("span", { className: "seeds-narrative-headline-roll-sizer", "aria-hidden": "true", children: words[i] }),
+          /* @__PURE__ */ jsx4(
+            "span",
+            {
+              className: "seeds-narrative-headline-roll-sizer",
+              "aria-hidden": "true",
+              children: words[i]
+            }
+          ),
           words.map((w, idx) => /* @__PURE__ */ jsx4(
             "span",
             {
@@ -150,6 +163,8 @@ var PullQuote = React5.forwardRef(
         ref,
         className: cn(
           "seeds-pull-quote",
+          "seeds-ai-container",
+          { "seeds-ai-container-vivid": appearance === "vivid" },
           { "seeds-pull-quote-vivid": appearance === "vivid" },
           className
         ),
@@ -169,82 +184,36 @@ var PullQuote_default = PullQuote;
 import * as React6 from "react";
 import { jsx as jsx6 } from "react/jsx-runtime";
 var EyebrowToken = React6.forwardRef(
-  ({ children, className, ...props }, ref) => /* @__PURE__ */ jsx6(
-    "span",
-    {
-      ref,
-      className: cn("seeds-eyebrow-token", className),
-      ...props,
-      children
-    }
-  )
+  ({ children, className, ...props }, ref) => /* @__PURE__ */ jsx6("span", { ref, className: cn("seeds-eyebrow-token", className), ...props, children })
 );
 EyebrowToken.displayName = "EyebrowToken";
 var EyebrowToken_default = EyebrowToken;
 
-// src/MetricHighlight/MetricHighlight.tsx
+// src/NarrativeDivider/NarrativeDivider.tsx
 import * as React7 from "react";
-import { jsx as jsx7, jsxs as jsxs3 } from "react/jsx-runtime";
-var SPARK_VIEWBOX_WIDTH = 100;
-var SPARK_VIEWBOX_HEIGHT = 32;
-var SPARK_PADDING = 2;
-var DEFAULT_SPARK = [6, 10, 8, 13, 11, 16];
-var smoothPath = (points) => {
-  if (points.length < 2) {
-    const p = points[0];
-    return p ? `M ${p.x},${p.y}` : "";
-  }
-  let d = `M ${points[0].x.toFixed(2)},${points[0].y.toFixed(2)}`;
-  for (let i = 0; i < points.length - 1; i++) {
-    const p1 = points[i];
-    const p2 = points[i + 1];
-    const p0 = points[i - 1] ?? p1;
-    const p3 = points[i + 2] ?? p2;
-    const cp1x = p1.x + (p2.x - p0.x) / 6;
-    const cp1y = p1.y + (p2.y - p0.y) / 6;
-    const cp2x = p2.x - (p3.x - p1.x) / 6;
-    const cp2y = p2.y - (p3.y - p1.y) / 6;
-    d += ` C ${cp1x.toFixed(2)},${cp1y.toFixed(2)} ${cp2x.toFixed(
-      2
-    )},${cp2y.toFixed(2)} ${p2.x.toFixed(2)},${p2.y.toFixed(2)}`;
+import { jsx as jsx7 } from "react/jsx-runtime";
+var NarrativeDivider = React7.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx7(
+  "hr",
+  {
+    ref,
+    className: cn("seeds-narrative-divider", className),
+    ...props
   }
-  return d;
-};
-var Sparkline = ({
-  data,
-  negative
-}) => {
-  const min = Math.min(...data);
-  const max = Math.max(...data);
-  const range = max - min || 1;
-  const usableHeight = SPARK_VIEWBOX_HEIGHT - SPARK_PADDING * 2;
-  const points = data.map((value, i) => ({
-    x: data.length === 1 ? SPARK_VIEWBOX_WIDTH / 2 : i / (data.length - 1) * SPARK_VIEWBOX_WIDTH,
-    // Invert y so larger values sit higher in the chart.
-    y: SPARK_PADDING + (1 - (value - min) / range) * usableHeight
-  }));
-  return /* @__PURE__ */ jsx7(
-    "svg",
-    {
-      className: cn("seeds-metric-highlight-spark", {
-        "seeds-metric-highlight-spark-negative": Boolean(negative)
-      }),
-      viewBox: `0 0 ${SPARK_VIEWBOX_WIDTH} ${SPARK_VIEWBOX_HEIGHT}`,
-      preserveAspectRatio: "none",
-      "aria-hidden": true,
-      focusable: false,
-      children: /* @__PURE__ */ jsx7("path", { d: smoothPath(points), fill: "none", strokeLinecap: "round" })
-    }
-  );
-};
-var TrendArrow = ({ direction }) => /* @__PURE__ */ jsx7(
+));
+NarrativeDivider.displayName = "NarrativeDivider";
+var NarrativeDivider_default = NarrativeDivider;
+
+// src/MetricHighlight/MetricHighlight.tsx
+import * as React8 from "react";
+import { jsx as jsx8, jsxs as jsxs3 } from "react/jsx-runtime";
+var TrendArrow = ({ direction }) => /* @__PURE__ */ jsx8(
   "svg",
   {
     className: "seeds-metric-highlight-trend-arrow",
     viewBox: "0 0 16 16",
     "aria-hidden": true,
     focusable: false,
-    children: direction === "up" ? /* @__PURE__ */ jsx7(
+    children: direction === "up" ? /* @__PURE__ */ jsx8(
       "path",
       {
         d: "M4.5 11.5 11.5 4.5M11.5 4.5H5.5M11.5 4.5V10.5",
@@ -252,7 +221,7 @@ var TrendArrow = ({ direction }) => /* @__PURE__ */ jsx7(
         strokeLinecap: "round",
         strokeLinejoin: "round"
       }
-    ) : /* @__PURE__ */ jsx7(
+    ) : /* @__PURE__ */ jsx8(
       "path",
       {
         d: "M4.5 4.5 11.5 11.5M11.5 11.5H5.5M11.5 11.5V5.5",
@@ -263,7 +232,11 @@ var TrendArrow = ({ direction }) => /* @__PURE__ */ jsx7(
     )
   }
 );
-var TrendBadge = ({ direction = "up", value, ...rest }) => /* @__PURE__ */ jsxs3(
+var TrendBadge = ({
+  direction = "up",
+  value,
+  ...rest
+}) => /* @__PURE__ */ jsxs3(
   "span",
   {
     className: cn("seeds-metric-highlight-trend", {
@@ -271,27 +244,23 @@ var TrendBadge = ({ direction = "up", value, ...rest }) => /* @__PURE__ */ jsxs3
     }),
     ...rest,
     children: [
-      /* @__PURE__ */ jsx7(TrendArrow, { direction }),
-      value != null && /* @__PURE__ */ jsx7("span", { className: "seeds-metric-highlight-trend-value", children: value })
+      /* @__PURE__ */ jsx8(TrendArrow, { direction }),
+      value != null && /* @__PURE__ */ jsx8("span", { className: "seeds-metric-highlight-trend-value", children: value })
     ]
   }
 );
-var MetricHighlight = React7.forwardRef(
+var MetricHighlight = React8.forwardRef(
   ({
     label,
     value,
     trend,
-    data,
-    chart = true,
+    sparkline,
     appearance = "horizontal",
     size = "default",
     container = true,
     className,
     ...props
   }, ref) => {
-    const isDown = trend?.direction === "down";
-    const resolvedData = data ?? (isDown ? [...DEFAULT_SPARK].reverse() : DEFAULT_SPARK);
-    const showChart = chart && resolvedData.length > 0;
     return /* @__PURE__ */ jsxs3(
       "div",
       {
@@ -308,13 +277,16 @@ var MetricHighlight = React7.forwardRef(
         ...props,
         children: [
           /* @__PURE__ */ jsxs3("div", { className: "seeds-metric-highlight-metric", children: [
-            /* @__PURE__ */ jsx7("p", { className: "seeds-metric-highlight-label", children: label }),
+            /* @__PURE__ */ jsx8("p", { className: "seeds-metric-highlight-label", children: label }),
             /* @__PURE__ */ jsxs3("div", { className: "seeds-metric-highlight-value-row", children: [
-              /* @__PURE__ */ jsx7("p", { className: "seeds-metric-highlight-value", children: value }),
-              trend != null && /* @__PURE__ */ jsx7(TrendBadge, { ...trend })
+              /* @__PURE__ */ jsx8("p", { className: "seeds-metric-highlight-value", children: value }),
+              trend != null && /* @__PURE__ */ jsx8(TrendBadge, { ...trend })
             ] })
           ] }),
-          showChart && /* @__PURE__ */ jsx7(Sparkline, { data: resolvedData, negative: isDown })
+          sparkline != null && // Layout-only slot (bounded dimensions per horizontal/vertical/small)
+          // for a consumer-supplied chart. It controls its own look; the slot
+          // only sizes and centers it.
+          /* @__PURE__ */ jsx8("div", { className: "seeds-metric-highlight-chart", children: sparkline })
         ]
       }
     );
@@ -322,13 +294,167 @@ var MetricHighlight = React7.forwardRef(
 );
 MetricHighlight.displayName = "MetricHighlight";
 var MetricHighlight_default = MetricHighlight;
+
+// src/NarrativeSummary/NarrativeSummary.tsx
+import * as React9 from "react";
+import { jsx as jsx9, jsxs as jsxs4 } from "react/jsx-runtime";
+var NarrativeSummary = React9.forwardRef(
+  ({
+    eyebrow,
+    headline,
+    headingLevel = 2,
+    action,
+    summary,
+    summaryLabel = "Summary",
+    keyThemes,
+    keyThemesLabel = "Key themes",
+    layout = "three-column",
+    className,
+    ...props
+  }, ref) => {
+    const hasKeyThemes = keyThemes != null && keyThemes.length > 0;
+    return /* @__PURE__ */ jsx9(
+      "div",
+      {
+        ref,
+        className: cn("seeds-narrative-summary", className),
+        ...props,
+        children: /* @__PURE__ */ jsxs4(
+          "div",
+          {
+            className: cn("seeds-narrative-summary-grid", {
+              "seeds-narrative-summary-two-column": layout === "two-column"
+            }),
+            children: [
+              /* @__PURE__ */ jsxs4("div", { className: "seeds-narrative-summary-lead", children: [
+                eyebrow != null && /* @__PURE__ */ jsx9(EyebrowToken_default, { children: eyebrow }),
+                /* @__PURE__ */ jsx9("div", { className: "seeds-narrative-summary-headline", children: /* @__PURE__ */ jsx9(NarrativeHeadline_default, { size: "small", headingLevel, children: headline }) }),
+                action != null && /* @__PURE__ */ jsx9("div", { className: "seeds-narrative-summary-action", children: action })
+              ] }),
+              /* @__PURE__ */ jsxs4("div", { className: "seeds-narrative-summary-content", children: [
+                summary != null && /* @__PURE__ */ jsxs4("section", { className: "seeds-narrative-summary-section", children: [
+                  /* @__PURE__ */ jsx9("p", { className: "seeds-narrative-summary-label", children: summaryLabel }),
+                  /* @__PURE__ */ jsx9("p", { className: "seeds-narrative-summary-text", children: summary })
+                ] }),
+                hasKeyThemes && /* @__PURE__ */ jsxs4("section", { className: "seeds-narrative-summary-section", children: [
+                  /* @__PURE__ */ jsx9("p", { className: "seeds-narrative-summary-label", children: keyThemesLabel }),
+                  /* @__PURE__ */ jsx9("ul", { className: "seeds-narrative-summary-list", children: keyThemes.map((theme, i) => /* @__PURE__ */ jsx9("li", { children: theme }, i)) })
+                ] })
+              ] })
+            ]
+          }
+        )
+      }
+    );
+  }
+);
+NarrativeSummary.displayName = "NarrativeSummary";
+var NarrativeSummary_default = NarrativeSummary;
+
+// src/NarrativeOrderedList/NarrativeOrderedList.tsx
+import * as React10 from "react";
+import { jsx as jsx10, jsxs as jsxs5 } from "react/jsx-runtime";
+var NarrativeOrderedList = React10.forwardRef(({ items, orientation = "vertical", className, ...props }, ref) => {
+  return (
+    // The outer element establishes the query container. The ol inside switches
+    // direction based on this element's width — a container query can only style
+    // descendants of the container, never the container element itself.
+    /* @__PURE__ */ jsx10(
+      "div",
+      {
+        ref,
+        className: cn("seeds-narrative-ordered-list", className),
+        ...props,
+        children: /* @__PURE__ */ jsx10(
+          "ol",
+          {
+            className: cn("seeds-narrative-ordered-list-track", {
+              "seeds-narrative-ordered-list-horizontal": orientation === "horizontal"
+            }),
+            children: items.map((item, i) => /* @__PURE__ */ jsxs5("li", { className: "seeds-narrative-ordered-list-item", children: [
+              /* @__PURE__ */ jsx10(
+                "span",
+                {
+                  className: "seeds-narrative-ordered-list-number",
+                  "aria-hidden": "true",
+                  children: String(i + 1).padStart(2, "0")
+                }
+              ),
+              /* @__PURE__ */ jsxs5("div", { className: "seeds-narrative-ordered-list-body", children: [
+                /* @__PURE__ */ jsx10("p", { className: "seeds-narrative-ordered-list-title", children: item.title }),
+                item.description != null && /* @__PURE__ */ jsx10("p", { className: "seeds-narrative-ordered-list-description", children: item.description }),
+                item.action != null && /* @__PURE__ */ jsx10("div", { className: "seeds-narrative-ordered-list-action", children: item.action })
+              ] })
+            ] }, i))
+          }
+        )
+      }
+    )
+  );
+});
+NarrativeOrderedList.displayName = "NarrativeOrderedList";
+var NarrativeOrderedList_default = NarrativeOrderedList;
+
+// src/NarrativeDataCallout/NarrativeDataCallout.tsx
+import * as React11 from "react";
+import { jsx as jsx11, jsxs as jsxs6 } from "react/jsx-runtime";
+var NarrativeDataCallout = React11.forwardRef(({ visual, children, visualLabel, className, ...props }, ref) => /* @__PURE__ */ jsx11(
+  "div",
+  {
+    ref,
+    className: cn("seeds-narrative-data-callout", className),
+    ...props,
+    children: /* @__PURE__ */ jsxs6("div", { className: "seeds-narrative-data-callout-row", children: [
+      /* @__PURE__ */ jsx11(
+        "div",
+        {
+          className: "seeds-narrative-data-callout-visual",
+          role: visualLabel != null ? "img" : void 0,
+          "aria-label": visualLabel,
+          children: visual
+        }
+      ),
+      /* @__PURE__ */ jsx11("div", { className: "seeds-narrative-data-callout-body", children })
+    ] })
+  }
+));
+NarrativeDataCallout.displayName = "NarrativeDataCallout";
+var NarrativeDataCallout_default = NarrativeDataCallout;
+
+// src/AIContainer/AIContainer.tsx
+import * as React12 from "react";
+import { jsx as jsx12 } from "react/jsx-runtime";
+var AIContainer = React12.forwardRef(
+  ({ children, appearance = "subtle", className, ...props }, ref) => {
+    return /* @__PURE__ */ jsx12(
+      "div",
+      {
+        ref,
+        className: cn(
+          "seeds-ai-container",
+          { "seeds-ai-container-vivid": appearance === "vivid" },
+          className
+        ),
+        ...props,
+        children
+      }
+    );
+  }
+);
+AIContainer.displayName = "AIContainer";
+var AIContainer_default = AIContainer;
 export {
+  AIContainer_default as AIContainer,
   EyebrowToken_default as EyebrowToken,
   MetricHighlight_default as MetricHighlight,
   NarrativeContainer_default as NarrativeContainer,
+  NarrativeDataCallout_default as NarrativeDataCallout,
+  NarrativeDivider_default as NarrativeDivider,
   NarrativeHeadline_default as NarrativeHeadline,
   NarrativeHeadlineHighlight_default as NarrativeHeadlineHighlight,
   NarrativeHeadlineRoll_default as NarrativeHeadlineRoll,
+  NarrativeOrderedList_default as NarrativeOrderedList,
+  NarrativeSummary_default as NarrativeSummary,
   PullQuote_default as PullQuote
 };
 //# sourceMappingURL=index.js.map