@candor-ui/react 1.7.0 → 1.9.0

package/dist/lib/mcp-input.js

@@ -0,0 +1,369 @@
+/**
+ * MCP's "input required" results (spec 2026-07-28, multi round-trip requests) as Candor data: a server's form becomes
+ * questions for ClarifyingQuestions, a plain confirmation or a link to open becomes a two-answer Decision for
+ * ApprovalDecision, and the person's answers become the `inputResponses` the client sends when it retries the call.
+ * Requests it can't show (sampling, roots, anything newer) stay listed as not supported, never dropped.
+ *
+ * Pure functions on plain data, so they run in the browser or on the server, with any MCP client.
+ *
+ * Checked against https://modelcontextprotocol.io/specification/2026-07-28 (basic/patterns/mrtr, client/elicitation
+ * and the schema): `resultType: "input_required"`, `inputRequests` as a map keyed by the server's ids, `requestState`
+ * echoed back unchanged, and the retry's `inputResponses` keyed the same way. Elicitation results are
+ * `{ action: "accept" | "decline" | "cancel", content? }`.
+ */
+/** The words this file writes into questions, decisions and problems. Pass your own to `mcpInputView` or `mcpInputResponses`. */
+export const mcpInputWords = {
+    yes: "Yes",
+    no: "No",
+    /** The extra option on a choice the server doesn't require. */
+    skip: "Leave unanswered",
+    defaultHint: "Server’s default: {value}",
+    formatEmail: "name@example.com",
+    formatUri: "https://…",
+    formatDate: "YYYY-MM-DD",
+    formatDateTime: "YYYY-MM-DDTHH:MM",
+    confirm: "Go ahead",
+    openPage: "Open the page",
+    decline: "Decline",
+    host: "Opens",
+    address: "Full address",
+    punycode: "The address uses an encoded name (xn--), which can imitate another site.",
+    notHttps: "The page isn’t on https.",
+    badUrl: "The server sent an address that isn’t a valid URL, so it can’t be opened.",
+    unsupportedSampling: "The server asks the client to run a model prompt (sampling), which this app doesn’t do here.",
+    unsupportedRoots: "The server asks for the client’s folders (roots), which this app doesn’t answer here.",
+    unsupportedMethod: "The server asks for something this app can’t show yet: {method}.",
+    unsupportedShape: "The server’s request isn’t in a shape this app recognises.",
+    unsupportedField: "The form has a field this app can’t show: {field}.",
+    unanswered: "Not answered yet.",
+    required: "An answer is needed.",
+    notAnOption: "That isn’t one of the choices.",
+    notANumber: "That isn’t a number.",
+    notAnInteger: "That needs to be a whole number.",
+    tooSmall: "That needs to be at least {min}.",
+    tooLarge: "That needs to be at most {max}.",
+    tooShort: "That needs at least {min} characters.",
+    tooLong: "That allows at most {max} characters.",
+    format: "That doesn’t look like {format}.",
+    tooFew: "Choose at least {min}.",
+    tooMany: "Choose at most {max}.",
+};
+const fill = (s, vars) => s.replace(/\{(\w+)\}/g, (m, k) => (k in vars ? String(vars[k]) : m));
+const isObject = (v) => typeof v === "object" && v !== null && !Array.isArray(v);
+/** The id of "Leave unanswered" on a choice the server doesn't require; no enum value or "true"/"false" can clash with it. */
+const SKIP = "\u0000skip";
+/* ---------------------------------------------------------------- result → view */
+/**
+ * Whether a tools/call (or prompts/get, resources/read) result asks for more input. A result without `resultType`
+ * comes from an older server and counts as complete, as the spec says.
+ */
+export function isMcpInputRequired(result) {
+    return isObject(result) && result.resultType === "input_required";
+}
+/**
+ * An input-required result as items to show: forms as questions, confirmations and links as decisions, and anything
+ * else as a visible "not supported". Undefined when the result doesn't ask for input. `server` is your app's own name
+ * for the server, which the person should see beside every request.
+ */
+export function mcpInputView(result, options = {}) {
+    if (!isMcpInputRequired(result))
+        return undefined;
+    const w = { ...mcpInputWords, ...options.words };
+    const requests = isObject(result.inputRequests) ? result.inputRequests : {};
+    const items = Object.entries(requests).map(([key, request]) => itemOf(key, request, w));
+    const info = isObject(result._meta) ? result._meta["io.modelcontextprotocol/serverInfo"] : undefined;
+    const claims = isObject(info) ? (typeof info.title === "string" && info.title) || (typeof info.name === "string" && info.name) || undefined : undefined;
+    return {
+        items,
+        ...(typeof result.requestState === "string" && { requestState: result.requestState }),
+        ...(options.server && { server: options.server }),
+        ...(claims && { serverClaims: claims }),
+    };
+}
+function itemOf(key, request, w) {
+    const unsupported = (reason, method) => ({ key, kind: "unsupported", ...(method && { method }), reason, request });
+    if (!isObject(request) || typeof request.method !== "string")
+        return unsupported(w.unsupportedShape);
+    const method = request.method;
+    if (method === "sampling/createMessage")
+        return unsupported(w.unsupportedSampling, method);
+    if (method === "roots/list")
+        return unsupported(w.unsupportedRoots, method);
+    if (method !== "elicitation/create")
+        return unsupported(fill(w.unsupportedMethod, { method }), method);
+    const params = request.params;
+    if (!isObject(params) || typeof params.message !== "string")
+        return unsupported(w.unsupportedShape, method);
+    const message = params.message;
+    const mode = params.mode ?? "form";
+    if (mode === "url") {
+        if (typeof params.url !== "string")
+            return unsupported(w.unsupportedShape, method);
+        let parsed;
+        try {
+            parsed = new URL(params.url);
+        }
+        catch {
+            return unsupported(w.badUrl, method);
+        }
+        if (parsed.protocol !== "https:" && parsed.protocol !== "http:")
+            return unsupported(w.badUrl, method);
+        const warnings = [];
+        if (parsed.hostname.split(".").some((part) => part.startsWith("xn--")))
+            warnings.push(w.punycode);
+        if (parsed.protocol !== "https:")
+            warnings.push(w.notHttps);
+        return {
+            key,
+            kind: "url",
+            message,
+            url: params.url,
+            host: parsed.host,
+            warnings,
+            decision: {
+                id: key,
+                question: message,
+                facts: [
+                    { label: w.host, value: parsed.host },
+                    { label: w.address, value: params.url },
+                ],
+                choices: [
+                    { id: "accept", label: w.openPage },
+                    { id: "decline", label: w.decline },
+                ],
+                state: "open",
+            },
+        };
+    }
+    if (mode !== "form")
+        return unsupported(fill(w.unsupportedMethod, { method: `${method} (${String(mode)})` }), method);
+    const schema = params.requestedSchema;
+    if (!isObject(schema) || (schema.properties !== undefined && !isObject(schema.properties)))
+        return unsupported(w.unsupportedShape, method);
+    const properties = (schema.properties ?? {});
+    const required = new Set(Array.isArray(schema.required) ? schema.required.filter((r) => typeof r === "string") : []);
+    const names = Object.keys(properties);
+    if (!names.length) {
+        return {
+            key,
+            kind: "confirm",
+            message,
+            decision: {
+                id: key,
+                question: message,
+                choices: [
+                    { id: "accept", label: w.confirm },
+                    { id: "decline", label: w.decline },
+                ],
+                state: "open",
+            },
+        };
+    }
+    const questions = [];
+    for (const name of names) {
+        const q = questionOf(name, properties[name], required.has(name), w);
+        // One field it can't show makes the whole form unsupported: answering only part of it would send a half-truth.
+        if (!q)
+            return unsupported(fill(w.unsupportedField, { field: name }), method);
+        questions.push(q);
+    }
+    return { key, kind: "questions", message, questions, fields: properties, required: [...required] };
+}
+/** A field's options, when it is an enum (single or multiple); undefined otherwise. */
+function optionsOf(s) {
+    const titled = (list) => Array.isArray(list) && list.every((o) => isObject(o) && typeof o.const === "string")
+        ? list.map((o) => ({ id: o.const, label: typeof o.title === "string" && o.title ? o.title : o.const }))
+        : undefined;
+    const plain = (list, names) => Array.isArray(list) && list.every((v) => typeof v === "string")
+        ? list.map((v, i) => ({ id: v, label: Array.isArray(names) && typeof names[i] === "string" && names[i] ? names[i] : v }))
+        : undefined;
+    if (s.type === "array") {
+        const items = isObject(s.items) ? s.items : undefined;
+        const options = items ? (items.anyOf !== undefined ? titled(items.anyOf) : plain(items.enum)) : undefined;
+        return options ? { options, multiple: true } : undefined;
+    }
+    if (s.type === "string" || s.type === undefined) {
+        if (s.oneOf !== undefined) {
+            const options = titled(s.oneOf);
+            return options ? { options, multiple: false } : undefined;
+        }
+        if (s.enum !== undefined) {
+            const options = plain(s.enum, s.enumNames);
+            return options ? { options, multiple: false } : undefined;
+        }
+    }
+    return undefined;
+}
+const formatHint = (format, w) => format === "email" ? w.formatEmail : format === "uri" ? w.formatUri : format === "date" ? w.formatDate : format === "date-time" ? w.formatDateTime : undefined;
+function questionOf(name, raw, required, w) {
+    if (!isObject(raw))
+        return undefined;
+    const s = raw;
+    const title = typeof s.title === "string" && s.title ? s.title : undefined;
+    const description = typeof s.description === "string" && s.description ? s.description : undefined;
+    const prompt = description ?? title ?? name;
+    const tag = description && title ? title : undefined;
+    const head = { id: name, prompt, ...(tag && { tag }) };
+    const enumOf = optionsOf(s);
+    if (enumOf) {
+        const options = !required && !enumOf.multiple ? [...enumOf.options, { id: SKIP, label: w.skip }] : enumOf.options;
+        const recommended = typeof s.default === "string" && enumOf.options.some((o) => o.id === s.default) ? s.default : undefined;
+        return { ...head, kind: "choice", options, multiple: enumOf.multiple, other: false, ...(recommended && { recommended }) };
+    }
+    if (s.type === "boolean") {
+        const options = [
+            { id: "true", label: w.yes },
+            { id: "false", label: w.no },
+            ...(required ? [] : [{ id: SKIP, label: w.skip }]),
+        ];
+        const recommended = typeof s.default === "boolean" ? String(s.default) : undefined;
+        return { ...head, kind: "choice", options, multiple: false, other: false, ...(recommended && { recommended }) };
+    }
+    if (s.type === "string" || s.type === "number" || s.type === "integer") {
+        const hint = s.default !== undefined && s.default !== null && typeof s.default !== "object" ? fill(w.defaultHint, { value: String(s.default) }) : formatHint(s.format, w);
+        return { ...head, kind: "text", ...(hint && { placeholder: hint }), ...(!required && { optional: true }) };
+    }
+    return undefined;
+}
+/* ---------------------------------------------------------------- answers → retry */
+const EMAIL = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+const DATE = /^\d{4}-\d{2}-\d{2}$/;
+const DATE_TIME = /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}(:\d{2}(\.\d+)?)?(Z|[+-]\d{2}:\d{2})?$/;
+function formatOk(format, text) {
+    if (format === "email")
+        return EMAIL.test(text);
+    if (format === "date")
+        return DATE.test(text) && !Number.isNaN(Date.parse(text));
+    if (format === "date-time")
+        return DATE_TIME.test(text) && !Number.isNaN(Date.parse(text));
+    if (format === "uri") {
+        try {
+            return Boolean(new URL(text));
+        }
+        catch {
+            return false;
+        }
+    }
+    return true;
+}
+/**
+ * The retry's `inputResponses` for the person's replies, checked against each form's schema first (the spec asks
+ * clients to validate). Every form, confirmation and link needs a reply; a form is sent only once every required
+ * field has a valid answer. `own` holds responses your app made itself, for requests Candor doesn't show (a sampling
+ * or roots answer), keyed by the server's ids; anything left is listed in `notSent`.
+ */
+export function mcpInputResponses(view, replies, options = {}) {
+    const w = { ...mcpInputWords, ...options.words };
+    const problems = [];
+    // Keys are the server's ids, so the maps have no prototype: "__proto__" or "toString" is just another key.
+    const inputResponses = Object.create(null);
+    const notSent = [];
+    const problem = (key, code, vars = {}, questionId) => problems.push({ key, ...(questionId !== undefined && { questionId }), code, message: fill(w[code], vars) });
+    for (const item of view.items) {
+        if (item.kind === "unsupported") {
+            if (options.own && Object.hasOwn(options.own, item.key))
+                inputResponses[item.key] = options.own[item.key];
+            else
+                notSent.push(item.key);
+            continue;
+        }
+        const reply = replies.find((r) => r.key === item.key);
+        if (!reply) {
+            problem(item.key, "unanswered");
+            continue;
+        }
+        if (reply.action !== "accept") {
+            inputResponses[item.key] = { action: reply.action };
+            continue;
+        }
+        if (item.kind !== "questions") {
+            // A confirmation or a link: accepting sends no content. For a link, open it now; the server finds out on retry.
+            inputResponses[item.key] = { action: "accept" };
+            continue;
+        }
+        const content = Object.create(null);
+        const before = problems.length;
+        for (const q of item.questions) {
+            const s = item.fields[q.id] ?? {};
+            const required = item.required.includes(q.id);
+            const a = reply.answers?.find((x) => x.questionId === q.id);
+            if (q.kind === "choice") {
+                const picked = (a?.choice ?? []).filter((c) => c !== SKIP);
+                if (picked.some((c) => !q.options.some((o) => o.id === c))) {
+                    problem(item.key, "notAnOption", {}, q.id);
+                    continue;
+                }
+                if (q.multiple) {
+                    if (!picked.length && (!required || s.minItems === 0)) {
+                        if (required)
+                            content[q.id] = [];
+                        continue;
+                    }
+                    if (!picked.length && s.minItems === undefined)
+                        problem(item.key, "required", {}, q.id);
+                    else if (typeof s.minItems === "number" && picked.length < s.minItems)
+                        problem(item.key, "tooFew", { min: s.minItems }, q.id);
+                    else if (typeof s.maxItems === "number" && picked.length > s.maxItems)
+                        problem(item.key, "tooMany", { max: s.maxItems }, q.id);
+                    else
+                        content[q.id] = picked;
+                    continue;
+                }
+                const value = picked[0];
+                if (value === undefined) {
+                    if (required)
+                        problem(item.key, "required", {}, q.id);
+                    continue;
+                }
+                content[q.id] = s.type === "boolean" ? value === "true" : value;
+                continue;
+            }
+            const text = a?.text?.trim() ?? "";
+            if (!text) {
+                if (!q.optional)
+                    problem(item.key, "required", {}, q.id);
+                continue;
+            }
+            if (s.type === "number" || s.type === "integer") {
+                const n = Number(text);
+                if (!Number.isFinite(n))
+                    problem(item.key, "notANumber", {}, q.id);
+                else if (s.type === "integer" && !Number.isInteger(n))
+                    problem(item.key, "notAnInteger", {}, q.id);
+                else if (typeof s.minimum === "number" && n < s.minimum)
+                    problem(item.key, "tooSmall", { min: s.minimum }, q.id);
+                else if (typeof s.maximum === "number" && n > s.maximum)
+                    problem(item.key, "tooLarge", { max: s.maximum }, q.id);
+                else
+                    content[q.id] = n;
+                continue;
+            }
+            if (typeof s.minLength === "number" && text.length < s.minLength)
+                problem(item.key, "tooShort", { min: s.minLength }, q.id);
+            else if (typeof s.maxLength === "number" && text.length > s.maxLength)
+                problem(item.key, "tooLong", { max: s.maxLength }, q.id);
+            else if (!formatOk(s.format, text))
+                problem(item.key, "format", { format: formatHint(s.format, w) ?? String(s.format) }, q.id);
+            else
+                content[q.id] = text;
+        }
+        if (problems.length === before)
+            inputResponses[item.key] = { action: "accept", content };
+    }
+    return problems.length ? { ok: false, problems } : { ok: true, inputResponses, notSent };
+}
+/**
+ * The params for retrying the original request: its own params (name and arguments for tools/call) with
+ * `inputResponses` and the result's `requestState` exactly as received. A `requestState` from an earlier round is
+ * removed when this result has none, as the spec requires. Send it as a new request with a new JSON-RPC id.
+ */
+export function mcpRetryParams(original, view, inputResponses) {
+    const rest = { ...original };
+    delete rest.inputResponses;
+    delete rest.requestState;
+    return {
+        ...rest,
+        inputResponses,
+        ...(view.requestState !== undefined && { requestState: view.requestState }),
+    };
+}

