@sableui/react 0.6.1 → 0.7.0

package/dist/components/status-dot/status-dot.variants.js

@@ -0,0 +1,28 @@
+// src/components/status-dot/status-dot.variants.ts
+import { cva } from "class-variance-authority";
+var statusDotVariants = cva("inline-block shrink-0 rounded-full", {
+  variants: {
+    tone: {
+      neutral: "bg-muted-foreground",
+      standard: "bg-tone-standard",
+      success: "bg-success",
+      warning: "bg-tone-warning",
+      info: "bg-tone-info",
+      edition: "bg-tone-edition",
+      collectible: "bg-tone-collectible",
+      destructive: "bg-destructive"
+    },
+    size: {
+      sm: "size-1.5",
+      md: "size-2",
+      lg: "size-2.5"
+    }
+  },
+  defaultVariants: {
+    tone: "neutral",
+    size: "md"
+  }
+});
+export {
+  statusDotVariants
+};

package/dist/components/stepper/index.js

@@ -0,0 +1,17 @@
+// src/components/stepper/index.ts
+import {
+  Stepper,
+  StepperItem
+} from "./stepper.js";
+import {
+  stepperConnectorVariants,
+  stepperIndicatorVariants
+} from "./stepper.variants.js";
+import { stepperMeta } from "./stepper.meta.js";
+export {
+  Stepper,
+  StepperItem,
+  stepperConnectorVariants,
+  stepperIndicatorVariants,
+  stepperMeta
+};

package/dist/components/stepper/stepper.js

@@ -0,0 +1,161 @@
+// src/components/stepper/stepper.tsx
+import {
+  Children,
+  createContext,
+  isValidElement,
+  useContext
+} from "react";
+import { Icon } from "../../icon/index.js";
+import { cn } from "../../lib/cn.js";
+import { useTypeTier } from "../../lib/density.js";
+import {
+  stepperConnectorVariants,
+  stepperDotConnectorVariants,
+  stepperDotVariants,
+  stepperIndicatorVariants
+} from "./stepper.variants.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var DEFAULT_STATUS_LABELS = {
+  complete: "Completed",
+  current: "Current step",
+  upcoming: "Not started",
+  error: "Needs attention"
+};
+var StepContext = createContext(null);
+function Stepper({
+  current = 0,
+  orientation = "horizontal",
+  indicator = "number",
+  statusLabels,
+  className,
+  children,
+  ...props
+}) {
+  const items = Children.toArray(children).filter(isValidElement);
+  const labels = { ...DEFAULT_STATUS_LABELS, ...statusLabels };
+  return /* @__PURE__ */ jsx(
+    "ol",
+    {
+      "data-orientation": orientation,
+      className: cn(
+        // isolate: the indicators' z-10 (above the connector) stays inside the
+        // stepper instead of rising over sticky headers and nav bars.
+        "isolate flex w-full",
+        orientation === "horizontal" ? "flex-row items-start gap-3" : "flex-col",
+        className
+      ),
+      ...props,
+      children: items.map((child, index) => /* @__PURE__ */ jsx(
+        StepContext.Provider,
+        {
+          value: {
+            index,
+            count: items.length,
+            current,
+            orientation,
+            indicator,
+            statusLabels: labels
+          },
+          children: child
+        },
+        child.key ?? index
+      ))
+    }
+  );
+}
+Stepper.displayName = "Stepper";
+function StepperItem({
+  title,
+  description,
+  status: statusProp,
+  onSelect,
+  className,
+  ...props
+}) {
+  const ctx = useContext(StepContext);
+  const tier = useTypeTier();
+  const index = ctx?.index ?? 0;
+  const count = ctx?.count ?? 1;
+  const orientation = ctx?.orientation ?? "horizontal";
+  const dot = (ctx?.indicator ?? "number") === "dot";
+  const current = ctx?.current ?? 0;
+  const status = statusProp ?? (index < current ? "complete" : index === current ? "current" : "upcoming");
+  const isLast = index === count - 1;
+  const isCurrent = index === current;
+  const statusLabel = (ctx?.statusLabels ?? DEFAULT_STATUS_LABELS)[status];
+  const body = /* @__PURE__ */ jsxs(Fragment, { children: [
+    dot ? (
+      // One title line tall (the step carries the title's type), so the dot
+      // centres on the title's first line at any density.
+      /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "relative z-10 flex h-[1lh] shrink-0 items-center", children: /* @__PURE__ */ jsx("span", { className: stepperDotVariants({ status }) }) })
+    ) : /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: stepperIndicatorVariants({ status }), children: status === "complete" ? /* @__PURE__ */ jsx(Icon, { name: "check", className: "text-sm" }) : status === "error" ? /* @__PURE__ */ jsx(Icon, { name: "warning", className: "text-sm" }) : index + 1 }),
+    /* @__PURE__ */ jsxs(
+      "span",
+      {
+        className: cn(
+          "flex min-w-0 flex-col gap-0.5 text-start",
+          !dot && "min-h-(--control-xs) justify-center"
+        ),
+        children: [
+          /* @__PURE__ */ jsxs(
+            "span",
+            {
+              className: cn(
+                tier.control,
+                "underline-offset-2 motion-interactive group-hover/step:underline",
+                status === "upcoming" && "text-muted-foreground",
+                status === "error" && "text-destructive",
+                (status === "complete" || status === "current") && "text-foreground"
+              ),
+              children: [
+                title,
+                /* @__PURE__ */ jsx("span", { className: "sr-only", children: ` (${statusLabel})` })
+              ]
+            }
+          ),
+          description ? /* @__PURE__ */ jsx("span", { className: cn("text-muted-foreground", tier.secondary), children: description }) : null
+        ]
+      }
+    )
+  ] });
+  return /* @__PURE__ */ jsxs(
+    "li",
+    {
+      "aria-current": isCurrent ? "step" : void 0,
+      "data-status": status,
+      className: cn(
+        orientation === "horizontal" ? cn("flex min-w-0 items-start gap-3", isLast ? "flex-none" : "flex-1") : cn("relative", !isLast && "pb-6"),
+        // The dot and its line are measured in the title's `lh` and `em`.
+        dot && tier.control,
+        className
+      ),
+      ...props,
+      children: [
+        onSelect ? /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: onSelect,
+            className: "group/step flex min-w-0 items-start gap-3 rounded-sm motion-interactive focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+            children: body
+          }
+        ) : /* @__PURE__ */ jsx("div", { className: "flex min-w-0 items-start gap-3", children: body }),
+        isLast ? null : /* @__PURE__ */ jsx(
+          "span",
+          {
+            "aria-hidden": "true",
+            className: (dot ? stepperDotConnectorVariants : stepperConnectorVariants)({
+              orientation,
+              filled: status === "complete"
+            })
+          }
+        )
+      ]
+    }
+  );
+}
+StepperItem.displayName = "StepperItem";
+export {
+  Stepper,
+  StepperItem
+};

