@sproutsocial/racine 31.3.1 → 31.4.0

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # Change Log
 
+## 31.4.0
+
+### Minor Changes
+
+- 7ce52ce: Add narrative primitives to `seeds-react-narrative-kit`: `MetricHighlight` for
+  emphasizing key figures, `NarrativeHeadline` (with highlight and roll variants) for
+  section headers, and `PullQuote` for callout quotations. All are exported through
+  `@sproutsocial/racine`.
+
+### Patch Changes
+
+- Updated dependencies [7ce52ce]
+  - @sproutsocial/seeds-react-narrative-kit@0.2.0
+  - @sproutsocial/seeds-react-accordion@0.4.47
+
 ## 31.3.1
 
 ### Patch Changes

package/dist/components.css

@@ -1078,6 +1078,225 @@
   }
 }
 
+/* --- seeds-react-narrative-kit --- */
+/**
+ * Seeds EyebrowToken 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:
+ *   <span class="seeds-eyebrow-token">May 31, 2026</span>
+ */
+
+@layer components {
+
+/* A solid gray pill matching the design: background and border are both the
+   #dee1e1 container-border-base token, which also tracks dark mode. The two
+   pixel literals below have no exact theme token — the --space scale skips 6px
+   (4px→8px) and the --font-size scale skips 12px (11px→13px) — so the design's
+   values are kept verbatim. All colors use tokens. */
+.seeds-eyebrow-token {
+  box-sizing: border-box;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--space-100); /* 2px */
+  padding: var(--space-100) var(--space-300); /* 2px / 8px */
+  border: 1px solid var(--color-container-border-base); /* #dee1e1 */
+  border-radius: var(--radius-500); /* 6px */
+  background-color: var(--color-container-border-base); /* #dee1e1 */
+  font-family: var(--font-family);
+  font-size: 12px; /* text-sm */
+  line-height: 20px;
+  font-weight: var(--font-weight-normal);
+  color: var(--color-text-body);
+  white-space: nowrap;
+}
+
+}
+
+/* --- seeds-react-narrative-kit --- */
+/**
+ * Seeds MetricHighlight 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-metric-highlight">…</div>                       // horizontal, default
+ *   <div class="seeds-metric-highlight seeds-metric-highlight-vertical">…</div>
+ *   <div class="seeds-metric-highlight seeds-metric-highlight-small">…</div>
+ *   <div class="seeds-metric-highlight seeds-metric-highlight-bare">…</div>   // no surface
+ */
+
+@layer components {
+
+.seeds-metric-highlight {
+  box-sizing: border-box;
+  display: flex;
+  align-items: flex-start;
+  gap: var(--space-350); /* 12px */
+  border-radius: var(--radius-800); /* 12px */
+  font-family: var(--font-family);
+  /* Container (default): a padded gray app surface (matches the design's
+     #f3f4f4 box). `-bare` strips it. */
+  padding: var(--space-400) var(--space-450); /* 16px / 24px */
+  background-color: var(--color-app-bg-base);
+}
+
+.seeds-metric-highlight-bare {
+  padding: 0;
+  background-color: transparent;
+}
+
+.seeds-metric-highlight-vertical {
+  flex-direction: column;
+}
+
+/* The metric block: label + value/trend. Grows to fill the row in horizontal. */
+.seeds-metric-highlight-metric {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--space-200); /* 4px */
+  flex: 1 0 0;
+  min-width: 0;
+}
+
+.seeds-metric-highlight-vertical .seeds-metric-highlight-metric {
+  width: 100%;
+  flex: 0 0 auto;
+}
+
+/* Small: label and value collapse onto a single centered row. */
+.seeds-metric-highlight-small .seeds-metric-highlight-metric {
+  flex-direction: row;
+  align-items: center;
+  gap: var(--space-300); /* 8px */
+}
+
+.seeds-metric-highlight-label {
+  margin: 0;
+  font-size: var(--font-size-300); /* 16px */
+  line-height: var(--line-height-400); /* ~28px */
+  font-weight: var(--font-weight-normal);
+  color: var(--color-text-body);
+  overflow-wrap: break-word;
+}
+
+/* In small, the label takes the slack so the value/trend align to the end. */
+.seeds-metric-highlight-small .seeds-metric-highlight-label {
+  flex: 1 0 0;
+  min-width: 0;
+}
+
+.seeds-metric-highlight-value-row {
+  display: flex;
+  align-items: center;
+  gap: var(--space-300); /* 8px */
+}
+
+.seeds-metric-highlight-small .seeds-metric-highlight-value-row {
+  justify-content: flex-end;
+}
+
+.seeds-metric-highlight-value {
+  margin: 0;
+  /* No mono token exists yet; fall back to a system monospace stack. Mirrors the
+     font/font-mono treatment in the design. */
+  font-family: var(--font-family-mono, ui-monospace, "SF Mono", SFMono-Regular, Menlo, monospace);
+  font-size: var(--font-size-700); /* 32px */
+  line-height: var(--line-height-700); /* 40px */
+  font-weight: var(--font-weight-bold);
+  color: var(--color-text-headline);
+  white-space: nowrap;
+}
+
+.seeds-metric-highlight-small .seeds-metric-highlight-value {
+  font-size: var(--font-size-600); /* 24px */
+  line-height: var(--line-height-600); /* 32px */
+}
+
+/* Trend badge — a rounded pill. Up is the positive (green) treatment; down
+   swaps to the negative (red) treatment. Color flows to the arrow + value via
+   currentColor. */
+.seeds-metric-highlight-trend {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-200); /* 4px */
+  padding: var(--space-100) var(--space-300); /* 2px / 8px */
+  border-radius: 999px;
+  font-size: var(--font-size-200); /* 13px */
+  line-height: var(--line-height-200);
+  font-weight: var(--font-weight-bold);
+  white-space: nowrap;
+  background-color: var(--color-container-bg-decorative-green);
+  color: var(--color-text-decorative-green);
+}
+
+.seeds-metric-highlight-trend-down {
+  background-color: var(--color-container-bg-decorative-red);
+  color: var(--color-text-decorative-red);
+}
+
+.seeds-metric-highlight-trend-arrow {
+  flex: 0 0 auto;
+  width: 1em;
+  height: 1em;
+  stroke: currentColor;
+  stroke-width: 1.5;
+}
+
+/* Sparkline — a single normalized polyline stretched to fit. The non-scaling
+   stroke keeps a crisp 2px line at any aspect ratio. */
+.seeds-metric-highlight-spark {
+  display: block;
+  flex: 0 0 auto;
+  /* Matches the design's Data Viz / Categorical 01 line color (#0b968f). */
+  stroke: var(--color-teal-700);
+}
+
+/* Downward trend: the red analog at the same scale step (#db3e3e). */
+.seeds-metric-highlight-spark-negative {
+  stroke: var(--color-red-700);
+}
+
+.seeds-metric-highlight-spark path {
+  stroke: inherit;
+  stroke-width: 2;
+  vector-effect: non-scaling-stroke;
+}
+
+/* Horizontal: a compact fixed-width chart beside the metric, matched to the
+   metric block's height. */
+.seeds-metric-highlight:not(.seeds-metric-highlight-vertical) .seeds-metric-highlight-spark {
+  width: 104px;
+  align-self: stretch;
+  min-height: 40px;
+}
+
+.seeds-metric-highlight-small:not(.seeds-metric-highlight-vertical) .seeds-metric-highlight-spark {
+  width: 88px;
+  height: 40px;
+  align-self: center;
+}
+
+/* Vertical: a full-width chart stacked beneath the metric. */
+.seeds-metric-highlight-vertical .seeds-metric-highlight-spark {
+  width: 100%;
+  height: 96px;
+}
+
+.seeds-metric-highlight-vertical.seeds-metric-highlight-small .seeds-metric-highlight-spark {
+  height: 56px;
+}
+
+}
+
 /* --- seeds-react-narrative-kit --- */
 /**
  * Seeds NarrativeContainer component classes.
@@ -1098,7 +1317,7 @@
   box-sizing: border-box;
   display: flex;
   flex-direction: column;
-  align-items: flex-start;
+  align-items: stretch;
   padding: var(--space-500);
   border-radius: var(--radius-800);
   box-shadow: var(--shadow-low);
@@ -1136,6 +1355,224 @@
 
 }
 
+/* --- seeds-react-narrative-kit --- */
+/**
+ * Seeds NarrativeHeadline 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:
+ *   <h2 class="seeds-narrative-headline">
+ *     Headline with a
+ *     <span class="seeds-narrative-headline-highlight">highlighted</span>
+ *     word
+ *   </h2>
+ */
+
+@layer components {
+
+/* Headline text. Rendered as an h1–h6, so reset the UA heading margins. */
+.seeds-narrative-headline {
+  box-sizing: border-box;
+  margin: 0;
+  font-family: var(--font-family);
+  font-size: var(--font-size-700);
+  line-height: var(--line-height-700);
+  font-weight: var(--font-weight-bold);
+  letter-spacing: -0.02em;
+  color: var(--color-text-headline);
+}
+
+/* Static gradient accent for a span of headline text ("highlighted word").
+   Paints the AI brand gradient onto the glyphs via background-clip. */
+.seeds-narrative-headline-highlight {
+  background: var(--color-gradient-ai);
+  -webkit-background-clip: text;
+          background-clip: text;
+  color: transparent;
+}
+
+/* -------------------------------------------------------------------------
+   "Roll" variant — vertical word roll. The active word slides into view
+   while the previous one rolls out.
+   ------------------------------------------------------------------------- */
+.seeds-narrative-headline-roll {
+  display: inline-block;
+  position: relative;
+  /* clip-path rather than overflow:hidden: overflow:hidden on an inline-block
+     snaps its baseline to the bottom margin edge, dropping the rolling word
+     below the surrounding text. clip-path keeps the natural baseline. */
+  clip-path: inset(0);
+}
+
+/* Invisible word that holds the box width to the active word. */
+.seeds-narrative-headline-roll-sizer {
+  display: inline-block;
+  visibility: hidden;
+  white-space: nowrap;
+  pointer-events: none;
+}
+
+.seeds-narrative-headline-roll-word {
+  display: inline-block;
+  position: absolute;
+  top: 0;
+  left: 0;
+  white-space: nowrap;
+  transform: translateY(100%);
+  opacity: 0;
+  transition:
+    transform var(--seeds-narrative-headline-roll-ms, 500ms) ease,
+    opacity var(--seeds-narrative-headline-roll-ms, 500ms) ease;
+}
+
+.seeds-narrative-headline-roll-word-active {
+  transform: translateY(0);
+  opacity: 1;
+}
+
+.seeds-narrative-headline-roll-word-past {
+  transform: translateY(-100%);
+  opacity: 0;
+}
+
+/* Reverse the roll direction. */
+.seeds-narrative-headline-roll-down .seeds-narrative-headline-roll-word {
+  transform: translateY(-100%);
+}
+.seeds-narrative-headline-roll-down .seeds-narrative-headline-roll-word-active {
+  transform: translateY(0);
+}
+.seeds-narrative-headline-roll-down .seeds-narrative-headline-roll-word-past {
+  transform: translateY(100%);
+}
+
+/* Gradient-painted rolling words with a slow shimmer. */
+.seeds-narrative-headline-roll-gradient .seeds-narrative-headline-roll-word {
+  background: var(--color-gradient-ai);
+  background-size: 200% 200%;
+  -webkit-background-clip: text;
+          background-clip: text;
+  color: transparent;
+  animation: seeds-narrative-headline-grad-shift 8s ease infinite;
+}
+
+@keyframes seeds-narrative-headline-grad-shift {
+  0%,
+  100% {
+    background-position: 0% 50%;
+  }
+  50% {
+    background-position: 100% 50%;
+  }
+}
+
+/* The JS cycle is already disabled under reduced-motion (the first word holds);
+   also flatten the transition and shimmer so any in-flight motion settles. */
+@media (prefers-reduced-motion: reduce) {
+  .seeds-narrative-headline-roll-word {
+    transition: none;
+  }
+  .seeds-narrative-headline-roll-gradient .seeds-narrative-headline-roll-word {
+    animation: none;
+  }
+}
+
+}
+
+/* --- seeds-react-narrative-kit --- */
+/**
+ * Seeds PullQuote 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:
+ *   <figure class="seeds-pull-quote">…</figure>            // subtle (default)
+ *   <figure class="seeds-pull-quote seeds-pull-quote-vivid">…</figure>
+ */
+
+@layer components {
+
+.seeds-pull-quote {
+  position: relative;
+  overflow: hidden;
+  box-sizing: border-box;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  margin: 0; /* reset the browser default <figure> margin */
+  /* 40px block / 48px inline — 48px is off the space scale, so derive it from
+     two tokens (40 + 8) rather than hardcoding an off-scale value. */
+  padding: var(--space-600) calc(var(--space-600) + var(--space-300));
+  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-pull-quote-vivid {
+  background-color: transparent;
+  background-image: var(--color-gradient-ai);
+  color: #fff;
+}
+
+/* The accented bar holding the quote and attribution. */
+.seeds-pull-quote-bar {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--space-450); /* 24px */
+  width: 100%;
+  padding-left: var(--space-450); /* 24px */
+  /* 4px is off the border-width scale (max token is 3px); the bar is a
+     decorative accent, mirroring NarrativeContainer's hardcoded 4px ring. The
+     subtle accent uses the AI gradient mid stop (#9747ff — no exact token). */
+  border-left: 4px solid #9747ff;
+}
+
+.seeds-pull-quote-vivid .seeds-pull-quote-bar {
+  border-left-color: #fff;
+}
+
+.seeds-pull-quote-text {
+  margin: 0; /* reset the browser default <blockquote> margin */
+  font-size: var(--font-size-600);
+  line-height: var(--line-height-600);
+  font-style: italic;
+  font-weight: var(--font-weight-normal);
+  color: inherit;
+  overflow-wrap: break-word;
+}
+
+/* Attribution row — a flex container for author name, avatar, network, etc.
+   Direct text inherits a bold, small treatment to match the display-name style;
+   richer content (e.g. an Avatar) composes freely. */
+.seeds-pull-quote-attribution {
+  display: flex;
+  align-items: center;
+  gap: var(--space-300); /* 8px */
+  font-size: var(--font-size-200);
+  line-height: var(--line-height-200);
+  font-weight: var(--font-weight-bold);
+  color: inherit;
+}
+
+}
+
 /* --- seeds-react-text --- */
 /**
  * Seeds Text component classes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sproutsocial/racine",
-  "version": "31.3.1",
+  "version": "31.4.0",
   "license": "MIT",
   "engines": {
     "node": ">=18"
@@ -73,7 +73,7 @@
   },
   "dependencies": {
     "@size-limit/file": "^11.1.6",
-    "@sproutsocial/seeds-react-accordion": "^0.4.46",
+    "@sproutsocial/seeds-react-accordion": "^0.4.47",
     "@sproutsocial/seeds-react-avatar": "^1.1.16",
     "@sproutsocial/seeds-react-badge": "^2.0.34",
     "@sproutsocial/seeds-react-banner": "^1.1.22",
@@ -111,7 +111,7 @@
     "@sproutsocial/seeds-react-message": "^1.0.48",
     "@sproutsocial/seeds-react-mixins": "^4.3.7",
     "@sproutsocial/seeds-react-modal": "^2.5.22",
-    "@sproutsocial/seeds-react-narrative-kit": "^0.1.0",
+    "@sproutsocial/seeds-react-narrative-kit": "^0.2.0",
     "@sproutsocial/seeds-react-numeral": "^1.0.47",
     "@sproutsocial/seeds-react-pagination": "^0.1.20",
     "@sproutsocial/seeds-react-panel": "^1.0.0",
@@ -163,7 +163,7 @@
     "@sproutsocial/seeds-motion": "^1.8.2",
     "@sproutsocial/seeds-networkcolor": "^2.22.0",
     "@sproutsocial/seeds-partner-logos": "^2.4.1",
-    "@sproutsocial/seeds-react-menu": "^1.15.10",
+    "@sproutsocial/seeds-react-menu": "^1.16.0",
     "@sproutsocial/seeds-react-testing-library": "*",
     "@sproutsocial/seeds-space": "^0.8.1",
     "@sproutsocial/seeds-testing": "*",