package/dist/styles.css

@@ -244,6 +244,13 @@
  * Density: data-density="compact" on <html> (or any container) tightens type for
  * dense apps: 14px conversation text and 13px body and label text, with a narrower
  * thread and sidebar.
+ *
+ * Motion: data-motion="none" | "subtle" | "expressive" on <html> (or any container).
+ * Subtle is the default: a change that happened is shown settling (a collapse,
+ * a drawn tick, a fade). None turns every animation and transition off, with or
+ * without the OS setting. Expressive adds scale to pops and a shake to a locked
+ * control that was pressed. Motion reports a state change and never invents one;
+ * the OS's reduced-motion setting wins over all three.
  */
 @custom-variant dark (&:where([data-theme="dark"], [data-theme="dark"] *));
 
@@ -287,6 +294,14 @@
   --cd-ease-inout: cubic-bezier(0.4, 0, 0.2, 1);
   --cd-ease-spring: linear(0, 0.4 15%, 0.7 30%, 1 50%, 0.95 65%, 1.02 80%, 1 100%);
 
+  /* How long a state change takes to settle: a colour or a pop, a collapse, a drawn mark or a filled rail. */
+  --cd-dur-quick: 120ms;
+  --cd-dur-base: 200ms;
+  --cd-dur-slow: 360ms;
+  /* What data-motion="expressive" turns on. Subtle pops only fade (a scale of 1) and never shakes. */
+  --cd-pop-from: 1;
+  --cd-motion-shake: none;
+
   /* The message column's width, and the app sidebar's. (Not --sidebar-width: shadcn's SidebarProvider sets that.) */
   --cd-thread-width: 48rem;
   --cd-sidebar-width: 16rem;
