@candor-ui/react 2.4.0 → 2.5.0

package/dist/blocks/copy-field.js

@@ -5,7 +5,10 @@ import { cn } from "../lib/utils.js";
 import { useCopy } from "../lib/use-copy.js";
 import { useStrings } from "./locale.js";
 import { motion } from "../lib/motion.js";
-/** The tick or cross after the clipboard write settles. */
+/**
+ * @motion pop:tick After the person copies, a tick (or a cross, if the browser refused the clipboard) pops in on the
+ * button once the browser has answered. Nothing shows before the answer, and under reduced motion it fades in.
+ */
 const tickMotion = motion("copy-field", "tick", "pop");
 /** CopyField's fixed words; override them under `copyField` in LocaleProvider's `strings`. */
 export const copyFieldStrings = {

package/dist/blocks/degraded-panel.js

@@ -5,6 +5,10 @@ import { cn } from "../lib/utils.js";
 import { Button } from "../ui/button.js";
 import { useStrings } from "./locale.js";
 import { motion } from "../lib/motion.js";
+/**
+ * @motion live:busy While a retry is under way, the retry icon turns in place and the button says it is retrying. It
+ * stops when the app ends the retry, and under reduced motion the icon is still.
+ */
 const spinMotion = motion("degraded-panel", "busy", "live", { dur: 1000 });
 /** DegradedPanel's fixed words; override them under `degradedPanel` in LocaleProvider's `strings`. */
 export const degradedPanelStrings = {

package/dist/blocks/locked.js

@@ -15,8 +15,17 @@ function animationMs(el) {
         .filter((n) => Number.isFinite(n));
     return times.length ? Math.max(...times) : undefined;
 }
-/** A press on the locked control: the reason is emphasised, and under expressive the control shakes. */
+/**
+ * @motion refuse:refuse A press on a locked control shows the reason it is locked; under the expressive setting the
+ * control also shakes once. The control stays locked and does nothing it would have done unlocked. Nothing plays
+ * until the person presses it.
+ */
 const refuseMotion = motion("locked", "refuse", "refuse");
+/**
+ * @motion tint:reason When the person presses a locked control, its reason changes from muted to full-strength text
+ * so it can be read, and goes back to muted for a moment after the press. Screen readers always have the reason,
+ * whether or not it is shown.
+ */
 const reasonMotion = motion("locked", "reason", "tint", { dur: 200 });
 /**
  * The honest-state rule: a control that cannot be used says why.

package/dist/blocks/status-dot.js

@@ -4,9 +4,16 @@ import { cn } from "../lib/utils.js";
 import { useNow } from "./relative-time.js";
 import { motion, useSettled } from "../lib/motion.js";
 import { runLiveness, STALE_AFTER, useStatusLabel } from "../lib/status.js";
-/** The pulse while a run is heard from. */
+/**
+ * @motion live:live A running or waiting dot pulses only while the run has been heard from within the allowed
+ * silence. Past it, or when the time can't be read, the dot is still rather than claiming the run is alive, and under
+ * reduced motion it is still.
+ */
 const liveMotion = motion("status-dot", "live", "live");
-/** The dot popping into its final colour when the run settles on screen. */
+/**
+ * @motion pop:settle The dot pops into its final colour when a run it was showing as unfinished settles while it is
+ * on screen. A dot that is already settled when it appears is drawn in its colour at once.
+ */
 const settleMotion = motion("status-dot", "settle", "pop");
 const dotColor = {
     idle: "bg-faint-foreground/60",

package/dist/blocks/step-list.js

@@ -5,12 +5,25 @@ import { CircleSlash, Hand, LoaderCircle } from "lucide-react";
 import { cn } from "../lib/utils.js";
 import { motion, useArrived, useSettled } from "../lib/motion.js";
 import { useStatusLabel } from "../lib/status.js";
-/** A step's tick or cross, drawn when its status settles on screen. */
+/**
+ * @motion mark:mark A step's tick or cross is drawn along its path when the step settles while the list is on screen.
+ * Steps that were already settled when the list appeared show their mark at once.
+ */
 const markMotion = motion("step-list", "mark", "mark");
-/** The rail growing to a step that finished on screen. */
+/**
+ * @motion fill:rail The line leading to a step fills in when that step finishes while the list is on screen, never
+ * ahead of it. Lines for steps that were already finished when the list appeared are full at once.
+ */
 const railMotion = motion("step-list", "rail", "fill");
-/** A step added after the list first drew. */
+/**
+ * @motion arrive:arrive A step rises in when the app adds it after the list first drew. The steps the list was drawn
+ * with appear still.
+ */
 const arriveMotion = motion("step-list", "arrive", "arrive");
+/**
+ * @motion live:working A step that is running shows a spinner that turns until the app reports it finished or failed.
+ * Under reduced motion the spinner is still, and the step's status is still written in words.
+ */
 const workingMotion = motion("step-list", "working", "live", { dur: 1000 });
 /** A tick, drawn along its path when `draw` is above zero (and again each time it changes). */
 function Tick({ draw }) {

package/dist/blocks/streaming-text.js

@@ -1,6 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cn } from "../lib/utils.js";
 import { motion } from "../lib/motion.js";
+/**
+ * @motion live:caret While the text is still streaming in, a caret blinks at its end. It goes when streaming stops,
+ * and under reduced motion it is a still bar.
+ */
 const caretMotion = motion("streaming-text", "caret", "live", { dur: 1000 });
 /**
  * Text that is still arriving. Shows a caret while `streaming`, and announces

package/dist/chat/card-registry.js

@@ -6,6 +6,10 @@ import { DegradedPanel } from "../blocks/degraded-panel.js";
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "../ui/collapsible.js";
 import { useStrings } from "../blocks/locale.js";
 import { motion } from "../lib/motion.js";
+/**
+ * @motion reveal:open The text view opens to its full height when the person asks to see the card as text, and the
+ * chevron turns with it; closing reverses both. Under reduced motion it snaps open or shut.
+ */
 const turnMotion = motion("card-registry", "open", "reveal");
 /** CardRegistry's fixed words; override them under `cardRegistry` in LocaleProvider's `strings`. */
 export const cardRegistryStrings = {

package/dist/chat/citation.d.ts

@@ -28,6 +28,9 @@ declare function SourceDetail({ source, }: {
  * An inline [n]. Opens the source in a popover on click or Enter, so evidence is
  * one step away without leaving the thread. A source the message doesn't list
  * renders as a plain bracket rather than a guess.
+ *
+ * @motion tint:tint A source chip's border and text colour change when the pointer is over it, and a ring fades in
+ * when a citation number or chip takes keyboard focus.
  */
 declare function Citation({ source, marker, }: {
     /** The source this marker points to; without it the marker says it's unknown. */

package/dist/chat/citation.js

@@ -48,6 +48,9 @@ function SourceDetail({ source, }) {
  * An inline [n]. Opens the source in a popover on click or Enter, so evidence is
  * one step away without leaving the thread. A source the message doesn't list
  * renders as a plain bracket rather than a guess.
+ *
+ * @motion tint:tint A source chip's border and text colour change when the pointer is over it, and a ring fades in
+ * when a citation number or chip takes keyboard focus.
  */
 function Citation({ source, marker, }) {
     const t = useStrings("citation", citationStrings);

package/dist/chat/composer.js

@@ -8,12 +8,25 @@ import { EntityChip, useEntityKinds } from "./entity-chip.js";
 import { AttachmentChip } from "./attachment-preview.js";
 import { useStrings } from "../blocks/locale.js";
 import { motion, useArrived, useLeaving } from "../lib/motion.js";
-/** A chip added after the first draw pops in; a removed one pops out as a ghost. */
+/**
+ * @motion pop:chip A mention or attachment chip pops in when the person adds one while writing, and a chip they
+ * remove pops out. Chips that were there when the composer first drew, such as a restored draft, appear still.
+ */
 const chipMotion = motion("composer", "chip", "pop");
-/** The mention and command menu: 2.2's fade and 4 px rise. */
+/**
+ * @motion overlay:menu The mention and command menu rises a little and fades in above the field when the person types
+ * the character that opens it, and goes at once when it closes. Under reduced motion it is a short fade.
+ */
 const menuMotion = motion("composer", "menu", "overlay", { variant: "slide" });
-/** Send and Stop acknowledge the press: 2.2's scale of 0.95. */
+/**
+ * @motion press:send Send and Stop shrink a little while they are held down and return when let go. A Send that is
+ * disabled never moves, and under reduced motion neither changes size.
+ */
 const sendMotion = motion("composer", "send", "press", { amp: "0.9" });
+/**
+ * @motion live:sending While the app reports that the message is being sent, a spinner turns in place of Send's
+ * arrow. It stops when the app says sending is over, and under reduced motion the spinner is still.
+ */
 const sendingMotion = motion("composer", "sending", "live", { dur: 1000 });
 /** Composer's fixed words; override them under `composer` in LocaleProvider's `strings`. */
 export const composerStrings = {

package/dist/chat/entity-chip.d.ts

@@ -43,6 +43,9 @@ declare function useEntityKinds(): (kind: string) => EntityKindInfo;
  * so "Account" the table and "Account" the report never read alike. The
  * identifier is the label unless a friendlier one is given; then the
  * identifier is on hover and for screen readers.
+ *
+ * @motion tint:tint A chip that can be pressed changes its border and background when the pointer is over it, and a
+ * ring fades in on keyboard focus. A chip that can't be pressed does not change.
  */
 declare function EntityChip({ entity, onOpen, onRemove, className, style, }: {
     /** The thing to show: its kind, identifier and optional label. */

package/dist/chat/entity-chip.js

@@ -71,6 +71,9 @@ function useEntityKinds() {
  * so "Account" the table and "Account" the report never read alike. The
  * identifier is the label unless a friendlier one is given; then the
  * identifier is on hover and for screen readers.
+ *
+ * @motion tint:tint A chip that can be pressed changes its border and background when the pointer is over it, and a
+ * ring fades in on keyboard focus. A chip that can't be pressed does not change.
  */
 function EntityChip({ entity, onOpen, onRemove, className, style, }) {
     const { Icon, noun } = useEntityKinds()(entity.kind);

package/dist/chat/folded-turns.js

@@ -6,6 +6,10 @@ import { cn } from "../lib/utils.js";
 import { useStrings } from "../blocks/locale.js";
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "../ui/collapsible.js";
 import { motion } from "../lib/motion.js";
+/**
+ * @motion reveal:open The folded turns open to their full height when the person presses the summary, with its
+ * chevron turning, and close the same way. Under reduced motion they snap open or shut.
+ */
 const turnMotion = motion("folded-turns", "open", "reveal");
 /** FoldedTurns' fixed words; override them under `foldedTurns` in LocaleProvider's `strings`. */
 export const foldedTurnsStrings = {

package/dist/chat/message-actions.js

@@ -7,7 +7,10 @@ import { useCopy } from "../lib/use-copy.js";
 import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/tooltip.js";
 import { useStrings } from "../blocks/locale.js";
 import { motion } from "../lib/motion.js";
-/** The tick or cross after the clipboard write settles. */
+/**
+ * @motion pop:tick After the person copies, a tick (or a cross, if the browser refused the clipboard) pops in on the
+ * button once the browser has answered. Nothing shows before the answer, and under reduced motion it fades in.
+ */
 const tickMotion = motion("message-actions", "tick", "pop");
 /** MessageActions' fixed words; override them under `messageActions` in LocaleProvider's `strings`. */
 export const messageActionsStrings = {

package/dist/chat/message.js

@@ -12,8 +12,15 @@ import { Reasoning } from "./reasoning.js";
 import { ThreadEvent } from "./thread-event.js";
 import { useStrings } from "../blocks/locale.js";
 import { motion } from "../lib/motion.js";
-/** A message that arrived after the thread first drew rises in (Thread marks it `data-arrived`); loaded history is still. */
+/**
+ * @motion arrive:arrive A message rises in when it is added to a Thread after the thread first drew, whether it is
+ * the person's or the agent's. Messages loaded with the thread, and a Message outside a Thread, are drawn still.
+ */
 const arriveMotion = motion("message", "arrive", "arrive");
+/**
+ * @motion live:caret While a reply is still streaming, a caret blinks at the end of its text. It goes when the reply
+ * finishes or is interrupted, and under reduced motion it is a still bar.
+ */
 const caretMotion = motion("message", "caret", "live", { dur: 1000 });
 /** Message's fixed words; override them under `message` in LocaleProvider's `strings`. */
 export const messageStrings = {

package/dist/chat/payload.d.ts

@@ -16,6 +16,9 @@ export declare const payloadStrings: {
  *
  * Code is split into tokens (keywords, strings, comments…) rendered as spans of text, never as HTML. They're coloured
  * when `highlight` is set, or anywhere under `data-syntax="highlight"` (set it on `<html>` for the whole app).
+ *
+ * @motion tint:tint The copy button's background and text colour change when the pointer is over it, and a ring fades
+ * in when it takes keyboard focus.
  */
 declare function Payload({ language, text, title, bare, highlight, className, }: {
     /** Shown as the label, e.g. json, sql, python. Never executed or highlighted as HTML. */

package/dist/chat/payload.js

@@ -32,6 +32,9 @@ const languageLabel = (lang, t) => {
  *
  * Code is split into tokens (keywords, strings, comments…) rendered as spans of text, never as HTML. They're coloured
  * when `highlight` is set, or anywhere under `data-syntax="highlight"` (set it on `<html>` for the whole app).
+ *
+ * @motion tint:tint The copy button's background and text colour change when the pointer is over it, and a ring fades
+ * in when it takes keyboard focus.
  */
 function Payload({ language, text, title, bare = false, highlight, className, }) {
     const { state, copy } = useCopy();

package/dist/chat/prompt-suggestions.js

@@ -5,7 +5,10 @@ import { cn } from "../lib/utils.js";
 import { Skeleton } from "../ui/skeleton.js";
 import { useStrings } from "../blocks/locale.js";
 import { motion } from "../lib/motion.js";
-/** A suggestion pressed: 2.2's slight scale of 0.99. */
+/**
+ * @motion press:press A suggestion shrinks slightly while it is held down and returns when it is let go. Under
+ * reduced motion no suggestion changes size.
+ */
 const pressMotion = motion("prompt-suggestions", "press", "press", { amp: "0.98" });
 /** PromptSuggestions' fixed words; override them under `promptSuggestions` in LocaleProvider's `strings`. */
 export const promptSuggestionsStrings = {

package/dist/chat/reasoning.js

@@ -7,7 +7,15 @@ import { ShimmerLabel } from "../blocks/streaming-text.js";
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "../ui/collapsible.js";
 import { useStrings } from "../blocks/locale.js";
 import { motion, useArrived } from "../lib/motion.js";
+/**
+ * @motion arrive:arrive A step of reasoning rises in when the agent adds it while the reasoning is on screen. A step
+ * added while it is folded rises in when it is opened. The steps it was drawn with are still.
+ */
 const arriveMotion = motion("reasoning", "arrive", "arrive");
+/**
+ * @motion reveal:open The steps open to their full height when the person opens the summary, or when the agent starts
+ * thinking, and the chevron turns with it; closing reverses both. Under reduced motion they snap open or shut.
+ */
 const turnMotion = motion("reasoning", "open", "reveal");
 /** Reasoning's fixed words; override them under `reasoning` in LocaleProvider's `strings`. */
 export const reasoningStrings = {

package/dist/chat/thread.js

@@ -6,9 +6,12 @@ import { cn } from "../lib/utils.js";
 import { useStrings } from "../blocks/locale.js";
 import { useVirtualList } from "../lib/use-virtual-list.js";
 import { motion, useMotionAllowed } from "../lib/motion.js";
-/** The smooth scroll to the latest message. */
+/**
+ * @motion move:scroll When the person presses Jump to latest, the thread glides down to the newest message. Under
+ * reduced motion it jumps. Opening the thread and following new messages while the person is at the bottom are never
+ * smooth scrolls.
+ */
 const scrollMotion = motion("thread", "scroll", "move");
-/** Jump to latest appearing while the reader is scrolled up: 2.2's 150 ms and 4 px rise. */
 /** How long the animations running on `el` take in all, in milliseconds (the longest of duration × iteration count, capped at 6 s); undefined when it can't be read. */
 function animationMs(el) {
     if (!el || typeof getComputedStyle === "undefined")
@@ -19,8 +22,15 @@ function animationMs(el) {
     const totals = durations.map((d, i) => d * (counts[i % counts.length] || 1)).filter((n) => Number.isFinite(n) || n === Number.POSITIVE_INFINITY);
     return totals.length ? Math.min(6000, Math.max(...totals)) : undefined;
 }
+/**
+ * @motion arrive:jump The Jump to latest control fades in when the person scrolls up from the bottom and goes when
+ * they return. It is not shown for a thread that has no messages.
+ */
 const jumpMotion = motion("thread", "jump", "arrive", { dur: 150 });
-/** Its ring when a message arrives while the reader is scrolled up. */
+/**
+ * @motion attention:arrival While the person is scrolled up, Jump to latest pulses once each time a new message
+ * arrives, then is still. Nothing pulses at the bottom, where the new message is already in view.
+ */
 const arrivalMotion = motion("thread", "arrival", "attention");
 /** Thread's fixed words; override them under `thread` in LocaleProvider's `strings`. */
 export const threadStrings = {

package/dist/chat/tool-call.js

@@ -10,8 +10,15 @@ import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "../ui/colla
 import { Payload } from "./payload.js";
 import { useStrings } from "../blocks/locale.js";
 import { motion } from "../lib/motion.js";
-/** A call's detail opening, and a group of calls. */
+/**
+ * @motion reveal:open A call's detail opens to its full height when the person opens it, and the chevron turns with
+ * it; closing reverses both. Under reduced motion it snaps open or shut.
+ */
 const openMotion = motion("tool-call", "open", "reveal");
+/**
+ * @motion reveal:group-open A group of calls opens to its full height when the person opens it, and its chevron turns
+ * with it; closing reverses both. Under reduced motion it snaps open or shut.
+ */
 const groupMotion = motion("tool-call", "group-open", "reveal");
 /** ToolCall's fixed words; override them under `toolCall` in LocaleProvider's `strings`. */
 export const toolCallStrings = {

package/dist/ui/accordion.d.ts

@@ -16,8 +16,8 @@ declare function AccordionTrigger(allProps: React.ComponentProps<typeof Accordio
  * The panel. It opens and closes to the height Radix measured, so a change is seen settling rather than snapping;
  * data-motion="none" and the OS's reduced-motion setting make it snap.
  *
- * @motion reveal:open The panel grows to its measured height when opened and shrinks back when closed, in the base
- * duration. Content the app puts in it is not animated.
+ * @motion reveal:open The panel grows to its full height when the person opens it and shrinks back when they close it.
+ * What the app puts inside it doesn't move. Under reduced motion the panel snaps open or shut.
  */
 declare function AccordionContent(allProps: React.ComponentProps<typeof AccordionPrimitive.Content> & RenderProp): React.JSX.Element;
 export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };

package/dist/ui/accordion.js

@@ -32,8 +32,8 @@ function AccordionTrigger(allProps) {
  * The panel. It opens and closes to the height Radix measured, so a change is seen settling rather than snapping;
  * data-motion="none" and the OS's reduced-motion setting make it snap.
  *
- * @motion reveal:open The panel grows to its measured height when opened and shrinks back when closed, in the base
- * duration. Content the app puts in it is not animated.
+ * @motion reveal:open The panel grows to its full height when the person opens it and shrinks back when they close it.
+ * What the app puts inside it doesn't move. Under reduced motion the panel snaps open or shut.
  */
 function AccordionContent(allProps) {
     const { className, children, render, nativeButton: _nativeButton, style, ...props } = allProps;

package/dist/ui/alert.d.ts

@@ -7,9 +7,8 @@ import * as React from "react";
  * For a short notice that goes away by itself use a toast; an Alert doesn't dismiss itself.
  *
  * @motion arrive:enter An Alert that appears after the page has drawn rises in over a quarter of a second. One that is
- * there when the page first draws, or when it is rendered on the server, is simply there. "After the page has drawn" is
- * counted from when the page loaded, not from the route: after a client-side navigation, an Alert on the new route
- * rises in.
+ * there when the page first draws, or that the server rendered, is simply there; after a client-side navigation, an
+ * Alert on the new route rises in.
  */
 declare function Alert({ className, variant, role, style, ...props }: React.ComponentProps<"div"> & {
     /** The kind of message. `destructive` is for a failure or something that can't be undone; `warning` for care before acting; `attention` for something waiting on the person; `success` for a confirmed result. Defaults to a plain card. */

package/dist/ui/alert.js

@@ -36,9 +36,8 @@ const alertVariants = cva("relative grid w-full grid-cols-[0_1fr] items-start ga
  * For a short notice that goes away by itself use a toast; an Alert doesn't dismiss itself.
  *
  * @motion arrive:enter An Alert that appears after the page has drawn rises in over a quarter of a second. One that is
- * there when the page first draws, or when it is rendered on the server, is simply there. "After the page has drawn" is
- * counted from when the page loaded, not from the route: after a client-side navigation, an Alert on the new route
- * rises in.
+ * there when the page first draws, or that the server rendered, is simply there; after a client-side navigation, an
+ * Alert on the new route rises in.
  */
 function Alert({ className, variant, role, style, ...props }) {
     // Whether this Alert mounted after the page's first draw. The server and the hydrating render answer no, so what

package/dist/ui/button.js

@@ -6,6 +6,10 @@ import { Slot } from "radix-ui";
 import { withRender } from "../lib/render-prop.js";
 import { cn } from "../lib/utils.js";
 import { motion } from "../lib/motion.js";
+/**
+ * @motion press:press The button shrinks a little while it is held down and returns when it is let go. A button that
+ * is locked or disabled never moves, and under reduced motion no button changes size.
+ */
 const pressMotion = motion("button", "press", "press");
 // The accent fills the one primary act, the radius is the theme's
 // --cd-radius-button, and buttons press down slightly on :active.

package/dist/ui/collapsible.js

@@ -4,6 +4,11 @@ import { Collapsible as CollapsiblePrimitive } from "radix-ui";
 import { cn } from "../lib/utils.js";
 import { withRender } from "../lib/render-prop.js";
 import { motion } from "../lib/motion.js";
+/**
+ * @motion reveal:open The content grows to its full height when the person opens it and shrinks when they close it. A
+ * collapsible that is already open when it first appears is shown open at once, and under reduced motion it snaps
+ * open or shut.
+ */
 const openMotion = motion("collapsible", "open", "reveal");
 function Collapsible({ ...props }) {
     return _jsx(CollapsiblePrimitive.Root, { "data-slot": "collapsible", ...props });

package/dist/ui/popover.js

@@ -5,6 +5,10 @@ import { cn } from "../lib/utils.js";
 import { Popover as PopoverPrimitive } from "radix-ui";
 import { withRender } from "../lib/render-prop.js";
 import { motion } from "../lib/motion.js";
+/**
+ * @motion overlay:open The popover fades in and scales up a little from its trigger when the person opens it, and
+ * fades out when it closes. Under reduced motion it is a short fade.
+ */
 const openMotion = motion("popover", "open", "overlay");
 function Popover({ ...props }) {
     return _jsx(PopoverPrimitive.Root, { "data-slot": "popover", ...props });

package/dist/ui/skeleton.js

@@ -1,7 +1,10 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { cn } from "../lib/utils.js";
 import { motion } from "../lib/motion.js";
-/** Pulses while the content it stands in for is being fetched; still at level 0 and under calm. */
+/**
+ * @motion live:loading The placeholder pulses softly for as long as it is on screen, which should be only while the
+ * content it stands in for is being fetched. Under reduced motion it is still.
+ */
 const loadingMotion = motion("skeleton", "loading", "live", { dur: 2000 });
 function Skeleton({ className, style, ...props }) {
     return (_jsx("div", { "data-slot": "skeleton", style: { ...loadingMotion, ...style }, className: cn("cd-live-pulse rounded-md bg-accent", className), ...props }));

package/dist/ui/slider.d.ts

@@ -9,7 +9,7 @@ import { type RenderProp } from "../lib/render-prop.js";
  *
  * @motion clock:drag The thumb and the filled range follow the pointer exactly, with no easing: what moves is the
  * person's hand, not an animation.
- * @motion tint:focus The thumb's ring grows in on hover and keyboard focus.
+ * @motion tint:tint The thumb's ring fades in when the pointer is over it and when it takes keyboard focus.
  */
 declare function Slider(allProps: SliderProps): React.JSX.Element;
 type SliderProps = React.ComponentProps<typeof SliderPrimitive.Root> & RenderProp & {

package/dist/ui/slider.js

@@ -14,7 +14,7 @@ const lockedKeys = new Set(["ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown", "
  *
  * @motion clock:drag The thumb and the filled range follow the pointer exactly, with no easing: what moves is the
  * person's hand, not an animation.
- * @motion tint:focus The thumb's ring grows in on hover and keyboard focus.
+ * @motion tint:tint The thumb's ring fades in when the pointer is over it and when it takes keyboard focus.
  */
 function Slider(allProps) {
     const { className, locked, thumbLabels, value, defaultValue, min = 0, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, onPointerDownCapture, onKeyDownCapture, render, nativeButton: _nativeButton, children, ...props } = allProps;

package/dist/ui/tooltip.js

@@ -5,6 +5,10 @@ import { cn } from "../lib/utils.js";
 import { Tooltip as TooltipPrimitive } from "radix-ui";
 import { withRender } from "../lib/render-prop.js";
 import { motion } from "../lib/motion.js";
+/**
+ * @motion overlay:open The tooltip fades in and scales up a little from the control it describes once the delay has
+ * passed, and fades out when the pointer or focus leaves. Under reduced motion it is a short fade.
+ */
 const openMotion = motion("tooltip", "open", "overlay");
 // Whether a TooltipProvider is above, so a lone Tooltip can supply its own.
 const HasProvider = React.createContext(false);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@candor-ui/react",
-  "version": "2.4.0",
+  "version": "2.5.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",