package/dist/components/stepper/stepper.meta.js

@@ -0,0 +1,190 @@
+// src/components/stepper/stepper.meta.ts
+var stepperMeta = {
+  name: "Stepper",
+  summary: 'Where the user is in a multi-step flow \u2014 an ordered list of numbered steps, horizontal or vertical, each complete, current, upcoming or in error, with aria-current="step" on the current one. `indicator="dot"` turns it into a timeline of events (an order\'s delivery) with dots instead of numbers.',
+  status: "stable",
+  keywords: [
+    "stepper",
+    "steps",
+    "wizard",
+    "multi-step form",
+    "checkout steps",
+    "onboarding progress",
+    "progress steps",
+    "timeline"
+  ],
+  usage: {
+    description: "Use Stepper above or beside a flow that is split into a known, small number of named steps \u2014 checkout, onboarding, an import wizard \u2014 so the user can see how far they have come and what is left. It reports position; the flow's own Back and Continue buttons move it.",
+    bestPractices: [
+      {
+        guidance: "do",
+        description: 'Drive it from one number (`current`) and override a single step\'s `status` only for what a number cannot say \u2014 a completed step that now needs attention is `status="error"`.'
+      },
+      {
+        guidance: "do",
+        description: 'Name steps with a word or two ("Shipping", "Payment"). Go vertical when steps need a description or there are more than five; horizontal titles truncate first.'
+      },
+      {
+        guidance: "do",
+        description: "Give completed steps `onSelect` only when going back to edit them actually works, and keep the user's later answers when they do."
+      },
+      {
+        guidance: "dont",
+        description: "Do not use Stepper for a task with unknown length or for a percentage. That is Progress; a stepper promises a fixed set of named stops."
+      },
+      {
+        guidance: "dont",
+        description: "Do not use it as navigation between independent sections. Sections the user can visit in any order are Tabs; a stepper implies each step depends on the one before."
+      },
+      {
+        guidance: "dont",
+        description: "Do not make upcoming steps pressable to skip ahead. A step that looks reachable but is not is worse than one that is plainly locked."
+      }
+    ],
+    anatomy: [
+      {
+        name: "Stepper",
+        required: true,
+        description: "The ordered list. Takes `current` and `orientation`, and an aria-label naming the flow."
+      },
+      {
+        name: "StepperItem",
+        required: true,
+        description: 'One step: a numbered disc (a check when complete, a warning mark on error) \u2014 or, with `indicator="dot"`, a dot centred on the title\'s first line \u2014 a title, and an optional description.'
+      },
+      {
+        name: "Connector",
+        required: false,
+        description: "The line to the next step, filled once this step is complete. Drawn automatically between items."
+      }
+    ]
+  },
+  related: {
+    components: ["Progress", "Tabs", "Form", "Button"]
+  },
+  props: [
+    {
+      name: "current",
+      type: "number",
+      default: "0",
+      description: "Zero-based index of the current step. Earlier steps derive complete, later ones upcoming."
+    },
+    {
+      name: "orientation",
+      type: '"horizontal" | "vertical"',
+      default: '"horizontal"',
+      description: "Horizontal for a short flow across the top of a form; vertical for long flows, narrow columns or steps with descriptions."
+    },
+    {
+      name: "indicator",
+      type: '"number" | "dot"',
+      default: '"number"',
+      description: "`number` for a flow the user moves through; `dot` for a timeline of events (delivery tracking, a document's history) where the position number adds nothing. The dot centres on the title's first line and scales with its type at every density."
+    },
+    {
+      name: "statusLabels",
+      type: "Partial<Record<StepStatus, string>>",
+      description: "Screen-reader status words appended to each title (Completed, Current step, Not started, Needs attention). Override to localize."
+    },
+    {
+      name: "aria-label",
+      type: "string",
+      description: 'Names the flow ("Checkout progress"). Every Stepper needs one.'
+    }
+  ],
+  subcomponents: [
+    {
+      name: "StepperItem",
+      type: "{ title: ReactNode; description?: ReactNode; status?: StepStatus; onSelect?: () => void } + li props",
+      description: "One step. `status` overrides the derived state; `onSelect` makes the disc and title a button for returning to the step."
+    }
+  ],
+  variants: {
+    orientation: ["horizontal", "vertical"],
+    indicator: ["number", "dot"],
+    status: ["complete", "current", "upcoming", "error"]
+  },
+  tokensUsed: [
+    "primary",
+    "primary-foreground",
+    "background",
+    "foreground",
+    "muted-foreground",
+    "border-strong",
+    "destructive",
+    "destructive-foreground",
+    "ring"
+  ],
+  motion: [
+    {
+      slot: "arrival",
+      recipe: "none",
+      part: "Stepper",
+      why: "The stepper frames the flow and is on screen before any step is. Animating it in would compete with the step content, which is what changed."
+    },
+    {
+      slot: "response",
+      recipe: "motion-interactive",
+      part: "StepperItem",
+      why: "Only steps with onSelect respond, and the eased underline is what tells a returning user that this completed step can be reopened while the upcoming ones cannot."
+    },
+    {
+      slot: "transition",
+      recipe: "motion-interactive",
+      part: "Indicator",
+      why: "When the user continues, the disc they leave fills and its connector darkens. Easing the colour makes that read as one step completing rather than the whole bar re-rendering."
+    },
+    {
+      slot: "activity",
+      recipe: "none",
+      part: "Stepper",
+      why: "A step is a place, not a process. Saving or validating between steps belongs on the Continue button's loading state; a pulsing disc would suggest the step itself is busy."
+    }
+  ],
+  a11y: [
+    "Renders an ordered list, so assistive tech announces the step count and each step's position.",
+    'The current step carries aria-current="step"; every title also gets a visually hidden status word (Completed, Not started, Needs attention), so state never depends on colour or the disc glyph.',
+    "Discs and connectors are aria-hidden \u2014 the number is already the list position.",
+    "Steps with onSelect render as native buttons with a visible focus ring; steps without it are not focusable."
+  ],
+  examples: [
+    {
+      label: "Checkout",
+      code: `<Stepper current={1} aria-label="Checkout progress">
+	<StepperItem title="Cart" />
+	<StepperItem title="Shipping" />
+	<StepperItem title="Payment" />
+	<StepperItem title="Review" />
+</Stepper>`
+    },
+    {
+      label: "Vertical with descriptions",
+      code: `<Stepper orientation="vertical" current={2} aria-label="Workspace setup">
+	<StepperItem title="Create account" description="Email verified" />
+	<StepperItem title="Invite team" description="3 people invited" />
+	<StepperItem title="Connect data" description="Choose a source to import from" />
+	<StepperItem title="Launch" />
+</Stepper>`
+    },
+    {
+      label: "Delivery timeline (dots)",
+      code: `<Stepper orientation="vertical" indicator="dot" current={2} aria-label="Delivery status">
+	<StepperItem title="Order placed" description="Oct 9, 10:14 AM" />
+	<StepperItem title="Printed and packed" description="Oct 10, 4:02 PM" />
+	<StepperItem title="Out for delivery" description="Arriving today by 6 PM" />
+	<StepperItem title="Delivered" />
+</Stepper>`
+    },
+    {
+      label: "A completed step with an error",
+      code: `<Stepper current={2} aria-label="Checkout progress">
+	<StepperItem title="Cart" onSelect={() => console.log("cart")} />
+	<StepperItem title="Shipping" status="error" description="Address needs a postcode" onSelect={() => console.log("shipping")} />
+	<StepperItem title="Payment" />
+</Stepper>`
+    }
+  ]
+};
+export {
+  stepperMeta
+};