@@ -325,6 +340,12 @@
   }
 }
 
+/* The motion presets. Subtle needs no attribute; expressive adds scale and a shake; none is below, after the keyframes. */
+[data-motion="expressive"] {
+  --cd-pop-from: 0.85;
+  --cd-motion-shake: shake var(--cd-dur-slow) var(--cd-ease) both;
+}
+
 @theme inline {
   --font-sans: var(--cd-font);
   --font-display: var(--cd-font-display);
@@ -431,6 +452,24 @@
   --animate-pulse-dot: pulse-dot 1.6s var(--cd-ease) infinite;
   --animate-rise-in: rise-in 240ms var(--cd-ease) both;
   --animate-caret: caret 1s steps(2, start) infinite;
+
+  /*
+   * Motion that reports a change. Tailwind has no --duration-* namespace, so use the tokens directly:
+   * duration-(--cd-dur-base). A collapse follows Radix's measured height; a pop is a fade (and a scale under
+   * expressive); tick-draw draws a mark whose path has pathLength="1"; fill grows a bar from --cd-fill-from; shake is
+   * none unless expressive; attention is one ring pulse, attention-wait three slow ones (then still: WCAG 2.2.2 wants moving content to stop).
+   */
+  --animate-collapse-down: collapse-down var(--cd-dur-base) var(--cd-ease);
+  --animate-collapse-up: collapse-up var(--cd-dur-base) var(--cd-ease);
+  --animate-pop-in: pop-in var(--cd-dur-base) var(--cd-ease) both;
+  --animate-pop-out: pop-out var(--cd-dur-quick) var(--cd-ease) both;
+  --animate-tick-draw: tick-draw var(--cd-dur-slow) var(--cd-ease) both;
+  --animate-fill: fill var(--cd-dur-slow) var(--cd-ease) both;
+  --animate-shake: var(--cd-motion-shake);
+  --animate-attention: attention 900ms var(--cd-ease) 1;
+  --animate-attention-wait: attention 2.4s var(--cd-ease) 3;
+  /* A prompt that was clicked around instead of answered: one attention ring, and a shake when expressive. */
+  --animate-nudge: var(--cd-motion-shake), attention 900ms var(--cd-ease) 1;
 }
 
 @keyframes shimmer {
@@ -448,6 +487,48 @@
 @keyframes caret {
   to { visibility: hidden; }
 }
+/* Collapsible content, to and from the height Radix measured. Overflow is hidden only while it moves. */
+@keyframes collapse-down {
+  from { height: 0; overflow: hidden; }
+  to { height: var(--radix-collapsible-content-height); overflow: hidden; }
+}
+@keyframes collapse-up {
+  from { height: var(--radix-collapsible-content-height); overflow: hidden; }
+  to { height: 0; overflow: hidden; }
+}
+/* Something added or removed: a fade, and a scale from --cd-pop-from (1 unless expressive). */
+@keyframes pop-in {
+  from { opacity: 0; transform: scale(var(--cd-pop-from)); }
+  to { opacity: 1; transform: none; }
+}
+@keyframes pop-out {
+  from { opacity: 1; transform: none; }
+  to { opacity: 0; transform: scale(var(--cd-pop-from)); }
+}
+/* A tick or cross drawn along its path; the path has pathLength="1" and stroke-dasharray 1. */
+@keyframes tick-draw {
+  from { stroke-dashoffset: 1; }
+  to { stroke-dashoffset: 0; }
+}
+/* A bar that fills to a measured point: along its width by default, or set --cd-fill-from to "1 0" for height. */
+@keyframes fill {
+  from { scale: var(--cd-fill-from, 0 1); }
+  to { scale: 1; }
+}
+/* A pressed control that can't be used: a small horizontal shake, expressive only. */
+@keyframes shake {
+  0%, 100% { transform: none; }
+  20%, 60% { transform: translateX(-3px); }
+  40%, 80% { transform: translateX(3px); }
+}
+/*
+ * A ring that grows and fades, in --cd-attention-color (the text colour unless set): once for something that arrived
+ * or a press that asked for attention, repeating while a decision waits.
+ */
+@keyframes attention {
+  0%, 100% { outline: 0 solid color-mix(in oklab, var(--cd-attention-color, currentColor) 45%, transparent); }
+  60% { outline: 6px solid transparent; }
+}
 
 /*
  * Syntax colours for Payload's tokens: on under data-syntax="highlight" (on <html> for the whole app, or a Payload's
@@ -468,6 +549,19 @@
 [data-slot="payload"][data-syntax="highlight"] :is([data-token="number"], [data-token="variable"]) { color: var(--attention-text); }
 [data-slot="payload"][data-syntax="highlight"] :is([data-token="property"], [data-token="tag"], [data-token="type"]) { color: var(--warning-text); }
 
+/*
+ * data-motion="none": nothing moves, with or without the OS setting. An element leaving with a pop-out (data-leaving)
+ * is simply gone. The reduced-motion block below comes last and stays authoritative for every preset.
+ */
+[data-motion="none"], [data-motion="none"] *, [data-motion="none"] *::before, [data-motion="none"] *::after {
+  animation: none !important;
+  transition: none !important;
+  scroll-behavior: auto !important;
+}
+[data-motion="none"] [data-leaving] {
+  display: none !important;
+}
+
 @media (prefers-reduced-motion: reduce) {
   *, *::before, *::after {
     animation-duration: 0.001ms !important;

package/dist/ui/collapsible.d.ts

@@ -2,5 +2,9 @@ import { Collapsible as CollapsiblePrimitive } from "radix-ui";
 import { type RenderProp } from "../lib/render-prop.js";
 declare function Collapsible({ ...props }: React.ComponentProps<typeof CollapsiblePrimitive.Root>): import("react").JSX.Element;
 declare function CollapsibleTrigger(allProps: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleTrigger> & RenderProp): import("react").JSX.Element;
-declare function CollapsibleContent({ ...props }: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleContent>): import("react").JSX.Element;
+/**
+ * The content opens and closes to the height Radix measured (--radix-collapsible-content-height), so a change of
+ * state is seen settling rather than snapping; data-motion="none" and the OS's reduced-motion setting make it snap.
+ */
+declare function CollapsibleContent({ className, ...props }: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleContent>): import("react").JSX.Element;
 export { Collapsible, CollapsibleTrigger, CollapsibleContent };

package/dist/ui/collapsible.js

@@ -1,6 +1,7 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Collapsible as CollapsiblePrimitive } from "radix-ui";
+import { cn } from "../lib/utils.js";
 import { withRender } from "../lib/render-prop.js";
 function Collapsible({ ...props }) {
     return _jsx(CollapsiblePrimitive.Root, { "data-slot": "collapsible", ...props });
@@ -9,7 +10,11 @@ function CollapsibleTrigger(allProps) {
     const props = withRender(allProps);
     return (_jsx(CollapsiblePrimitive.CollapsibleTrigger, { "data-slot": "collapsible-trigger", ...props }));
 }
-function CollapsibleContent({ ...props }) {
-    return (_jsx(CollapsiblePrimitive.CollapsibleContent, { "data-slot": "collapsible-content", ...props }));
+/**
+ * The content opens and closes to the height Radix measured (--radix-collapsible-content-height), so a change of
+ * state is seen settling rather than snapping; data-motion="none" and the OS's reduced-motion setting make it snap.
+ */
+function CollapsibleContent({ className, ...props }) {
+    return (_jsx(CollapsiblePrimitive.CollapsibleContent, { "data-slot": "collapsible-content", className: cn("data-[state=open]:animate-collapse-down data-[state=closed]:animate-collapse-up", className), ...props }));
 }
 export { Collapsible, CollapsibleTrigger, CollapsibleContent };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@candor-ui/react",
-  "version": "1.7.0",
+  "version": "1.9.0",
   "description": "Candor UI's free tier as an npm package: React components for agents that do real work, on shadcn/ui and Tailwind 4.",
   "license": "MIT",
   "author": "Methodic LLC",