@sproutsocial/seeds-react-narrative-kit 0.6.3 → 0.6.5

package/.turbo/turbo-build.log

@@ -10,12 +10,12 @@ $ tsup --dts && cp src/narrative-container.css dist/narrative-container.css && c
 ESM Build start
 CJS dist/index.js     23.02 KB
 CJS dist/index.js.map 41.28 KB
-CJS ⚡️ Build success in 19ms
+CJS ⚡️ Build success in 21ms
 ESM dist/esm/index.js     19.45 KB
 ESM dist/esm/index.js.map 39.67 KB
-ESM ⚡️ Build success in 20ms
+ESM ⚡️ Build success in 22ms
 DTS Build start
 DTS ⚡️ Build success in 1593ms
 DTS dist/index.d.ts  24.75 KB
 DTS dist/index.d.mts 24.75 KB
-Done in 2.29s.
+Done in 2.31s.

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @sproutsocial/seeds-react-narrative-kit
 
+## 0.6.5
+
+### Patch Changes
+
+- Updated dependencies [3371484]
+  - @sproutsocial/seeds-react-theme@4.4.0
+
+## 0.6.4
+
+### Patch Changes
+
+- Updated dependencies [56661b6]
+  - @sproutsocial/seeds-react-theme@4.3.2
+
 ## 0.6.3
 
 ### Patch Changes

package/README.md

@@ -20,8 +20,8 @@ import { NarrativeContainer } from "@sproutsocial/racine";
 
 ## Exported primitives
 
-| Primitive            | Description                                                                          |
-| -------------------- | ------------------------------------------------------------------------------------ |
+| Primitive            | Description                                                                                                                  |
+| -------------------- | ---------------------------------------------------------------------------------------------------------------------------- |
 | `NarrativeContainer` | Foundational surface/card with a content slot and a top-left gradient accent border. Accepts standard `className` / `style`. |
 
 ## Adding a new primitive

package/dist/ai-container.css

@@ -11,29 +11,27 @@
  */
 
 @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
+  .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);
-}
+    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
+  /* 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;
-}
-
+  .seeds-ai-container-vivid {
+    background-color: transparent;
+    background-image: var(--color-gradient-ai);
+    color: #fff;
+  }
 }

package/dist/eyebrow-token.css

@@ -10,28 +10,26 @@
  */
 
 @layer components {
-
-/* A solid gray pill matching the design: background and border are both the
+  /* 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-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;
+  }
 }

package/dist/metric-highlight.css

@@ -13,165 +13,173 @@
  */
 
 @layer components {
-
-.seeds-metric-highlight {
-  box-sizing: border-box;
-  display: flex;
-  /* Wrap the fixed-width chart onto its own line when the metric block + chart
+  .seeds-metric-highlight {
+    box-sizing: border-box;
+    display: flex;
+    /* Wrap the fixed-width chart onto its own line when the metric block + chart
      can't sit side by side (narrow cards / mobile). The metric block claims its
      min-content width below, so a cramped row drops the chart down rather than
      overflowing the card and getting clipped by the container. */
-  flex-wrap: wrap;
-  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
+    flex-wrap: wrap;
+    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 */
-  /* Grow to fill the row, but never shrink below the metric's own content
+    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 */
+    /* Grow to fill the row, but never shrink below the metric's own content
      (the nowrap value + trend pill). That min-content floor is what forces the
      chart to wrap below on narrow cards instead of the row overflowing. */
-  flex: 1 1 auto;
-  min-width: min-content;
-}
-
-.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;
-  flex-wrap: wrap; /* trend pill drops under the value on very narrow cards */
-  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
+    flex: 1 1 auto;
+    min-width: min-content;
+  }
+
+  .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;
+    flex-wrap: wrap; /* trend pill drops under the value on very narrow cards */
+    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
+    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;
-}
-
-/* Slot for an injected chart (e.g. a data-viz SparklineChart). Layout only — no
+  .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;
+  }
+
+  /* Slot for an injected chart (e.g. a data-viz SparklineChart). Layout only — no
    stroke/background styling, so the injected chart controls its own look. Heights
    are explicit (never percentage/stretch) so a Highcharts chart always measures a
    concrete container instead of falling back to its 400px default. */