package/dist/components/stepper/stepper.variants.js

@@ -0,0 +1,72 @@
+// src/components/stepper/stepper.variants.ts
+import { cva } from "class-variance-authority";
+var stepperIndicatorVariants = cva(
+  "relative z-10 flex size-(--control-xs) shrink-0 items-center justify-center rounded-full border text-label-sm motion-interactive",
+  {
+    variants: {
+      status: {
+        complete: "border-primary bg-primary text-primary-foreground",
+        current: "border-2 border-primary bg-[var(--sable-surface-bg,var(--background))] text-primary",
+        upcoming: "border-border-strong bg-[var(--sable-surface-bg,var(--background))] text-muted-foreground",
+        error: "border-destructive bg-destructive text-destructive-foreground"
+      }
+    },
+    defaultVariants: {
+      status: "upcoming"
+    }
+  }
+);
+var stepperDotVariants = cva(
+  "size-[0.75em] shrink-0 rounded-full motion-interactive",
+  {
+    variants: {
+      status: {
+        complete: "bg-primary",
+        current: "bg-[var(--sable-surface-bg,var(--background))] ring-[0.1875em] ring-primary ring-inset",
+        upcoming: "bg-border-strong",
+        error: "bg-destructive"
+      }
+    },
+    defaultVariants: {
+      status: "upcoming"
+    }
+  }
+);
+var stepperDotConnectorVariants = cva("shrink-0 rounded-full motion-interactive", {
+  variants: {
+    orientation: {
+      horizontal: "mt-[calc(0.5lh_-_1px)] h-0.5 min-w-4 flex-1",
+      vertical: "absolute start-[0.375em] top-[0.5lh] -bottom-[0.5lh] w-0.5 -translate-x-1/2 rtl:translate-x-1/2"
+    },
+    filled: {
+      true: "bg-primary",
+      false: "bg-border-strong"
+    }
+  },
+  defaultVariants: {
+    orientation: "horizontal",
+    filled: false
+  }
+});
+var stepperConnectorVariants = cva("shrink-0 rounded-full motion-interactive", {
+  variants: {
+    orientation: {
+      horizontal: "mt-[calc(var(--control-xs)/2)] h-px min-w-4 flex-1",
+      vertical: "absolute start-[calc(var(--control-xs)/2_-_0.5px)] top-[calc(var(--control-xs)_+_--spacing(1))] bottom-1 w-px"
+    },
+    filled: {
+      true: "bg-primary",
+      false: "bg-border-strong"
+    }
+  },
+  defaultVariants: {
+    orientation: "horizontal",
+    filled: false
+  }
+});
+export {
+  stepperConnectorVariants,
+  stepperDotConnectorVariants,
+  stepperDotVariants,
+  stepperIndicatorVariants
+};

