@usefragments/ui 1.7.0 → 2.0.0

package/src/components/ThemeToggle/index.tsx

@@ -3,16 +3,14 @@
 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 { ThemeButton, type ThemeButtonProps } from "./ThemeButton";
+
 export interface ThemeToggleProps extends React.HTMLAttributes<HTMLElement> {
-  /** Size of the toggle button */
+  /** Size of the toggle buttons */
   size?: "sm" | "md" | "lg";
-  /**
-   * `group` is the segmented light/dark control. `icon` is a single button
-   * that shows the current resolved theme and toggles light ↔ dark.
-   */
-  appearance?: "group" | "icon";
   /** Whether to include system mode option (default: false) */
   showSystem?: boolean;
   /** Controlled value for custom usage (bypasses theme context) */
@@ -23,60 +21,15 @@ export interface ThemeToggleProps extends React.HTMLAttributes<HTMLElement> {
   "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`.
  */
 export function ThemeToggle({
   size: sizeProp,
-  appearance = "group",
   showSystem = false,
   value: controlledValue,
   onValueChange,
@@ -85,45 +38,12 @@ export function ThemeToggle({
   ...htmlProps
 }: ThemeToggleProps) {
   const size = useResolvedControlSize(sizeProp);
-  const {
-    mode: contextMode,
-    setMode: setContextMode,
-    resolvedMode,
-    toggleMode,
-  } = useTheme();
+  const { mode: contextMode, setMode: setContextMode } = useTheme();
 
   const isControlled = controlledValue !== undefined;
   const currentMode = isControlled ? controlledValue : contextMode;
   const sizeClass = styles[`size${size.charAt(0).toUpperCase() + size.slice(1)}`];
 
-  if (appearance === "icon") {
-    const resolved = isControlled ? controlledValue : resolvedMode;
-    const nextMode = resolved === "dark" ? "light" : "dark";
-    const iconClasses = [styles.toggleButton, styles.iconButton, sizeClass, className]
-      .filter(Boolean)
-      .join(" ");
-
-    return (
-      <button
-        {...(htmlProps as React.ButtonHTMLAttributes<HTMLButtonElement>)}
-        type="button"
-        className={iconClasses}
-        onClick={() => {
-          if (isControlled) {
-            onValueChange?.(nextMode);
-          } else {
-            toggleMode();
-          }
-        }}
-        aria-label={
-          ariaLabel ?? (resolved === "dark" ? "Switch to light mode" : "Switch to dark mode")
-        }
-      >
-        {resolved === "dark" ? <MoonIcon /> : <SunIcon />}
-      </button>
-    );
-  }
-
   const handleModeChange = (newMode: "light" | "dark") => {
     if (isControlled) {
       onValueChange?.(newMode);
@@ -132,9 +52,7 @@ export function ThemeToggle({
     }
   };
 
-  const groupClasses = [styles.toggleGroup, sizeClass, 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

@@ -10,7 +10,7 @@
   "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"
   ],
@@ -27,7 +27,7 @@
       "default": "Thinking...",
       "required": false
     },
-    "variant": {
+    "kind": {
       "type": "enum",
       "description": "Animation style",
       "default": "dots",
@@ -75,37 +75,37 @@
     {
       "name": "Dots (Default)",
       "description": "Three dots bounce in sequence; the quietest option.",
-      "code": "<ThinkingIndicator variant=\"dots\" label=\"Thinking...\" />"
+      "code": "<ThinkingIndicator kind=\"dots\" label=\"Thinking...\" />"
     },
     {
       "name": "Pulse",
       "description": "A single ring breathes in place.",
-      "code": "<ThinkingIndicator variant=\"pulse\" label=\"Processing...\" />"
+      "code": "<ThinkingIndicator kind=\"pulse\" label=\"Processing...\" />"
     },
     {
       "name": "Spinner",
       "description": "A rotating arc, for work with a definite end.",
-      "code": "<ThinkingIndicator variant=\"spinner\" label=\"Loading...\" />"
+      "code": "<ThinkingIndicator kind=\"spinner\" label=\"Loading...\" />"
     },
     {
       "name": "With Elapsed Time",
       "description": "A live counter reassures the reader during long waits.",
-      "code": "<ThinkingIndicator\n  variant=\"dots\"\n  label=\"Generating response...\"\n  showElapsed\n/>"
+      "code": "<ThinkingIndicator\n  kind=\"dots\"\n  label=\"Generating response...\"\n  showElapsed\n/>"
     },
     {
       "name": "Multi-Step Progress",
       "description": "Finished, running, and queued stages read at a glance.",
-      "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/>"
+      "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": "A failed stage turns red while the next one retries.",
-      "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/>"
+      "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": "Name the actual task instead of a generic status.",
-      "code": "<ThinkingIndicator\n  variant=\"dots\"\n  label=\"Claude is writing code...\"\n/>"
+      "code": "<ThinkingIndicator\n  kind=\"dots\"\n  label=\"Claude is writing code...\"\n/>"
     }
   ],
   "relations": [
@@ -129,7 +129,8 @@
     "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"
     ],

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"

package/src/components/Toast/Toast.contract.json

@@ -3,7 +3,12 @@
   "name": "Toast",
   "description": "Briefly reports what just happened, without blocking the page.",
   "category": "feedback",
-  "tags": ["notification", "alert", "message", "feedback"],
+  "tags": [
+    "notification",
+    "alert",
+    "message",
+    "feedback"
+  ],
   "status": "stable",
   "sourcePath": "src/components/Toast/index.tsx",
   "exportName": "Toast",
@@ -11,7 +16,7 @@
     "onDismiss: function",
     "title: string",
     "description: string",
-    "variant: default|success|error|warning|info (default: default)",
+    "tone: neutral|success|danger|warning|info (default: neutral)",
     "duration: number",
     "action: object",
     "id: string",
@@ -34,12 +39,18 @@
       "description": "Additional message content",
       "required": false
     },
-    "variant": {
+    "tone": {
       "type": "enum",
-      "description": "Visual variant indicating message type",
-      "default": "default",
+      "description": "Colour on the shared status ramp; neutral is the plain notification. The useToast().error helper sets tone=\"danger\".",
+      "default": "neutral",
       "required": false,
-      "values": ["default", "success", "error", "warning", "info"]
+      "values": [
+        "neutral",
+        "success",
+        "danger",
+        "warning",
+        "info"
+      ]
     },
     "duration": {
       "type": "number",
@@ -83,7 +94,7 @@
     ],
     "guidelines": [
       "One sentence, plus a title if it helps",
-      "Match the variant to what actually happened",
+      "Match the tone to what actually happened",
       "Auto-dismiss in three to five seconds",
       "Anything with an action needs a manual dismiss too",
       "Two or three on screen at once, no more",
@@ -103,9 +114,9 @@
       "code": "<Toast\n  title=\"Draft saved\"\n  description=\"We will keep it until you publish.\"\n/>"
     },
     {
-      "name": "Variants",
+      "name": "Tones",
       "description": "Icon and colour together carry the outcome.",
-      "code": "import { Stack } from '@/components/Stack';\n\n<Stack direction=\"column\" gap=\"sm\">\n  <Toast\n    title=\"Success!\"\n    description=\"Your changes have been saved.\"\n    variant=\"success\"\n  />\n  <Toast\n    title=\"Error\"\n    description=\"Failed to save changes. Please try again.\"\n    variant=\"error\"\n  />\n  <Toast\n    title=\"Warning\"\n    description=\"This action cannot be undone.\"\n    variant=\"warning\"\n  />\n  <Toast\n    title=\"New update\"\n    description=\"Version 2.0 is now available.\"\n    variant=\"info\"\n  />\n</Stack>"
+      "code": "import { Stack } from '@/components/Stack';\n\n<Stack direction=\"column\" gap=\"sm\">\n  <Toast\n    title=\"Success!\"\n    description=\"Your changes have been saved.\"\n    tone=\"success\"\n  />\n  <Toast\n    title=\"Error\"\n    description=\"Failed to save changes. Please try again.\"\n    tone=\"danger\"\n  />\n  <Toast\n    title=\"Warning\"\n    description=\"This action cannot be undone.\"\n    tone=\"warning\"\n  />\n  <Toast\n    title=\"New update\"\n    description=\"Version 2.0 is now available.\"\n    tone=\"info\"\n  />\n</Stack>"
     },
     {
       "name": "With Action",
@@ -115,7 +126,7 @@
     {
       "name": "Dismissible",
       "description": "onDismiss adds a close button for longer messages.",
-      "code": "<Toast\n  title=\"Export running\"\n  description=\"We will email you when the file is ready.\"\n  variant=\"info\"\n  onDismiss={() => {}}\n/>"
+      "code": "<Toast\n  title=\"Export running\"\n  description=\"We will email you when the file is ready.\"\n  tone=\"info\"\n  onDismiss={() => {}}\n/>"
     }
   ],
   "relations": [
@@ -134,17 +145,22 @@
     "propsSummary": [
       "title: string - toast title",
       "description: string - additional message",
-      "variant: default|success|error|warning|info",
+      "tone: neutral|success|danger|warning|info",
       "duration: number - ms before auto-dismiss",
       "action: { label, onClick } - optional action",
       "ToastInput (useToast): optional id for deterministic creation/replacement flows",
       "useToast().success/error/warning/info: (title, description?) or ({ title, description, action, duration, id })"
     ],
-    "a11yRules": ["A11Y_ALERT_ROLE", "A11Y_TARGET_SIZE_MIN"]
+    "a11yRules": [
+      "A11Y_ALERT_ROLE",
+      "A11Y_TARGET_SIZE_MIN"
+    ]
   },
   "ai": {
     "compositionPattern": "compound",
-    "subComponents": ["Provider"]
+    "subComponents": [
+      "Provider"
+    ]
   },
   "provenance": {
     "source": "migrated",