@usefragments/ui 1.6.0 → 2.0.0

package/src/components/ThemeToggle/ThemeButton.tsx

@@ -0,0 +1,49 @@
+"use client";
+
+import * as React from "react";
+import { IconButton, type IconButtonProps } from "../IconButton";
+import { useTheme } from "../Theme/context";
+import { MoonIcon, SunIcon } from "./icons";
+
+export interface ThemeButtonProps
+  extends Omit<IconButtonProps, "children" | "variant" | "pressed" | "onClick"> {
+  /** Controlled value for custom usage (bypasses theme context) */
+  value?: "light" | "dark";
+  /** Callback when value changes (for controlled usage) */
+  onValueChange?: (value: "light" | "dark") => void;
+}
+
+/**
+ * A single ghost icon button that shows the resolved color mode and flips
+ * light and dark on click. Built on `IconButton`, so it takes the same
+ * `size` and forwards button DOM props. For the segmented light/dark/system
+ * control, use `ThemeToggle`.
+ */
+export const ThemeButton = React.forwardRef<HTMLButtonElement, ThemeButtonProps>(
+  function ThemeButton({ value: controlledValue, onValueChange, "aria-label": ariaLabel, ...rest }, ref) {
+    const { resolvedMode, toggleMode } = useTheme();
+    const isControlled = controlledValue !== undefined;
+    const resolved = isControlled ? controlledValue : resolvedMode;
+    const nextMode = resolved === "dark" ? "light" : "dark";
+
+    return (
+      <IconButton
+        ref={ref}
+        variant="ghost"
+        aria-label={
+          ariaLabel ?? (resolved === "dark" ? "Switch to light mode" : "Switch to dark mode")
+        }
+        onClick={() => {
+          if (isControlled) {
+            onValueChange?.(nextMode);
+          } else {
+            toggleMode();
+          }
+        }}
+        {...rest}
+      >
+        {resolved === "dark" ? <MoonIcon /> : <SunIcon />}
+      </IconButton>
+    );
+  }
+);

package/src/components/ThemeToggle/ThemeToggle.module.scss

@@ -1,18 +1,19 @@
 @use "../../tokens/variables" as *;
 @use "../../tokens/mixins" as *;
+@use "../../tokens/measurements.generated" as measurements;
 @use "../../recipes/action";
 
 // ============================================