package/dist/components/streaming-text/index.js

@@ -0,0 +1,7 @@
+// src/components/streaming-text/index.ts
+import { StreamingText } from "./streaming-text.js";
+import { streamingTextMeta } from "./streaming-text.meta.js";
+export {
+  StreamingText,
+  streamingTextMeta
+};

package/dist/components/streaming-text/streaming-text.js

@@ -0,0 +1,55 @@
+"use client";
+
+// src/components/streaming-text/streaming-text.tsx
+import { cn } from "../../lib/cn.js";
+import { useMotion } from "../../motion/MotionProvider.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+function StreamingText({
+  text,
+  streaming = false,
+  as,
+  split = "word",
+  caret = true,
+  className,
+  ...props
+}) {
+  const Comp = as ?? "p";
+  const { enabled } = useMotion();
+  const units = split === "char" ? Array.from(text) : text.split(/(\s+)/).filter(Boolean);
+  const last = units.length - 1;
+  return /* @__PURE__ */ jsxs(
+    Comp,
+    {
+      "aria-busy": streaming || void 0,
+      className: cn("text-body-md text-foreground", className),
+      ...props,
+      children: [
+        units.map((unit, i) => /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: cn(
+              enabled && "motion-stream-in",
+              // Only the newest unit, and only mid-stream. Softening a run that
+              // has stopped growing would leave the answer permanently out of
+              // focus at its own last word.
+              enabled && streaming && i === last && "stream-tail"
+            ),
+            children: unit
+          },
+          i
+        )),
+        streaming && caret ? /* @__PURE__ */ jsx(
+          "span",
+          {
+            "aria-hidden": true,
+            "data-streaming": "true",
+            className: "ml-0.5 inline-block h-[1em] w-[2px] translate-y-[0.15em] rounded-full bg-foreground align-baseline motion-caret"
+          }
+        ) : null
+      ]
+    }
+  );
+}
+export {
+  StreamingText
+};