-.seeds-metric-highlight-chart {
-  box-sizing: border-box;
-  flex: 0 0 auto;
-  align-self: center;
-  /* Center the injected chart as a flex item — an inline/inline-block child
+  .seeds-metric-highlight-chart {
+    box-sizing: border-box;
+    flex: 0 0 auto;
+    align-self: center;
+    /* Center the injected chart as a flex item — an inline/inline-block child
      (e.g. the data-viz SparklineChart) otherwise sits on the text baseline with
      descender space below it, reading as vertically off-center in the slot. */
-  display: flex;
-  align-items: center;
-}
-
-.seeds-metric-highlight:not(.seeds-metric-highlight-vertical) .seeds-metric-highlight-chart {
-  width: 104px;
-  height: 48px;
-}
-
-.seeds-metric-highlight-small:not(.seeds-metric-highlight-vertical) .seeds-metric-highlight-chart {
-  width: 88px;
-  height: 40px;
-}
-
-.seeds-metric-highlight-vertical .seeds-metric-highlight-chart {
-  width: 100%;
-  height: 96px;
-}
-
-.seeds-metric-highlight-vertical.seeds-metric-highlight-small .seeds-metric-highlight-chart {
-  height: 56px;
-}
-
+    display: flex;
+    align-items: center;
+  }
+
+  .seeds-metric-highlight:not(.seeds-metric-highlight-vertical)
+    .seeds-metric-highlight-chart {
+    width: 104px;
+    height: 48px;
+  }
+
+  .seeds-metric-highlight-small:not(.seeds-metric-highlight-vertical)
+    .seeds-metric-highlight-chart {
+    width: 88px;
+    height: 40px;
+  }
+
+  .seeds-metric-highlight-vertical .seeds-metric-highlight-chart {
+    width: 100%;
+    height: 96px;
+  }
+
+  .seeds-metric-highlight-vertical.seeds-metric-highlight-small
+    .seeds-metric-highlight-chart {
+    height: 56px;
+  }
 }

package/dist/narrative-attribution.css

