@sableui/react 0.13.1 → 0.14.0

package/dist/components/tabs/tabs.js

@@ -3,19 +3,38 @@ import { Tabs as Base } from "@base-ui/react/tabs";
 import { createContext, useContext } from "react";
 import { cn } from "../../lib/cn.js";
 import { trimLabel } from "../../lib/trim-label.js";
-import { jsx } from "react/jsx-runtime";
-var Tabs = Base.Root;
+import { motionAttribute } from "../../motion/MotionProvider.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+function Tabs({ motion, ...props }) {
+  return /* @__PURE__ */ jsx(Base.Root, { "data-motion": motionAttribute(motion), ...props });
+}
+Tabs.displayName = "Tabs";
 var TabsVariantContext = createContext("underline");
-function TabsList({ className, variant = "underline", ...props }) {
-  return /* @__PURE__ */ jsx(TabsVariantContext.Provider, { value: variant, children: /* @__PURE__ */ jsx(
+var UNDERLINE_HANDOFF = "[&:has(>[data-tabs-indicator]:not([hidden]))>[role=tab]]:border-transparent";
+var PILL_HANDOFF = "[&:has(>[data-tabs-indicator]:not([hidden]))>[role=tab]]:bg-transparent";
+var INDICATOR = "pointer-events-none absolute left-0 w-(--active-tab-width) translate-x-(--active-tab-left) motion-glide";
+var INDICATOR_UNDERLINE = "-bottom-px h-0.5 bg-foreground";
+var INDICATOR_PILL = "top-0 h-(--active-tab-height) translate-y-(--active-tab-top) rounded-[var(--button-radius,9999px)] bg-muted";
+function TabsList({ className, variant = "underline", children, ...props }) {
+  return /* @__PURE__ */ jsx(TabsVariantContext.Provider, { value: variant, children: /* @__PURE__ */ jsxs(
     Base.List,
     {
       "data-variant": variant,
       className: cn(
-        variant === "underline" ? "inline-flex items-center gap-1 border-b border-border" : "inline-flex items-center gap-1",
+        variant === "underline" ? cn("relative inline-flex items-center gap-1 border-b border-border", UNDERLINE_HANDOFF) : cn("relative inline-flex items-center gap-1", PILL_HANDOFF),
         className
       ),
-      ...props
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(
+          Base.Indicator,
+          {
+            "data-tabs-indicator": "",
+            className: cn(INDICATOR, variant === "underline" ? INDICATOR_UNDERLINE : INDICATOR_PILL)
+          }
+        ),
+        children
+      ]
     }
   ) });
 }
@@ -25,7 +44,7 @@ function TabsTrigger({ className, children, ...props }) {
     Base.Tab,
     {
       className: cn(
-        "cursor-pointer text-label-lg text-muted-foreground motion-interactive hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring data-[active]:text-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+        "relative cursor-pointer text-label-lg text-muted-foreground motion-interactive hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring data-[active]:text-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
         variant === "underline" ? (
           // On the control ladder like the pill variant (it was py-2 plus
           // the label's line, ~36px — no rung).
@@ -43,7 +62,7 @@ function TabsPanel({ className, ...props }) {
     Base.Panel,
     {
       className: cn(
-        "pt-4 text-foreground focus-visible:outline-none",
+        "pt-4 text-foreground focus-visible:outline-none not-data-[activation-direction=none]:animate-fade-in data-[ending-style]:hidden",
         className
       ),
       ...props

package/dist/components/tabs/tabs.meta.js

@@ -1,7 +1,7 @@
 // src/components/tabs/tabs.meta.ts
 var tabsMeta = {
   name: "Tabs",
-  summary: "Tabs over Base UI Tabs (roving focus, arrow-key nav, ARIA tablist wiring) in two styles: underline (page sections) or pill (compact switchers). Tabs (Root) + TabsList + TabsTrigger + TabsPanel.",
+  summary: "Tabs over Base UI Tabs (roving focus, arrow-key nav, ARIA tablist wiring) in two styles: underline (page sections) or pill (compact switchers), with one indicator that glides to the active tab. Tabs (Root) + TabsList + TabsTrigger + TabsPanel.",
   status: "stable",
   keywords: [
     "tabs",
@@ -26,11 +26,13 @@ var tabsMeta = {
       },
       {
         guidance: "dont",
-        description: "Do not use Tabs for unrelated pages or primary navigation that needs distinct URLs."
+        description: "Do not use Tabs for unrelated pages or primary navigation that needs distinct URLs.",
+        instead: ["SideNav", "NavigationMenu"]
       },
       {
         guidance: "dont",
-        description: "Do not use tabs for sequential steps. Tabs are peer views the user returns to in any order; a process with an order needs a stepper, or the user will skip ahead."
+        description: "Do not use tabs for sequential steps. Tabs are peer views the user returns to in any order; a process with an order needs a stepper, or the user will skip ahead.",
+        instead: ["Stepper"]
       }
     ],
     anatomy: [
@@ -69,13 +71,19 @@ var tabsMeta = {
       type: "Base UI Tabs.Root props (value, defaultValue, onValueChange, orientation)",
       default: "defaultValue: 0",
       description: "Controls the active tab. Uncontrolled via defaultValue; controlled via value + onValueChange."
+    },
+    {
+      name: "motion",
+      type: '"full" | "subtle" | "off"',
+      default: '"full"',
+      description: "On Tabs: how much motion this component uses: `full` (default) inherits the app's policy, `subtle` keeps feedback and drops the glide, `off` stills it. It can only turn motion down \u2014 it never overrides a reader's reduce-motion setting."
     }
   ],
   subcomponents: [
     {
       name: "TabsList",
       type: 'Base UI Tabs.List props (activateOnFocus, loopFocus) + variant?: "underline" | "pill" + className',
-      description: `The tablist row. variant="underline" (default) draws a divider rule beneath the triggers; variant="pill" drops the rule and fills the active trigger, which takes the theme's button shape (--button-radius). Triggers inherit the variant.`
+      description: `The tablist row. variant="underline" (default) draws a divider rule beneath the triggers; variant="pill" drops the rule and fills the active trigger, which takes the theme's button shape (--button-radius). Triggers inherit the variant. It renders the gliding indicator (Base UI Tabs.Indicator) itself, so do not add one.`
     },
     {
       name: "TabsTrigger",
@@ -94,11 +102,44 @@ var tabsMeta = {
     }
   ],
   tokensUsed: ["border", "muted", "muted-foreground", "foreground", "ring"],
+  motion: [
+    {
+      slot: "arrival",
+      recipe: "none",
+      part: "Root",
+      why: "Tabs arrive with the section they organise. An entrance of their own would announce navigation chrome louder than the content it navigates."
+    },
+    {
+      slot: "response",
+      recipe: "motion-interactive",
+      part: "TabsTrigger",
+      why: "The label steps from muted to foreground under the pointer; the ease is what makes that read as an answer rather than a repaint."
+    },
+    {
+      slot: "transition",
+      recipe: "motion-glide",
+      part: "Indicator",
+      why: `One underline (or pill) travels to the new tab and stretches to its width. A mark that teleports makes the reader re-find the selection on every click; one that moves is tracked without looking. Expressive: motion="subtle" lands it in place. Each tab's own mark is the fallback until the indicator has measured, so the server render is already right.`
+    },
+    {
+      slot: "transition",
+      recipe: "animate-fade-in",
+      part: "TabsPanel",
+      why: 'The incoming panel fades in, opacity only, so a switch between two similar panels still registers. Skipped on first render (activation direction "none") so a page of tabs does not fade in on load, and the outgoing panel leaves layout at once so a quick second click never stacks both.'
+    },
+    {
+      slot: "activity",
+      recipe: "none",
+      part: "Root",
+      why: "Switching tabs is synchronous. A panel that loads data shows its own Skeleton or Spinner inside the panel, where the wait is."
+    }
+  ],
   a11y: [
     "Base UI provides the tablist/tab/tabpanel roles, aria-selected, and roving tabindex.",
     "Arrow keys move between tabs; Home/End jump to first/last; panels are linked via aria-controls.",
     "Active tab styling reads from the data-active attribute; disabled tabs from data-disabled. Disabled tabs are skipped by arrow-key navigation.",
-    "Keyboard focus shows a ring on the focused trigger in both variants; the panel remains focusable."
+    "Keyboard focus shows a ring on the focused trigger in both variants; the panel remains focusable.",
+    'The gliding indicator is role="presentation" decoration; aria-selected on the tab carries the state.'
   ],
   examples: [
     {
@@ -112,6 +153,10 @@ var tabsMeta = {
     {
       label: "With a disabled tab",
       code: '<Tabs defaultValue="overview"><TabsList><TabsTrigger value="overview">Overview</TabsTrigger><TabsTrigger value="billing" disabled>Billing</TabsTrigger></TabsList><TabsPanel value="overview">Overview content</TabsPanel></Tabs>'
+    },
+    {
+      label: "Subtle motion",
+      code: '<Tabs defaultValue="table" motion="subtle"><TabsList><TabsTrigger value="table">Table</TabsTrigger><TabsTrigger value="chart">Chart</TabsTrigger></TabsList><TabsPanel value="table">Rows</TabsPanel><TabsPanel value="chart">Trend</TabsPanel></Tabs>'
     }
   ]
 };

package/dist/components/theme-selector/theme-selector.meta.js

@@ -117,6 +117,38 @@ var themeSelectorMeta = {
     "muted-foreground",
     "ring"
   ],
+  motion: [
+    {
+      slot: "arrival",
+      recipe: "none",
+      part: "Root",
+      why: "It sits in a settings panel or a popover, which owns the entrance."
+    },
+    {
+      slot: "response",
+      recipe: "motion-interactive",
+      part: "Option (list)",
+      why: "List rows ease their hover fill like Menu and Select rows, so a theme list beside a menu reads as the same kind of row."
+    },
+    {
+      slot: "response",
+      recipe: "motion-interactive",
+      part: "Name (grid)",
+      why: "In the grid, the theme's name brightens on hover, eased. The preview tile's outline steps rather than easing \u2014 outline is not in the recipe's transition list \u2014 so the name carries the motion."
+    },
+    {
+      slot: "transition",
+      recipe: "motion-interactive",
+      part: "Check (list)",
+      why: "The check fades into the chosen row and out of the old one, so the choice reads as moving, at the same moment the whole interface repaints in the new theme."
+    },
+    {
+      slot: "activity",
+      recipe: "none",
+      part: "Root",
+      why: "Applying a theme is synchronous: the whole interface repaints at once, and that repaint is the feedback."
+    }
+  ],
   a11y: [
     'The container is role="radiogroup" with an aria-label; each card is a role="radio" button with aria-checked reflecting the selected theme.',
     "Standard radio keyboard: arrow keys move the check \u2014 calling onValueChange on each press \u2014 and Space checks the focused option. That instant switching is right for a free, reversible choice; where a switch has a cost, use a DisclosurePicker list (a listbox: arrows move, Enter commits) with ThemePreview tiles instead.",

package/dist/components/theme-switcher/theme-switcher.js

@@ -3,6 +3,7 @@
 // src/components/theme-switcher/theme-switcher.tsx
 import { Radio as RadioBase } from "@base-ui/react/radio";
 import { Icon } from "../../icon/index.js";
+import { motionAttribute } from "../../motion/MotionProvider.js";
 import { cn } from "../../lib/cn.js";
 import {
   SEGMENTED_INNER_RADIUS,
@@ -21,6 +22,7 @@ function ThemeSwitcher({
   value,
   onValueChange,
   label = "Theme",
+  motion,
   className,
   ref,
   ...props
@@ -31,6 +33,7 @@ function ThemeSwitcher({
     {
       ref,
       "aria-label": label,
+      "data-motion": motionAttribute(motion),
       value,
       onValueChange: (next) => onValueChange(next),
       className: cn(
@@ -54,7 +57,7 @@ function ThemeSwitcher({
           {
             "aria-hidden": true,
             className: cn(
-              "pointer-events-none absolute start-0.5 top-0.5 size-7 bg-accent transition-[translate,opacity] duration-(--motion-duration-base) ease-emphasized",
+              "pointer-events-none absolute start-0.5 top-0.5 size-7 bg-accent motion-glide",
               SEGMENTED_INNER_RADIUS,
               "[translate:calc(var(--segment-index)*var(--segment-step))_0] rtl:[translate:calc(var(--segment-index)*var(--segment-step)*-1)_0]",
               activeIndex < 0 && "opacity-0"

package/dist/components/theme-switcher/theme-switcher.meta.js

@@ -58,6 +58,12 @@ var themeSwitcherMeta = {
       default: '"Theme"',
       description: "Accessible label for the radiogroup."
     },
+    {
+      name: "motion",
+      type: '"full" | "subtle" | "off"',
+      default: '"full"',
+      description: "How much motion this component uses: `full` (default) inherits the app's policy, `subtle` keeps feedback and drops the glide, `off` stills it. It can only turn motion down \u2014 it never overrides a reader's reduce-motion setting."
+    },
     {
       name: "className",
       type: "string",
@@ -73,6 +79,38 @@ var themeSwitcherMeta = {
     "accent-foreground",
     "ring"
   ],
+  motion: [
+    {
+      slot: "arrival",
+      recipe: "none",
+      part: "Root",
+      why: "It arrives with the header or settings row it lives in; a theme control that announces itself competes with the page it themes."
+    },
+    {
+      slot: "response",
+      recipe: "motion-interactive",
+      part: "Option",
+      why: "The icon steps from muted to foreground under the pointer, which is what tells an icon-only segment it is a control."
+    },
+    {
+      slot: "response",
+      recipe: "motion-press",
+      part: "Option",
+      why: "A settle under the press confirms the tap on a 28px target before the theme change repaints the page around it."
+    },
+    {
+      slot: "transition",
+      recipe: "motion-glide",
+      part: "Active pill",
+      why: 'One pill slides to the chosen mode, stepping by option + gap on the spacing scale, so light \u2192 dark reads as the same control moving, not three icons trading a fill. Expressive: motion="subtle" lands it in place.'
+    },
+    {
+      slot: "activity",
+      recipe: "none",
+      part: "Root",
+      why: "Changing the theme is synchronous; the repaint is the feedback."
+    }
+  ],
   a11y: [
     'The container is role="radiogroup" with an aria-label; each option is role="radio" with aria-checked reflecting the selected value.',
     "Each icon button carries an aria-label (Light / Dark / System) plus a title tooltip, since the visual is icon-only.",
@@ -91,6 +129,10 @@ var themeSwitcherMeta = {
     {
       label: "Light selected",
       code: '<ThemeSwitcher value="light" onValueChange={setTheme} />'
+    },
+    {
+      label: "Subtle motion",
+      code: '<ThemeSwitcher value={theme} onValueChange={setTheme} motion="subtle" />'
     }
   ]
 };

package/dist/components/thinking-orb/thinking-orb.meta.js

@@ -31,11 +31,13 @@ var thinkingOrbMeta = {
       },
       {
         guidance: "dont",
-        description: "Do not put one on every row of a list or in a repeated skeleton. Each orb runs its own animation frame loop painting hundreds of arcs; use Skeleton for content-shaped waits and Spinner inside buttons."
+        description: "Do not put one on every row of a list or in a repeated skeleton. Each orb runs its own animation frame loop painting hundreds of arcs; use Skeleton for content-shaped waits and Spinner inside buttons.",
+        instead: ["Skeleton", "Spinner"]
       },
       {
         guidance: "dont",
-        description: "Do not use it for a determinate wait. It carries no sense of how far along anything is \u2014 reach for Progress when a percentage exists."
+        description: "Do not use it for a determinate wait. It carries no sense of how far along anything is \u2014 reach for Progress when a percentage exists.",
+        instead: ["Progress"]
       },
       {
         guidance: "dont",

package/dist/components/toast/toast.meta.js

@@ -33,7 +33,8 @@ var toastMeta = {
       },
       {
         guidance: "dont",
-        description: "Use Toast for critical blockers or persistent outages. Use Banner or Dialog when the user must notice and act."
+        description: "Use Toast for critical blockers or persistent outages. Use Banner or Dialog when the user must notice and act.",
+        instead: ["Banner", "Dialog"]
       },
       {
         guidance: "dont",

package/dist/components/toggle/toggle.js

@@ -3,8 +3,10 @@ import { Toggle as BaseToggle } from "@base-ui/react/toggle";
 import { ToggleGroup as BaseToggleGroup } from "@base-ui/react/toggle-group";
 import { createContext, useContext } from "react";
 import { cn } from "../../lib/cn.js";
-import { SEGMENTED_ITEM, SEGMENTED_TRACK } from "../../lib/segmented.js";
-import { jsx } from "react/jsx-runtime";
+import { HighlightGlide } from "../../lib/highlight-glide.js";
+import { SEGMENTED_INNER_RADIUS, SEGMENTED_ITEM, SEGMENTED_TRACK } from "../../lib/segmented.js";
+import { motionAttribute } from "../../motion/MotionProvider.js";
+import { jsx, jsxs } from "react/jsx-runtime";
 var ToggleAppearanceContext = createContext("default");
 function Toggle({ className, ...props }) {
   const appearance = useContext(ToggleAppearanceContext);
@@ -31,17 +33,38 @@ function Toggle({ className, ...props }) {
   );
 }
 Toggle.displayName = "Toggle";
-function ToggleGroup({ className, appearance = "default", ...props }) {
-  return /* @__PURE__ */ jsx(ToggleAppearanceContext.Provider, { value: appearance, children: /* @__PURE__ */ jsx(
+var SEGMENTED_GLIDE_HANDOFF = "[&[data-glide]>[data-pressed]]:bg-transparent";
+function ToggleGroup({
+  className,
+  appearance = "default",
+  motion,
+  children,
+  ...props
+}) {
+  const glide = appearance === "segmented" && !props.multiple;
+  return /* @__PURE__ */ jsx(ToggleAppearanceContext.Provider, { value: appearance, children: /* @__PURE__ */ jsxs(
     BaseToggleGroup,
     {
       "data-appearance": appearance,
+      "data-motion": motionAttribute(motion),
       className: cn(
         appearance === "segmented" ? SEGMENTED_TRACK : "inline-flex items-center gap-1",
+        glide && SEGMENTED_GLIDE_HANDOFF,
         className
       ),
       ...props,
-      "aria-orientation": props.role === "toolbar" ? props.orientation ?? "horizontal" : void 0
+      "aria-orientation": props.role === "toolbar" ? props.orientation ?? "horizontal" : void 0,
+      children: [
+        glide && /* @__PURE__ */ jsx(
+          HighlightGlide,
+          {
+            follow: "data-pressed",
+            timing: "selection",
+            className: cn(SEGMENTED_INNER_RADIUS, "bg-accent motion-glide")
+          }
+        ),
+        children
+      ]
     }
   ) });
 }

package/dist/components/toggle/toggle.meta.js

@@ -31,7 +31,8 @@ var toggleMeta = {
       },
       {
         guidance: "dont",
-        description: "Do not use Toggle for persistent application settings; use Switch."
+        description: "Do not use Toggle for persistent application settings; use Switch.",
+        instead: ["Switch"]
       },
       {
         guidance: "dont",
@@ -68,7 +69,7 @@ var toggleMeta = {
       name: "appearance",
       type: '"default" | "segmented"',
       default: '"default"',
-      description: "On ToggleGroup: `default` is a loose row of toggles; `segmented` draws the capsule segmented control (one track, the pressed option filled) shared with ThemeSwitcher. Toggles inside inherit it."
+      description: "On ToggleGroup: `default` is a loose row of toggles; `segmented` draws the capsule segmented control (one track, the pressed option filled) shared with ThemeSwitcher. Single-select segmented draws ONE fill that glides to the pressed option and resizes to its label; multi-select keeps a fill per pressed option. Toggles inside inherit it."
     },
     {
       name: "multiple",
@@ -76,6 +77,12 @@ var toggleMeta = {
       default: "false",
       description: "On ToggleGroup: allow several toggles pressed at once. The default is single-select, which behaves like a radio group."
     },
+    {
+      name: "motion",
+      type: '"full" | "subtle" | "off"',
+      default: '"full"',
+      description: "On ToggleGroup: how much motion this component uses: `full` (default) inherits the app's policy, `subtle` keeps feedback and drops the glide, `off` stills it. It can only turn motion down \u2014 it never overrides a reader's reduce-motion setting."
+    },
     {
       name: "Toggle",
       type: "Base UI Toggle props (pressed, defaultPressed, onPressedChange, disabled, value) + className",
@@ -86,7 +93,7 @@ var toggleMeta = {
   subcomponents: [
     {
       name: "ToggleGroup",
-      type: 'Base UI ToggleGroup props (value, defaultValue, onValueChange, multiple, disabled, orientation, loopFocus) + appearance?: "default" | "segmented" + className',
+      type: 'Base UI ToggleGroup props (value, defaultValue, onValueChange, multiple, disabled, orientation, loopFocus) + appearance?: "default" | "segmented" + motion?: "full" | "subtle" | "off" + className',
       description: "Groups child Toggles and shares pressed state across them \u2014 each Toggle inside carries a value. Defaults to multiple: false (single-select) \u2014 the fit for view-mode switches and segmented controls; pass multiple to allow several pressed at once, e.g. a row of formatting toggles."
     },
     {
@@ -99,6 +106,38 @@ var toggleMeta = {
     appearance: ["default", "segmented"]
   },
   tokensUsed: ["muted-foreground", "foreground", "accent", "accent-foreground", "card", "border", "ring"],
+  motion: [
+    {
+      slot: "arrival",
+      recipe: "none",
+      part: "Toggle",
+      why: "Toggles arrive with the toolbar or header they sit in. Animating each one in would make a row of controls ripple for no reason."
+    },
+    {
+      slot: "response",
+      recipe: "motion-interactive",
+      part: "Toggle",
+      why: "Hover and the pressed fill ease rather than flip, so pressing reads as the same button changing state, not a different button appearing."
+    },
+    {
+      slot: "response",
+      recipe: "motion-press",
+      part: "Toggle",
+      why: "The small settle under the finger confirms the press landed before the state change is read \u2014 the difference matters most on touch, where there is no hover."
+    },
+    {
+      slot: "transition",
+      recipe: "motion-glide",
+      part: "Segmented fill",
+      why: 'In a single-select segmented group one fill travels to the chosen option and stretches to its label, so a view switch reads as one control now pointing elsewhere. Measured, because labels differ in width. Expressive: motion="subtle" lands it in place.'
+    },
+    {
+      slot: "activity",
+      recipe: "none",
+      part: "Toggle",
+      why: "A toggle commits instantly. Work that follows from the new state shows where its result appears, not on the control."
+    }
+  ],
   a11y: [
     "Base UI sets aria-pressed on each Toggle and manages the pressed/disabled states.",
     "ToggleGroup provides arrow-key roving focus across its items; loopFocus wraps at the ends.",
@@ -118,6 +157,10 @@ var toggleMeta = {
       label: "Segmented view switch",
       code: '<ToggleGroup appearance="segmented" defaultValue={["list"]} aria-label="View"><Toggle value="list" aria-label="List view"><Icon name="list" /></Toggle><Toggle value="grid" aria-label="Grid view"><Icon name="grid" /></Toggle></ToggleGroup>'
     },
+    {
+      label: "Segmented with labels, subtle motion",
+      code: '<ToggleGroup appearance="segmented" motion="subtle" defaultValue={["week"]} aria-label="Range"><Toggle value="day">Day</Toggle><Toggle value="week">Week</Toggle><Toggle value="month">Month</Toggle></ToggleGroup>'
+    },
     {
       label: "Multi-select group",
       code: '<ToggleGroup multiple defaultValue={["bold"]}><Toggle value="bold">Bold</Toggle><Toggle value="italic">Italic</Toggle></ToggleGroup>'

package/dist/components/tool-call/index.js

@@ -0,0 +1,8 @@
+// src/components/tool-call/index.ts
+import { TOOL_CALL_STATUS_LABELS, ToolCall } from "./tool-call.js";
+import { toolCallMeta } from "./tool-call.meta.js";
+export {
+  TOOL_CALL_STATUS_LABELS,
+  ToolCall,
+  toolCallMeta
+};

package/dist/components/tool-call/tool-call.js

@@ -0,0 +1,117 @@
+// src/components/tool-call/tool-call.tsx
+import { useRef } from "react";
+import { Icon } from "../../icon/index.js";
+import { cn } from "../../lib/cn.js";
+import { useTypeTier } from "../../lib/density.js";
+import { CodeBlock } from "../code-block/index.js";
+import {
+  Collapsible,
+  CollapsibleIndicator,
+  CollapsiblePanel,
+  CollapsibleTrigger
+} from "../collapsible/index.js";
+import { Spinner } from "../spinner/index.js";
+import { toolCallHeaderVariants, toolCallVariants } from "./tool-call.variants.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var TOOL_CALL_STATUS_LABELS = {
+  running: "Running",
+  awaiting: "Needs approval",
+  complete: "Done",
+  error: "Failed",
+  denied: "Denied"
+};
+var STATUSES = Object.keys(TOOL_CALL_STATUS_LABELS);
+function formatData(value) {
+  if (typeof value === "string") return value;
+  try {
+    return JSON.stringify(value, null, 2) ?? String(value);
+  } catch {
+    return String(value);
+  }
+}
+function ToolCall({
+  name,
+  title,
+  status = "running",
+  statusLabel,
+  input,
+  output,
+  error,
+  children,
+  defaultOpen = false,
+  open,
+  onOpenChange,
+  className,
+  ...props
+}) {
+  const tier = useTypeTier();
+  const word = statusLabel ?? TOOL_CALL_STATUS_LABELS[status];
+  const mountedStatus = useRef(status).current;
+  const announcement = status === mountedStatus ? "" : `${typeof title === "string" ? title : name}: ${word}`;
+  const hasInput = input !== void 0;
+  const hasOutput = children !== void 0 || output !== void 0;
+  const hasDetails = hasInput || hasOutput;
+  const row = /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "motion-icon-swap size-4 shrink-0", children: STATUSES.map((s) => /* @__PURE__ */ jsx("span", { "data-active": s === status, className: "inline-flex", children: s === "running" ? /* @__PURE__ */ jsx(
+      Spinner,
+      {
+        size: "sm",
+        role: "none",
+        "aria-label": void 0,
+        className: cn("text-muted-foreground", status !== "running" && "[&_svg]:[animation-play-state:paused]")
+      }
+    ) : /* @__PURE__ */ jsx(Icon, { name: GLYPHS[s].name, className: GLYPHS[s].className }) }, s)) }),
+    /* @__PURE__ */ jsxs("span", { className: cn("flex min-w-0 flex-1 items-baseline gap-2", tier.body), children: [
+      /* @__PURE__ */ jsx("span", { className: cn("truncate text-foreground", !title && "font-mono"), children: title ?? name }),
+      title ? /* @__PURE__ */ jsx("span", { className: cn("hidden truncate font-mono text-muted-foreground sm:inline", tier.secondary), children: name }) : null
+    ] }),
+    /* @__PURE__ */ jsx("span", { className: cn("shrink-0 text-muted-foreground", tier.secondary, status === "error" && "text-destructive"), children: word }),
+    hasDetails ? /* @__PURE__ */ jsx(CollapsibleIndicator, {}) : null
+  ] });
+  const errorLine = status === "error" && error ? /* @__PURE__ */ jsx("p", { className: cn("px-3 pb-2 text-destructive", tier.supporting), children: error }) : null;
+  const live = /* @__PURE__ */ jsx("span", { role: "status", className: "sr-only", children: announcement });
+  if (!hasDetails) {
+    return /* @__PURE__ */ jsxs("div", { "data-status": status, className: cn(toolCallVariants({ status }), className), ...props, children: [
+      /* @__PURE__ */ jsx("div", { className: toolCallHeaderVariants({ interactive: false }), children: row }),
+      errorLine,
+      live
+    ] });
+  }
+  return /* @__PURE__ */ jsxs(
+    Collapsible,
+    {
+      "data-status": status,
+      defaultOpen,
+      open,
+      onOpenChange: onOpenChange ? (next) => onOpenChange(next) : void 0,
+      className: cn(toolCallVariants({ status }), className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(CollapsibleTrigger, { className: cn("group/collapsible", toolCallHeaderVariants({ interactive: true })), children: row }),
+        errorLine,
+        /* @__PURE__ */ jsx(CollapsiblePanel, { children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3 border-t border-border p-3", children: [
+          hasInput ? /* @__PURE__ */ jsx(Detail, { label: "Input", tier: tier.label, code: formatData(input) }) : null,
+          children !== void 0 ? children : output !== void 0 ? /* @__PURE__ */ jsx(Detail, { label: "Output", tier: tier.label, code: formatData(output) }) : null
+        ] }) }),
+        live
+      ]
+    }
+  );
+}
+ToolCall.displayName = "ToolCall";
+var GLYPHS = {
+  awaiting: { name: "clock", className: "text-tone-warning" },
+  complete: { name: "check", className: "text-muted-foreground" },
+  error: { name: "warning", className: "text-destructive" },
+  denied: { name: "xmark", className: "text-muted-foreground" }
+};
+function Detail({ label, tier, code }) {
+  return /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-col gap-1.5", children: [
+    /* @__PURE__ */ jsx("span", { className: cn("text-muted-foreground", tier), children: label }),
+    /* @__PURE__ */ jsx(CodeBlock, { code })
+  ] });
+}
+export {
+  TOOL_CALL_STATUS_LABELS,
+  ToolCall
+};