-// Theme Toggle - Fragmented Button Group
+// Theme Toggle - segmented light / dark / system control
 // ============================================
 
 .toggleGroup {
   display: inline-flex;
   align-items: stretch;
-  gap: 0;
-  padding: 0;
+  gap: var(--fui-raw-space-0, #{measurements.raw-space(0)});
+  padding: var(--fui-raw-space-0, #{measurements.raw-space(0)});
   background-color: var(--fui-bg-tertiary, $fui-bg-tertiary);
-  border-radius: var(--fui-radius-md, $fui-radius-md);
+  border-radius: var(--fui-radius-l2, $fui-radius-l2);
 }
 
 .toggleButton {
@@ -20,7 +21,7 @@
   @include interactive-base;
   @include action.base;
 
-  border-radius: var(--fui-radius-sm, $fui-radius-sm);
+  border-radius: var(--fui-radius-l3, $fui-radius-l3);
   color: var(--fui-text-secondary, $fui-text-secondary);
   background-color: transparent;
 
@@ -36,38 +37,30 @@
 }
 
 .toggleButtonActive {
-  background-color: var(--fui-bg-elevated, $fui-bg-elevated);
-  color: var(--fui-text-primary, $fui-text-primary);
-  box-shadow: var(--fui-shadow-sm, $fui-shadow-sm);
+  @include segmented-selection;
 }
 
-// Size variants
-.sizeSm {
-  .toggleButton {
-    @include action.icon-only("sm");
+// Size variants (the buttons inherit the size from the group)
+.sizeSm .toggleButton {
+  @include action.icon-only("sm");
 
-    svg {
-      @include action.glyph("sm");
-    }
+  svg {
+    @include action.glyph("sm");
   }
 }
 
-.sizeMd {
-  .toggleButton {
-    @include action.icon-only("md");
+.sizeMd .toggleButton {
+  @include action.icon-only("md");
 
-    svg {
-      @include action.glyph("md");
-    }
+  svg {
+    @include action.glyph("md");
   }
 }
 
-.sizeLg {
-  .toggleButton {
-    @include action.icon-only("lg");
+.sizeLg .toggleButton {
+  @include action.icon-only("lg");
 
-    svg {
-      @include action.glyph("lg");
-    }
+  svg {
+    @include action.glyph("lg");
   }
 }

package/src/components/ThemeToggle/icons.tsx

@@ -0,0 +1,46 @@
+import * as React from "react";
+
+export function SunIcon({ size = 20 }: { size?: number }) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={size}
+      height={size}
+      viewBox="0 0 256 256"
+      fill="currentColor"
+      aria-hidden="true"
+    >
+      <path d="M120,40V16a8,8,0,0,1,16,0V40a8,8,0,0,1-16,0Zm72,88a64,64,0,1,1-64-64A64.07,64.07,0,0,1,192,128Zm-16,0a48,48,0,1,0-48,48A48.05,48.05,0,0,0,176,128ZM58.34,69.66A8,8,0,0,0,69.66,58.34l-16-16A8,8,0,0,0,42.34,53.66Zm0,116.68-16,16a8,8,0,0,0,11.32,11.32l16-16a8,8,0,0,0-11.32-11.32ZM192,72a8,8,0,0,0,5.66-2.34l16-16a8,8,0,0,0-11.32-11.32l-16,16A8,8,0,0,0,192,72Zm5.66,114.34a8,8,0,0,0-11.32,11.32l16,16a8,8,0,0,0,11.32-11.32ZM48,128a8,8,0,0,0-8-8H16a8,8,0,0,0,0,16H40A8,8,0,0,0,48,128Zm80,80a8,8,0,0,0-8,8v24a8,8,0,0,0,16,0V216A8,8,0,0,0,128,208Zm112-88H216a8,8,0,0,0,0,16h24a8,8,0,0,0,0-16Z" />
+    </svg>
+  );
+}
+
+export function MoonIcon({ size = 20 }: { size?: number }) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={size}
+      height={size}
+      viewBox="0 0 256 256"
+      fill="currentColor"
+      aria-hidden="true"
+    >
+      <path d="M233.54,142.23a8,8,0,0,0-8-2,88.08,88.08,0,0,1-109.8-109.8,8,8,0,0,0-10-10,104.84,104.84,0,0,0-52.91,37A104,104,0,0,0,136,224a103.09,103.09,0,0,0,62.52-20.88,104.84,104.84,0,0,0,37-52.91A8,8,0,0,0,233.54,142.23ZM188.9,190.34A88,88,0,0,1,65.66,67.11a89,89,0,0,1,31.4-26A106,106,0,0,0,96,56,104.11,104.11,0,0,0,200,160a106,106,0,0,0,14.92-1.06A89,89,0,0,1,188.9,190.34Z" />
+    </svg>
+  );
+}
+
+export function MonitorIcon({ size = 20 }: { size?: number }) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={size}
+      height={size}
+      viewBox="0 0 256 256"
+      fill="currentColor"
+      aria-hidden="true"
+    >
+      <path d="M208,40H48A24,24,0,0,0,24,64V176a24,24,0,0,0,24,24H208a24,24,0,0,0,24-24V64A24,24,0,0,0,208,40Zm8,136a8,8,0,0,1-8,8H48a8,8,0,0,1-8-8V64a8,8,0,0,1,8-8H208a8,8,0,0,1,8,8Zm-48,48a8,8,0,0,1-8,8H96a8,8,0,0,1,0-16h64A8,8,0,0,1,168,224Z" />
+    </svg>
+  );
+}

package/src/components/ThemeToggle/index.tsx

@@ -3,10 +3,13 @@
 import * as React from "react";
 import { useResolvedControlSize } from "../ComponentDefaults";
 import { useTheme, type ThemeMode } from "../Theme/context";
+import { MonitorIcon, MoonIcon, SunIcon } from "./icons";
 import styles from "./ThemeToggle.module.scss";
 
-export interface ThemeToggleProps extends React.HTMLAttributes<HTMLDivElement> {
-  /** Size of the toggle button */
+export { ThemeButton, type ThemeButtonProps } from "./ThemeButton";
+
+export interface ThemeToggleProps extends React.HTMLAttributes<HTMLElement> {
+  /** Size of the toggle buttons */
   size?: "sm" | "md" | "lg";
   /** Whether to include system mode option (default: false) */
   showSystem?: boolean;
@@ -18,53 +21,9 @@ export interface ThemeToggleProps extends React.HTMLAttributes<HTMLDivElement> {
   "aria-label"?: string;
 }
 
-function SunIcon({ size = 20 }: { size?: number }) {
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width={size}
-      height={size}
-      viewBox="0 0 256 256"
-      fill="currentColor"
-      aria-hidden="true"
-    >
-      <path d="M120,40V16a8,8,0,0,1,16,0V40a8,8,0,0,1-16,0Zm72,88a64,64,0,1,1-64-64A64.07,64.07,0,0,1,192,128Zm-16,0a48,48,0,1,0-48,48A48.05,48.05,0,0,0,176,128ZM58.34,69.66A8,8,0,0,0,69.66,58.34l-16-16A8,8,0,0,0,42.34,53.66Zm0,116.68-16,16a8,8,0,0,0,11.32,11.32l16-16a8,8,0,0,0-11.32-11.32ZM192,72a8,8,0,0,0,5.66-2.34l16-16a8,8,0,0,0-11.32-11.32l-16,16A8,8,0,0,0,192,72Zm5.66,114.34a8,8,0,0,0-11.32,11.32l16,16a8,8,0,0,0,11.32-11.32ZM48,128a8,8,0,0,0-8-8H16a8,8,0,0,0,0,16H40A8,8,0,0,0,48,128Zm80,80a8,8,0,0,0-8,8v24a8,8,0,0,0,16,0V216A8,8,0,0,0,128,208Zm112-88H216a8,8,0,0,0,0,16h24a8,8,0,0,0,0-16Z" />
-    </svg>
-  );
-}
-
-function MoonIcon({ size = 20 }: { size?: number }) {
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width={size}
-      height={size}
-      viewBox="0 0 256 256"
-      fill="currentColor"
-      aria-hidden="true"
-    >
-      <path d="M233.54,142.23a8,8,0,0,0-8-2,88.08,88.08,0,0,1-109.8-109.8,8,8,0,0,0-10-10,104.84,104.84,0,0,0-52.91,37A104,104,0,0,0,136,224a103.09,103.09,0,0,0,62.52-20.88,104.84,104.84,0,0,0,37-52.91A8,8,0,0,0,233.54,142.23ZM188.9,190.34A88,88,0,0,1,65.66,67.11a89,89,0,0,1,31.4-26A106,106,0,0,0,96,56,104.11,104.11,0,0,0,200,160a106,106,0,0,0,14.92-1.06A89,89,0,0,1,188.9,190.34Z" />
-    </svg>
-  );
-}
-
-function MonitorIcon({ size = 20 }: { size?: number }) {
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width={size}
-      height={size}
-      viewBox="0 0 256 256"
-      fill="currentColor"
-      aria-hidden="true"
-    >
-      <path d="M208,40H48A24,24,0,0,0,24,64V176a24,24,0,0,0,24,24H208a24,24,0,0,0,24-24V64A24,24,0,0,0,208,40Zm8,136a8,8,0,0,1-8,8H48a8,8,0,0,1-8-8V64a8,8,0,0,1,8-8H208a8,8,0,0,1,8,8Zm-48,48a8,8,0,0,1-8,8H96a8,8,0,0,1,0-16h64A8,8,0,0,1,168,224Z" />
-    </svg>
-  );
-}
-
 /**
- * Fragmented button group for choosing light, dark, or system theme modes.
+ * Segmented control for choosing light, dark, or system theme modes.
+ * For a single icon button that flips light and dark, use `ThemeButton`.
  *
  * It can read and update ThemeProvider context, or operate as a controlled
  * light/dark selector through `value` and `onValueChange`.
@@ -83,6 +42,7 @@ export function ThemeToggle({
 
   const isControlled = controlledValue !== undefined;
   const currentMode = isControlled ? controlledValue : contextMode;
+  const sizeClass = styles[`size${size.charAt(0).toUpperCase() + size.slice(1)}`];
 
   const handleModeChange = (newMode: "light" | "dark") => {
     if (isControlled) {
@@ -92,13 +52,7 @@ export function ThemeToggle({
     }
   };
 
-  const groupClasses = [
-    styles.toggleGroup,
-    styles[`size${size.charAt(0).toUpperCase() + size.slice(1)}`],
-    className,
-  ]
-    .filter(Boolean)
-    .join(" ");
+  const groupClasses = [styles.toggleGroup, sizeClass, className].filter(Boolean).join(" ");
 
   const getButtonClasses = (buttonMode: ThemeMode) => {
     return [styles.toggleButton, currentMode === buttonMode && styles.toggleButtonActive]

package/src/components/ThinkingIndicator/ThinkingIndicator.contract.json

@@ -1,23 +1,16 @@
 {
   "$schema": "https://usefragments.com/schemas/contract.v1.json",
   "name": "ThinkingIndicator",
-  "description": "Animated indicator showing AI is processing",
+  "description": "Shows that an AI response is being generated.",
   "category": "ai",
-  "tags": [
-    "thinking",
-    "loading",
-    "ai",
-    "processing",
-    "indicator",
-    "animation"
-  ],
+  "tags": ["thinking", "loading", "ai", "processing", "indicator", "animation"],
   "status": "stable",
   "sourcePath": "src/components/ThinkingIndicator/index.tsx",
   "exportName": "ThinkingIndicator",
   "propsSummary": [
     "active: boolean (default: true)",
     "label: string (default: Thinking...)",
-    "variant: dots|pulse|spinner (default: dots)",
+    "kind: dots|pulse|spinner (default: dots)",
     "showElapsed: boolean (default: false)",
     "steps: array"
   ],
@@ -34,16 +27,12 @@
       "default": "Thinking...",
       "required": false
     },
-    "variant": {
+    "kind": {
       "type": "enum",
       "description": "Animation style",
       "default": "dots",
       "required": false,
-      "values": [
-        "dots",
-        "pulse",
-        "spinner"
-      ]
+      "values": ["dots", "pulse", "spinner"]
     },
     "showElapsed": {
       "type": "boolean",
@@ -59,21 +48,21 @@
   },
   "usage": {
     "when": [
-      "AI is processing a request and generating a response",
-      "Need visual feedback during async AI operations",
-      "Want to show multi-step progress for complex AI tasks",
-      "Indicating streaming is about to begin"
+      "A model is working on a request",
+      "Async AI work that would otherwise look frozen",
+      "Multi-stage tasks worth showing stage by stage",
+      "The moment before streaming starts"
     ],
     "whenNot": [
-      "Simple loading states (use Progress or Skeleton)",
-      "Form submission loading (use Button loading state)",
-      "Page-level loading (use Progress or Skeleton)"
+      "Ordinary loading (use Progress or Skeleton)",
+      "Form submission (use the Button loading state)",
+      "Whole-page loading (use Progress or Skeleton)"
     ],
     "guidelines": [
-      "Use active prop to control visibility",
-      "Choose variant based on context (dots for chat, spinner for actions)",
-      "Enable showElapsed for longer operations",
-      "Use steps for multi-step AI workflows (tool calls, research)"
+      "active controls whether it shows at all",
+      "dots suits chat; spinner suits a discrete action",
+      "Turn on showElapsed once waits run past a few seconds",
+      "Use steps for tool calls, research, and other staged work"
     ],
     "accessibility": [
       "Uses role=\"status\" and aria-live=\"polite\"",
@@ -85,38 +74,38 @@
   "examples": [
     {
       "name": "Dots (Default)",
-      "description": "Bouncing dots animation",
-      "code": "<ThinkingIndicator variant=\"dots\" label=\"Thinking...\" />"
+      "description": "Three dots bounce in sequence; the quietest option.",
+      "code": "<ThinkingIndicator kind=\"dots\" label=\"Thinking...\" />"
     },
     {
       "name": "Pulse",
-      "description": "Pulsing ring animation",
-      "code": "<ThinkingIndicator variant=\"pulse\" label=\"Processing...\" />"
+      "description": "A single ring breathes in place.",
+      "code": "<ThinkingIndicator kind=\"pulse\" label=\"Processing...\" />"
     },
     {
       "name": "Spinner",
-      "description": "Rotating spinner animation",
-      "code": "<ThinkingIndicator variant=\"spinner\" label=\"Loading...\" />"
+      "description": "A rotating arc, for work with a definite end.",
+      "code": "<ThinkingIndicator kind=\"spinner\" label=\"Loading...\" />"
     },
     {
       "name": "With Elapsed Time",
-      "description": "Shows time since started",
-      "code": "<ThinkingIndicator\n  variant=\"dots\"\n  label=\"Generating response...\"\n  showElapsed\n/>"
+      "description": "A live counter reassures the reader during long waits.",
+      "code": "<ThinkingIndicator\n  kind=\"dots\"\n  label=\"Generating response...\"\n  showElapsed\n/>"
     },
     {
       "name": "Multi-Step Progress",
-      "description": "Shows progress through multiple steps",
-      "code": "<ThinkingIndicator\n  variant=\"spinner\"\n  label=\"Working...\"\n  steps={[\n    { id: '1', label: 'Analyzing request', status: 'complete' },\n    { id: '2', label: 'Searching knowledge base', status: 'active' },\n    { id: '3', label: 'Generating response', status: 'pending' },\n  ]}\n/>"
+      "description": "Finished, running, and queued stages read at a glance.",
+      "code": "<ThinkingIndicator\n  kind=\"spinner\"\n  label=\"Working...\"\n  steps={[\n    { id: '1', label: 'Analyzing request', status: 'complete' },\n    { id: '2', label: 'Searching knowledge base', status: 'pending' },\n    { id: '3', label: 'Generating response', status: 'idle' },\n  ]}\n/>"
     },
     {
       "name": "With Error Step",
-      "description": "Shows a step that encountered an error",
-      "code": "<ThinkingIndicator\n  variant=\"spinner\"\n  label=\"Retrying...\"\n  steps={[\n    { id: '1', label: 'Connecting to API', status: 'complete' },\n    { id: '2', label: 'Fetching data', status: 'error' },\n    { id: '3', label: 'Retrying with fallback', status: 'active' },\n  ]}\n/>"
+      "description": "A failed stage turns red while the next one retries.",
+      "code": "<ThinkingIndicator\n  kind=\"spinner\"\n  label=\"Retrying...\"\n  steps={[\n    { id: '1', label: 'Connecting to API', status: 'complete' },\n    { id: '2', label: 'Fetching data', status: 'error' },\n    { id: '3', label: 'Retrying with fallback', status: 'pending' },\n  ]}\n/>"
     },
     {
       "name": "Custom Label",
-      "description": "Custom status text",
-      "code": "<ThinkingIndicator\n  variant=\"dots\"\n  label=\"Claude is writing code...\"\n/>"
+      "description": "Name the actual task instead of a generic status.",
+      "code": "<ThinkingIndicator\n  kind=\"dots\"\n  label=\"Claude is writing code...\"\n/>"
     }
   ],
   "relations": [
@@ -140,21 +129,16 @@
     "propsSummary": [
       "active: boolean - whether indicator is visible (default: true)",
       "label: string - status text (default: \"Thinking...\")",
-      "variant: \"dots\" | \"pulse\" | \"spinner\" - animation style",
+      "kind: \"dots\" | \"pulse\" | \"spinner\" - animation style",
+      "steps[].status: \"idle\" | \"pending\" | \"streaming\" | \"complete\" | \"error\" - shared lifecycle axis",
       "showElapsed: boolean - show elapsed time",
       "steps: ThinkingStep[] - multi-step progress"
     ],
-    "a11yRules": [
-      "A11Y_ARIA_LIVE",
-      "A11Y_MOTION_PREFERENCE"
-    ]
+    "a11yRules": ["A11Y_ARIA_LIVE", "A11Y_MOTION_PREFERENCE"]
   },
   "ai": {
     "compositionPattern": "compound",
-    "subComponents": [
-      "Steps",
-      "Step"
-    ]
+    "subComponents": ["Steps", "Step"]
   },
   "provenance": {
     "source": "migrated",

package/src/components/ThinkingIndicator/ThinkingIndicator.module.scss

@@ -1,4 +1,5 @@
 @use "../../tokens/variables" as *;
+@use "../../tokens/measurements.generated" as measurements;
 @use "../../recipes/layout" as layout;
 @use "../../recipes/representation" as representation;
 @use "../../recipes/typography" as typography;
@@ -37,7 +38,7 @@
 // Steps
 //
 // NOTE: The dots/pulse/spinner animations live in <Loading>; the three
-// ThinkingIndicator variants delegate to it (see index.tsx). No animation
+// ThinkingIndicator kinds delegate to it (see index.tsx). No animation
 // styles are kept here.
 // ============================================
 
@@ -47,7 +48,7 @@
   gap: layout.gap("xs");
   margin-inline-start: calc(representation.activity-size("sm") / 2);
   padding-inline-start: layout.gap("lg");
-  border-inline-start: var(--fui-stroke-default, 2px) solid var(--fui-border, $fui-border);
+  border-inline-start: var(--fui-stroke-default, #{$fui-stroke-default}) solid var(--fui-border, $fui-border);
 }
 
 .step {
@@ -71,11 +72,11 @@
 }
 
 .stepDot {
-  inline-size: var(--fui-raw-space-8, 8px);
-  block-size: var(--fui-raw-space-8, 8px);
+  inline-size: var(--fui-raw-space-8, #{measurements.raw-space(8)});
+  block-size: var(--fui-raw-space-8, #{measurements.raw-space(8)});
   border-radius: var(--fui-radius-full, $fui-radius-full);
   background-color: var(--fui-text-tertiary, $fui-text-tertiary);
-  opacity: 0.5;
+  opacity: var(--fui-opacity-disabled, #{$fui-opacity-disabled});
 }
 
 .stepLabel {
@@ -83,11 +84,12 @@
 }
 
 // Step status styles
-.stepPending {
+.stepIdle {
   color: var(--fui-text-tertiary, $fui-text-tertiary);
 }
 
-.stepActive {
+.stepPending,
+.stepStreaming {
   color: var(--fui-text-secondary, $fui-text-secondary);
 
   .stepIndicator {

package/src/components/ThinkingIndicator/index.tsx

@@ -8,8 +8,9 @@ import { Loading } from "../Loading";
 // Types
 // ============================================
 
-export type ThinkingVariant = "dots" | "pulse" | "spinner";
-export type StepStatus = "pending" | "active" | "complete" | "error";
+export type ThinkingKind = "dots" | "pulse" | "spinner";
+/** Shared lifecycle axis: `idle` waits, `pending`/`streaming` are in flight. */
+export type StepStatus = "idle" | "pending" | "streaming" | "complete" | "error";
 
 export interface ThinkingStep {
   id: string;
@@ -23,7 +24,7 @@ export interface ThinkingIndicatorProps extends React.HTMLAttributes<HTMLDivElem
   /** Status text */
   label?: string;
   /** Animation style */
-  variant?: ThinkingVariant;
+  kind?: ThinkingKind;
   /** Show elapsed time */
   showElapsed?: boolean;
   /** Multi-step progress */
@@ -47,7 +48,7 @@ export interface ThinkingStepProps extends React.HTMLAttributes<HTMLDivElement>
 
 interface ThinkingIndicatorContextValue {
   active: boolean;
-  variant: ThinkingVariant;
+  kind: ThinkingKind;
 }
 
 const ThinkingIndicatorContext = React.createContext<ThinkingIndicatorContextValue | null>(null);
@@ -147,7 +148,7 @@ function ThinkingSteps({ children, className, ...htmlProps }: ThinkingStepsProps
   );
 }
 
-function ThinkingStep({ label, status = "pending", className, ...htmlProps }: ThinkingStepProps) {
+function ThinkingStep({ label, status = "idle", className, ...htmlProps }: ThinkingStepProps) {
   const classes = [
     styles.step,
     styles[`step${status.charAt(0).toUpperCase() + status.slice(1)}`],
@@ -161,17 +162,17 @@ function ThinkingStep({ label, status = "pending", className, ...htmlProps }: Th
       <span className={styles.stepIndicator}>
         {status === "complete" && <CheckIcon />}
         {status === "error" && <ErrorIcon />}
-        {status === "active" && (
+        {(status === "pending" || status === "streaming") && (
           <Loading
             size="sm"
-            variant="spinner"
+            kind="spinner"
             color="current"
             label=""
             role="presentation"
             aria-hidden="true"
           />
         )}
-        {status === "pending" && <span className={styles.stepDot} />}
+        {status === "idle" && <span className={styles.stepDot} />}
       </span>
       <span className={styles.stepLabel}>{label}</span>
     </div>
@@ -185,7 +186,7 @@ function ThinkingStep({ label, status = "pending", className, ...htmlProps }: Th
 function ThinkingIndicatorRoot({
   active = true,
   label = "Thinking...",
-  variant = "dots",
+  kind = "dots",
   showElapsed = false,
   steps,
   className,
@@ -195,23 +196,20 @@ function ThinkingIndicatorRoot({
 
   const contextValue: ThinkingIndicatorContextValue = {
     active,
-    variant,
+    kind,
   };
 
   if (!active) return null;
 
   const classes = [styles.thinkingIndicator, className].filter(Boolean).join(" ");
 
-  // Map ThinkingIndicator variants to Loading variants
-  const loadingVariant = variant === "dots" ? "dots" : variant === "pulse" ? "pulse" : "spinner";
-
   return (
     <ThinkingIndicatorContext.Provider value={contextValue}>
       <div {...htmlProps} className={classes} role="status" aria-label={label} aria-live="polite">
         <div className={styles.main}>
           <Loading
             size="sm"
-            variant={loadingVariant}
+            kind={kind}
             color="muted"
             label=""
             role="presentation"