package/dist/components/streaming-text/streaming-text.meta.js

@@ -0,0 +1,147 @@
+// src/components/streaming-text/streaming-text.meta.ts
+var streamingTextMeta = {
+  name: "StreamingText",
+  summary: "Prose arriving from a live source, a token at a time. Each token resolves out of blur, the trailing edge stays soft while more is coming, and a steady caret marks the write head.",
+  status: "stable",
+  keywords: [
+    "streaming",
+    "stream",
+    "tokens",
+    "typewriter",
+    "generation",
+    "assistant",
+    "llm",
+    "caret",
+    "incremental"
+  ],
+  usage: {
+    description: "Use StreamingText for text whose final length is unknown while it renders \u2014 a model's answer, a live transcript, a log line being written. It is the counterpart to ThinkingOrb and Spinner: those cover the wait BEFORE the first token, this covers the arrival of the tokens themselves.",
+    bestPractices: [
+      {
+        guidance: "do",
+        description: "Grow `text` and let the component do the rest. It assumes an append-only string and keys units by index, so React mounts only the new spans \u2014 re-rendering a longer string animates what was added and leaves what the reader has already read alone."
+      },
+      {
+        guidance: "do",
+        description: "Drop `streaming` to false the moment the source closes. That is what removes the caret and the softened tail, and their disappearance is the only signal the reader gets that the answer is complete."
+      },
+      {
+        guidance: "do",
+        description: "Turn `caret` off when something adjacent already reports the wait \u2014 a spinner in the message header, a status row beneath. Two indicators for one wait read as two things happening."
+      },
+      {
+        guidance: "dont",
+        description: "Do not use it for text that is already complete. Staging known text on scroll is TextReveal (a `motion` export, not a component folder), which computes a stagger from the full string; StreamingText cannot, because nothing here knows the length. Using it for static prose animates the whole paragraph on every mount and says 'still generating' about something that finished."
+      },
+      {
+        guidance: "dont",
+        description: "Do not wrap it in an aria-live region. Every token would be announced, which is unusable; the component sets `aria-busy` instead. Announce once when the turn settles, from whatever owns the turn."
+      },
+      {
+        guidance: "dont",
+        description: 'Do not pass `split="char"` for paragraph-length text. It is one element per character \u2014 thousands of nodes for an answer, each with its own animation \u2014 and word-splitting is indistinguishable at prose reading speed. Reserve it for a headline-length string.'
+      }
+    ],
+    anatomy: [
+      {
+        name: "Container",
+        required: true,
+        description: "The paragraph (or `as` element). Carries `aria-busy` while output is incomplete."
+      },
+      {
+        name: "Unit",
+        required: true,
+        description: "One word or character. Animates once on mount and never again; the newest one carries the softened tail while streaming."
+      },
+      {
+        name: "Caret",
+        required: false,
+        description: "The write head, shown while streaming. Steady rather than blinking \u2014 see `motion-caret`."
+      }
+    ]
+  },
+  related: {
+    components: ["ThinkingOrb", "Message", "Bubble"]
+  },
+  props: [
+    {
+      name: "text",
+      type: "string",
+      description: "The text received so far. Assumed append-only: the component keys units by index precisely so a grown string mounts only its new spans."
+    },
+    {
+      name: "streaming",
+      type: "boolean",
+      default: "false",
+      description: "Whether more is still coming. Drives the caret, the softened trailing edge, and `aria-busy`."
+    },
+    {
+      name: "as",
+      type: "ElementType",
+      default: '"p"',
+      description: "Render container element."
+    },
+    {
+      name: "split",
+      type: '"word" | "char"',
+      default: '"word"',
+      description: "Split granularity. `char` is one element per character \u2014 short strings only."
+    },
+    {
+      name: "caret",
+      type: "boolean",
+      default: "true",
+      description: "Show the caret while streaming. Turn it off when something adjacent already reports the wait."
+    }
+  ],
+  tokensUsed: ["foreground"],
+  motion: [
+    {
+      slot: "arrival",
+      recipe: "motion-stream-in",
+      part: "Unit",
+      why: "Each token resolves out of blur rather than fading. A fade makes every word a separate event; blur reads as the word coming into focus, so a paragraph arrives as one sentence being written instead of a queue of arrivals."
+    },
+    {
+      slot: "response",
+      recipe: "none",
+      part: "Container",
+      why: "It is prose, not a control. Selecting and copying it is the only interaction, and both are native."
+    },
+    {
+      slot: "transition",
+      recipe: "none",
+      part: "Container",
+      why: "There is no state to move between \u2014 streaming to complete is marked by the caret and tail leaving, not by the text changing. Animating the whole paragraph on completion would re-stage text the reader already read."
+    },
+    {
+      slot: "activity",
+      recipe: "motion-caret",
+      part: "Caret",
+      why: 'The caret is the write head, and it is deliberately STEADY (`data-streaming="true"` suppresses the blink). A blink during arrival puts two rhythms on screen \u2014 text advancing at one rate, a caret flashing at another \u2014 and the flashing one carries no information the moving text has not already given.'
+    }
+  ],
+  a11y: [
+    "The text is real text in the accessibility tree: units are ordinary spans, not aria-hidden fragments, so a screen reader concatenates them into the sentence.",
+    "`aria-busy` is set on the container while `streaming` is true, marking the output incomplete without announcing each token.",
+    "The caret is `aria-hidden` \u2014 it is a rendering of the write head, and a screen reader has no use for it.",
+    "Under reduced motion or with MotionProvider off, no unit animates and no tail is softened; text simply appears as it arrives."
+  ],
+  examples: [
+    {
+      label: "Streaming an answer",
+      code: "<StreamingText text={answer} streaming={pending} />"
+    },
+    {
+      label: "Inside a message, with the wait reported elsewhere",
+      code: '<Message role="assistant"><StreamingText text={answer} streaming={pending} caret={false} /></Message>'
+    },
+    {
+      label: "A headline resolving character by character",
+      code: '<StreamingText as="h2" split="char" className="text-heading-2" text={headline} streaming={pending} />'
+    }
+  ]
+};
+export {
+  streamingTextMeta
+};