@@ -14,43 +14,41 @@
  */
 
 @layer components {
+  /* Main container — horizontal layout with avatar, social icon, and user name. */
+  .seeds-narrative-attribution {
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    gap: var(--space-300); /* 8px */
+    font-family: var(--font-family);
+  }
 
-/* Main container — horizontal layout with avatar, social icon, and user name. */
-.seeds-narrative-attribution {
-  box-sizing: border-box;
-  display: flex;
-  align-items: center;
-  gap: var(--space-300); /* 8px */;
-  font-family: var(--font-family);
-}
-
-/* Circular avatar image — fixed size with rounded corners. */
-.seeds-narrative-attribution-avatar {
-  width: var(--space-450); /* 24px */
-  height: var(--space-450); /* 24px */
-  border-radius: var(--radius-circular); /* 50% */
-  object-fit: cover;
-  flex-shrink: 0;
-}
+  /* Circular avatar image — fixed size with rounded corners. */
+  .seeds-narrative-attribution-avatar {
+    width: var(--space-450); /* 24px */
+    height: var(--space-450); /* 24px */
+    border-radius: var(--radius-circular); /* 50% */
+    object-fit: cover;
+    flex-shrink: 0;
+  }
 
-/* Social network icon container — flexible sizing for partner logos. */
-.seeds-narrative-attribution-social-icon {
-  flex-shrink: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-/* User name text — bold headline text with ellipsis overflow. */
-.seeds-narrative-attribution-user-name {
-  overflow: hidden;
-  color: var(--color-text-headline);
-  text-overflow: ellipsis;
-  font-family: var(--font-family);
-  font-size: var(--text-base-font-size, 14px);
-  font-style: normal;
-  font-weight: var(--font-weight-bold, 700);
-  line-height: var(--text-base-line-height, 24px);
-}
+  /* Social network icon container — flexible sizing for partner logos. */
+  .seeds-narrative-attribution-social-icon {
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
 
+  /* User name text — bold headline text with ellipsis overflow. */
+  .seeds-narrative-attribution-user-name {
+    overflow: hidden;
+    color: var(--color-text-headline);
+    text-overflow: ellipsis;
+    font-family: var(--font-family);
+    font-size: var(--text-base-font-size, 14px);
+    font-style: normal;
+    font-weight: var(--font-weight-bold, 700);
+    line-height: var(--text-base-line-height, 24px);
+  }
 }

package/dist/narrative-container.css

@@ -10,22 +10,21 @@
  */
 
 @layer components {
+  .seeds-narrative-container {
+    position: relative;
+    overflow: hidden;
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    padding: var(--space-500);
+    border-radius: var(--radius-800);
+    box-shadow: var(--shadow-low);
+    background-color: var(--color-container-bg-base);
+    font-family: var(--font-family);
+  }
 
-.seeds-narrative-container {
-  position: relative;
-  overflow: hidden;
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
-  align-items: stretch;
-  padding: var(--space-500);
-  border-radius: var(--radius-800);
-  box-shadow: var(--shadow-low);
-  background-color: var(--color-container-bg-base);
-  font-family: var(--font-family);
-}
-
-/* Grid and flex items default to `min-width: auto`, so they never shrink below
+  /* Grid and flex items default to `min-width: auto`, so they never shrink below
    their own min-content. A wide row of widgets (a metric grid, a card grid) then
    forces its column wider than the padded surface — and since the container clips
    with overflow:hidden, the excess is cut off at the edge, eating the right-hand
@@ -38,37 +37,35 @@
    default. Any component that needs a real floor (e.g. the data callout's 270px
    donut slot) sets its own min-width via a plain class and always wins, instead
    of racing this rule on source order. */
-:where(.seeds-narrative-container),
-:where(.seeds-narrative-container *) {
-  min-width: 0;
-}
+  :where(.seeds-narrative-container),
+  :where(.seeds-narrative-container *) {
+    min-width: 0;
+  }
 
-/* Decorative inner gradient border anchored to the top-left corner.
+  /* Decorative inner gradient border anchored to the top-left corner.
    A masked ::before so the gradient renders as a uniform-width ring that follows
    border-radius and never tints the content. The radial ellipse fades to
    transparent away from the corner; its x-radius (80%) is larger than its
    y-radius (60%) so the accent runs slightly further along the top edge than down
    the left edge. Brand stops mirror --color-gradient-ai — tokenize to a
    --color-gradient-* token once one exists for a fade-to-transparent variant. */
-.seeds-narrative-container-accent::before {
-  content: "";
-  position: absolute;
-  inset: 0;
-  border-radius: inherit;
-  padding: 4px;
-  background: radial-gradient(
-    ellipse 80% 60% at top left,
-    #205bc3 0%,
-    #9747ff 28%,
-    #f282f5 50%,
-    transparent 72%
-  );
-  -webkit-mask:
-    linear-gradient(#fff 0 0) content-box,
-    linear-gradient(#fff 0 0);
-  -webkit-mask-composite: xor;
-  mask-composite: exclude;
-  pointer-events: none;
-}
-
+  .seeds-narrative-container-accent::before {
+    content: "";
+    position: absolute;
+    inset: 0;
+    border-radius: inherit;
+    padding: 4px;
+    background: radial-gradient(
+      ellipse 80% 60% at top left,
+      #205bc3 0%,
+      #9747ff 28%,
+      #f282f5 50%,
+      transparent 72%
+    );
+    -webkit-mask: linear-gradient(#fff 0 0) content-box,
+      linear-gradient(#fff 0 0);
+    -webkit-mask-composite: xor;
+    mask-composite: exclude;
+    pointer-events: none;
+  }
 }