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

package/src/MetricHighlight/MetricHighlight.stories.tsx

@@ -1,7 +1,31 @@
 import React from "react";
 import type { Meta, StoryObj } from "@storybook/react";
+import { SparklineChart } from "@sproutsocial/seeds-react-data-viz/sparkline";
 import MetricHighlight from "./MetricHighlight";
 import "../metric-highlight.css";
+import "@sproutsocial/seeds-react-data-viz/sparkline.css";
+
+/**
+ * MetricHighlight has no built-in chart — the `sparkline` slot accepts any node.
+ * These stories inject the real `SparklineChart` from
+ * `@sproutsocial/seeds-react-data-viz`; narrative-kit takes no runtime
+ * dependency on data-viz (only these stories do, via a devDependency). The
+ * injected chart fills the slot with `className="h-full w-full"`.
+ */
+const RISING = [4, 6, 5, 8, 7, 10];
+const FALLING = [18, 16, 17, 13, 14, 10];
+
+const spark = (
+  data: number[],
+  variant: "line" | "bar" = "line"
+): React.ReactNode => (
+  <SparklineChart
+    variant={variant}
+    description="Weekly trend"
+    data={data}
+    className="h-full w-full"
+  />
+);
 
 const meta = {
   title: "Narrative Kit/MetricHighlight",
@@ -10,16 +34,14 @@ const meta = {
     label: "Insight metric",
     value: "123",
     trend: { direction: "up", value: "240%", "aria-label": "up 240%" },
+    sparkline: spark(RISING),
   },
 } satisfies Meta<typeof MetricHighlight>;
 
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-/**
- * Horizontal, default size, padded surface, numeric trend badge, and the
- * default sparkline (no `data` passed).
- */
+/** Horizontal, default size, padded surface, numeric trend badge, and a sparkline. */
 export const Default: Story = {
   args: {
     className: "w-80",
@@ -50,38 +72,39 @@ export const WithoutContainer: Story = {
   },
 };
 
-/** Metric without the sparkline. */
+/** Metric on its own — omit the `sparkline` slot to drop the chart. */
 export const WithoutChart: Story = {
   args: {
     className: "w-80",
-    chart: false,
+    sparkline: undefined,
   },
 };
 
 /**
- * Negative trend — the badge swaps to the red treatment and the default
- * sparkline slopes downward in red.
+ * Negative trend — the badge swaps to the red treatment and the sparkline (which
+ * auto-colors from its data) slopes downward in red.
  */
 export const TrendDown: Story = {
   args: {
     className: "w-80",
     value: "87",
     trend: { direction: "down", value: "12%", "aria-label": "down 12%" },
+    sparkline: spark(FALLING),
   },
 };
 
-/** Consumer-supplied data overrides the default series. */
-export const CustomData: Story = {
+/** Icon-only trend badge (no number). */
+export const TrendIconOnly: Story = {
   args: {
     className: "w-80",
-    data: [4, 9, 6, 12, 8, 15, 11, 18, 14, 22],
+    trend: { direction: "up", "aria-label": "trending up" },
   },
 };
 
-/** Icon-only trend badge (no number). */
-export const TrendIconOnly: Story = {
+/** The slot accepts the bar variant of the sparkline just as well. */
+export const BarSparkline: Story = {
   args: {
     className: "w-80",
-    trend: { direction: "up", "aria-label": "trending up" },
+    sparkline: spark(RISING, "bar"),
   },
 };

package/src/MetricHighlight/MetricHighlight.tsx

@@ -5,91 +5,6 @@ import type {
   TypeMetricHighlightTrend,
 } from "./MetricHighlightTypes";
 
-/** Fixed viewBox the sparkline normalizes into; CSS stretches it to fit. */
-const SPARK_VIEWBOX_WIDTH = 100;
-const SPARK_VIEWBOX_HEIGHT = 32;
-/** Inset so the stroke at the min/max points isn't clipped by the viewBox edge. */
-const SPARK_PADDING = 2;
-
-/**
- * Default sparkline series used when the consumer doesn't pass `data` — a gently
- * rising wave. It's reversed for a downward trend so the line slopes to match.
- */
-const DEFAULT_SPARK = [6, 10, 8, 13, 11, 16];
-
-/**
- * Build a smooth SVG path through `points` using a Catmull-Rom spline converted
- * to cubic béziers. Each segment's control points are derived from its
- * neighbors, so the curve passes through every data point with soft, rounded
- * transitions (matching the design) rather than sharp polyline corners.
- */
-const smoothPath = (points: { x: number; y: number }[]) => {
-  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++) {
-    // The loop bound guarantees p1 and p2; p0/p3 clamp to the endpoints.
-    const p1 = points[i]!;
-    const p2 = points[i + 1]!;
-    const p0 = points[i - 1] ?? p1;
-    const p3 = points[i + 2] ?? p2;
-    // Catmull-Rom → bézier control points (tension 1/6).
-    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)}`;
-  }
-  return d;
-};
-
-/**
- * Sparkline — an inline SVG path normalized from `data` into a fixed viewBox and
- * smoothed into a soft curve. `preserveAspectRatio="none"` plus a non-scaling
- * stroke (set in CSS) lets a single path stretch to any width/height while
- * keeping a crisp line.
- */
-const Sparkline = ({
-  data,
-  negative,
-}: {
-  data: number[];
-  negative?: boolean;
-}) => {
-  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 (
-    <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
-      focusable={false}
-    >
-      <path d={smoothPath(points)} fill="none" strokeLinecap="round" />
-    </svg>
-  );
-};
-
 /** Directional arrow glyph for the trend badge (decorative; `aria-hidden`). */
 const TrendArrow = ({ direction }: { direction: "up" | "down" }) => (
   <svg
@@ -116,7 +31,11 @@ const TrendArrow = ({ direction }: { direction: "up" | "down" }) => (
   </svg>
 );
 
-const TrendBadge = ({ direction = "up", value, ...rest }: TypeMetricHighlightTrend) => (
+const TrendBadge = ({
+  direction = "up",
+  value,
+  ...rest
+}: TypeMetricHighlightTrend) => (
   <span
     className={cn("seeds-metric-highlight-trend", {
       "seeds-metric-highlight-trend-down": direction === "down",
@@ -133,21 +52,25 @@ const TrendBadge = ({ direction = "up", value, ...rest }: TypeMetricHighlightTre
 /**
  * MetricHighlight — a narrative primitive that spotlights a single metric: a
  * label, a large monospace value, an optional trend badge (a directional arrow
- * plus an optional number such as "240%"), and an optional sparkline.
+ * plus an optional number such as "240%"), and an optional chart supplied via
+ * the `sparkline` slot (e.g. a `<SparklineChart />` from
+ * `@sproutsocial/seeds-react-data-viz/sparkline`).
  *
  * Styled via `metric-highlight.css` (Seeds CSS custom properties); consumers
  * import the classes through `@sproutsocial/racine/css/components`. Layout flexes
  * across `appearance` (horizontal/vertical) and `size` (default/small); surface
  * overrides are done with standard `className` / `style`.
  */
-const MetricHighlight = React.forwardRef<HTMLDivElement, TypeMetricHighlightProps>(
+const MetricHighlight = React.forwardRef<
+  HTMLDivElement,
+  TypeMetricHighlightProps
+>(
   (
     {
       label,
       value,
       trend,
-      data,
-      chart = true,
+      sparkline,
       appearance = "horizontal",
       size = "default",
       container = true,
@@ -156,14 +79,6 @@ const MetricHighlight = React.forwardRef<HTMLDivElement, TypeMetricHighlightProp
     },
     ref
   ) => {
-    const isDown = trend?.direction === "down";
-    // Fall back to a sensible default series, sloped to match the trend, so the
-    // chart renders without the consumer wiring up data. An explicit `data`
-    // (including an empty array to opt out) always wins.
-    const resolvedData =
-      data ?? (isDown ? [...DEFAULT_SPARK].reverse() : DEFAULT_SPARK);
-    const showChart = chart && resolvedData.length > 0;
-
     return (
       <div
         ref={ref}
@@ -185,7 +100,12 @@ const MetricHighlight = React.forwardRef<HTMLDivElement, TypeMetricHighlightProp
             {trend != null && <TrendBadge {...trend} />}
           </div>
         </div>
-        {showChart && <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.
+          <div className="seeds-metric-highlight-chart">{sparkline}</div>
+        )}
       </div>
     );
   }

package/src/MetricHighlight/MetricHighlightTypes.ts

@@ -28,16 +28,13 @@ export interface TypeMetricHighlightProps
   /** Optional trend badge — a directional arrow plus an optional value. */
   trend?: TypeMetricHighlightTrend;
   /**
-   * Sparkline data points. When omitted, a sensible default series is used
-   * (sloped to match `trend`). Pass an explicit array to override, or an empty
-   * array to opt out of the chart.
+   * Chart slot. When provided, this node renders in the chart area beside/below
+   * the metric — e.g. a `<SparklineChart />` from
+   * `@sproutsocial/seeds-react-data-viz/sparkline`. Omit it to render the metric
+   * on its own. The injected node controls its own look; the slot only sizes and
+   * centers it (pass `className="h-full w-full"` to fill).
    */
-  data?: number[];
-  /**
-   * Render the sparkline.
-   * @default true
-   */
-  chart?: boolean;
+  sparkline?: React.ReactNode;
   /**
    * Layout direction.
    * - `horizontal` — metric block beside the sparkline.

package/src/MetricHighlight/__tests__/MetricHighlight.test.tsx

@@ -2,8 +2,6 @@ import React from "react";
 import { render, screen } from "@sproutsocial/seeds-react-testing-library";
 import MetricHighlight from "../MetricHighlight";
 
-const DATA = [1, 4, 2, 6, 3];
-
 describe("MetricHighlight", () => {
   it("renders the label and value", () => {
     render(<MetricHighlight label="Engagement" value="123" />);
@@ -33,7 +31,9 @@ describe("MetricHighlight", () => {
       />
     );
 
-    expect(container.querySelector(".seeds-metric-highlight-trend")).toBeInTheDocument();
+    expect(
+      container.querySelector(".seeds-metric-highlight-trend")
+    ).toBeInTheDocument();
     expect(
       container.querySelector(".seeds-metric-highlight-trend-value")
     ).not.toBeInTheDocument();
@@ -54,32 +54,6 @@ describe("MetricHighlight", () => {
     ).toBeInTheDocument();
   });
 
-  it("marks the sparkline negative for a downward trend", () => {
-    const { container, rerender } = render(
-      <MetricHighlight
-        label="Engagement"
-        value="123"
-        data={DATA}
-        trend={{ direction: "down", value: "12%" }}
-      />
-    );
-    expect(
-      container.querySelector(".seeds-metric-highlight-spark-negative")
-    ).toBeInTheDocument();
-
-    rerender(
-      <MetricHighlight
-        label="Engagement"
-        value="123"
-        data={DATA}
-        trend={{ direction: "up", value: "12%" }}
-      />
-    );
-    expect(
-      container.querySelector(".seeds-metric-highlight-spark-negative")
-    ).not.toBeInTheDocument();
-  });
-
   it("omits the trend badge when no trend is provided", () => {
     const { container } = render(
       <MetricHighlight label="Engagement" value="123" />
@@ -90,37 +64,28 @@ describe("MetricHighlight", () => {
     ).not.toBeInTheDocument();
   });
 
-  it("renders the sparkline when data is provided", () => {
+  it("renders the sparkline slot node in the chart area", () => {
     const { container } = render(
-      <MetricHighlight label="Engagement" value="123" data={DATA} />
+      <MetricHighlight
+        label="Engagement"
+        value="123"
+        sparkline={<div data-testid="custom-spark">chart</div>}
+      />
     );
 
+    expect(screen.getByTestId("custom-spark")).toBeInTheDocument();
     expect(
-      container.querySelector(".seeds-metric-highlight-spark")
+      container.querySelector(".seeds-metric-highlight-chart")
     ).toBeInTheDocument();
   });
 
-  it("renders a default sparkline when no data is provided", () => {
+  it("omits the chart area when no sparkline slot is provided", () => {
     const { container } = render(
       <MetricHighlight label="Engagement" value="123" />
     );
 
     expect(
-      container.querySelector(".seeds-metric-highlight-spark")
-    ).toBeInTheDocument();
-  });
-
-  it("omits the sparkline when chart is false or data is empty", () => {
-    const { container, rerender } = render(
-      <MetricHighlight label="Engagement" value="123" data={DATA} chart={false} />
-    );
-    expect(
-      container.querySelector(".seeds-metric-highlight-spark")
-    ).not.toBeInTheDocument();
-
-    rerender(<MetricHighlight label="Engagement" value="123" data={[]} />);
-    expect(
-      container.querySelector(".seeds-metric-highlight-spark")
+      container.querySelector(".seeds-metric-highlight-chart")
     ).not.toBeInTheDocument();
   });
 

package/src/NarrativeDataCallout/NarrativeDataCallout.stories.tsx

@@ -0,0 +1,71 @@
+import React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import { DonutChart } from "@sproutsocial/seeds-react-data-viz/donut";
+import NarrativeDataCallout from "./NarrativeDataCallout";
+import NarrativeContainer from "../NarrativeContainer/NarrativeContainer";
+import "../narrative-data-callout.css";
+import "../narrative-container.css";
+
+/**
+ * NarrativeDataCallout has no built-in chart — the `visual` slot accepts any
+ * node. These stories inject the real v2 `DonutChart` from
+ * `@sproutsocial/seeds-react-data-viz/donut`; narrative-kit takes no runtime
+ * dependency on data-viz (only these stories do, via a devDependency). The
+ * injected chart fills the left third; the copy fills the right two-thirds.
+ */
+const donut = (): React.ReactNode => (
+  <DonutChart
+    description="Completion rate: 80% complete"
+    data={[
+      { name: "Complete", value: 80 },
+      { name: "Remaining", value: 20 },
+    ]}
+  />
+);
+
+const BODY =
+  "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec odio leo, " +
+  "gravida vitae sodales vitae, tempor eget ligula. Vestibulum nec enim eget " +
+  "mi placerat finibus. Donec tempor tincidunt elit.";
+
+const meta = {
+  title: "Narrative Kit/NarrativeDataCallout",
+  component: NarrativeDataCallout,
+  args: {
+    visual: donut(),
+    children: BODY,
+  },
+} satisfies Meta<typeof NarrativeDataCallout>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/** Bare inner content — the visual on the left third, copy on the right. */
+export const Default: Story = {
+  args: {
+    className: "w-full max-w-240",
+  },
+};
+
+/**
+ * Dropped into a `NarrativeContainer` to reproduce the gradient-accented card
+ * from the design. This is the intended composition — the callout itself carries
+ * no surface.
+ */
+export const InContainer: Story = {
+  render: (args) => (
+    <NarrativeContainer className="w-full max-w-240">
+      <NarrativeDataCallout {...args} />
+    </NarrativeContainer>
+  ),
+};
+
+/**
+ * Narrow width — the container query collapses the row to a stacked column
+ * (visual on top, copy below). Resize the canvas to watch it reflow.
+ */
+export const Stacked: Story = {
+  args: {
+    className: "w-80",
+  },
+};

package/src/NarrativeDataCallout/NarrativeDataCallout.tsx

@@ -0,0 +1,50 @@
+import * as React from "react";
+import { cn } from "../_internal/cn";
+import type { TypeNarrativeDataCalloutProps } from "./NarrativeDataCalloutTypes";
+
+/**
+ * NarrativeDataCallout — 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` from `@sproutsocial/seeds-react-data-viz`.
+ * narrative-kit takes no runtime dependency on data-viz (mirrors MetricHighlight's
+ * `sparkline` slot).
+ *
+ * Renders inner content only — it carries no surface, shadow, or accent of its
+ * own. Drop it into a `NarrativeContainer` (see the stories) to reproduce the
+ * card look.
+ *
+ * Layout is a flex row driven by a container query, so it collapses to a stacked
+ * column (visual on top, text below) based on the width the component is actually
+ * given, not the viewport.
+ *
+ * Styled via `narrative-data-callout.css` (Seeds CSS custom properties); consumers
+ * import the classes through `@sproutsocial/racine/css/components`. Overrides come
+ * via standard `className` / `style`.
+ */
+const NarrativeDataCallout = React.forwardRef<
+  HTMLDivElement,
+  TypeNarrativeDataCalloutProps
+>(({ visual, children, visualLabel, className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("seeds-narrative-data-callout", className)}
+    {...props}
+  >
+    <div className="seeds-narrative-data-callout-row">
+      <div
+        className="seeds-narrative-data-callout-visual"
+        role={visualLabel != null ? "img" : undefined}
+        aria-label={visualLabel}
+      >
+        {visual}
+      </div>
+      <div className="seeds-narrative-data-callout-body">{children}</div>
+    </div>
+  </div>
+));
+
+NarrativeDataCallout.displayName = "NarrativeDataCallout";
+
+export default NarrativeDataCallout;

package/src/NarrativeDataCallout/NarrativeDataCalloutTypes.ts

@@ -0,0 +1,18 @@
+import type * as React from "react";
+
+export interface TypeNarrativeDataCalloutProps
+  extends React.HTMLAttributes<HTMLDivElement> {
+  /**
+   * Data-viz component rendered in the left slot (occupies ~1/3 of the width).
+   * The kit ships no chart of its own — drop in any data-viz node, e.g. a v2
+   * `DonutChart` from `@sproutsocial/seeds-react-data-viz`.
+   */
+  visual: React.ReactNode;
+  /** Body copy / description occupying the right two-thirds. */
+  children: React.ReactNode;
+  /**
+   * Accessible label for the visual slot region. Omit when the injected visual
+   * already carries its own description/label.
+   */
+  visualLabel?: string;
+}

package/src/NarrativeDataCallout/__tests__/NarrativeDataCallout.test.tsx

@@ -0,0 +1,69 @@
+import React from "react";
+import { render, screen } from "@sproutsocial/seeds-react-testing-library";
+import NarrativeDataCallout from "../NarrativeDataCallout";
+
+describe("NarrativeDataCallout", () => {
+  it("renders the body copy", () => {
+    render(
+      <NarrativeDataCallout visual={<div>chart</div>}>
+        Engagement climbed this month.
+      </NarrativeDataCallout>
+    );
+
+    expect(
+      screen.getByText("Engagement climbed this month.")
+    ).toBeInTheDocument();
+  });
+
+  it("renders the injected visual node in the visual slot", () => {
+    const { container } = render(
+      <NarrativeDataCallout visual={<div data-testid="custom-viz">chart</div>}>
+        Body
+      </NarrativeDataCallout>
+    );
+
+    expect(screen.getByTestId("custom-viz")).toBeInTheDocument();
+    expect(
+      container.querySelector(".seeds-narrative-data-callout-visual")
+    ).toBeInTheDocument();
+  });
+
+  it("applies the root class and merges a custom className", () => {
+    const { container } = render(
+      <NarrativeDataCallout visual={<div>chart</div>} className="custom">
+        Body
+      </NarrativeDataCallout>
+    );
+
+    const root = container.querySelector(".seeds-narrative-data-callout");
+    expect(root).toBeInTheDocument();
+    expect(root).toHaveClass("custom");
+  });
+
+  it("labels the visual region when visualLabel is provided", () => {
+    render(
+      <NarrativeDataCallout
+        visual={<div>chart</div>}
+        visualLabel="Completion rate"
+      >
+        Body
+      </NarrativeDataCallout>
+    );
+
+    expect(
+      screen.getByRole("img", { name: "Completion rate" })
+    ).toBeInTheDocument();
+  });
+
+  it("forwards its ref to the underlying div element", () => {
+    const ref = React.createRef<HTMLDivElement>();
+    render(
+      <NarrativeDataCallout ref={ref} visual={<div>chart</div>}>
+        Body
+      </NarrativeDataCallout>
+    );
+
+    expect(ref.current).toBeInstanceOf(HTMLDivElement);
+    expect(ref.current?.tagName).toBe("DIV");
+  });
+});

package/src/NarrativeDataCallout/index.ts

@@ -0,0 +1,2 @@
+export { default as NarrativeDataCallout } from "./NarrativeDataCallout";
+export type { TypeNarrativeDataCalloutProps } from "./NarrativeDataCalloutTypes";

package/src/NarrativeDivider/NarrativeDivider.stories.tsx

@@ -0,0 +1,33 @@
+import React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import NarrativeDivider from "./NarrativeDivider";
+import "../narrative-divider.css";
+
+const meta = {
+  title: "Narrative Kit/NarrativeDivider",
+  component: NarrativeDivider,
+  decorators: [
+    (Story) => (
+      <div style={{ width: 480 }}>
+        <Story />
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof NarrativeDivider>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/** A full-width 1px rule spanning its container. */
+export const Default: Story = {};
+
+/** Sitting between two blocks of content, as it would in a brief. */
+export const BetweenSections: Story = {
+  render: () => (
+    <div style={{ width: 480 }}>
+      <p>Insight metrics</p>
+      <NarrativeDivider />
+      <p>Headline and summary</p>
+    </div>
+  ),
+};

package/src/NarrativeDivider/NarrativeDivider.tsx

@@ -0,0 +1,30 @@
+import * as React from "react";
+import { cn } from "../_internal/cn";
+import type { TypeNarrativeDividerProps } from "./NarrativeDividerTypes";
+
+/**
+ * NarrativeDivider — a full-width, 1px horizontal rule that separates sections
+ * within a narrative brief (e.g. a row of metrics from the headline/summary
+ * block below it).
+ *
+ * Renders a semantic <hr> stripped of its user-agent margins and borders, then
+ * draws a single 1px line with the container-border-base token (#dee1e1, which
+ * also tracks dark mode). Styled via narrative-divider.css (Seeds CSS custom
+ * properties); consumers import the classes through
+ * @sproutsocial/racine/css/components. Overrides come via standard className /
+ * style.
+ */
+const NarrativeDivider = React.forwardRef<
+  HTMLHRElement,
+  TypeNarrativeDividerProps
+>(({ className, ...props }, ref) => (
+  <hr
+    ref={ref}
+    className={cn("seeds-narrative-divider", className)}
+    {...props}
+  />
+));
+
+NarrativeDivider.displayName = "NarrativeDivider";
+
+export default NarrativeDivider;

package/src/NarrativeDivider/NarrativeDividerTypes.ts

@@ -0,0 +1,4 @@
+import type * as React from "react";
+
+/** NarrativeDivider takes no extra props — just standard <hr> attributes. */
+export type TypeNarrativeDividerProps = React.HTMLAttributes<HTMLHRElement>;