@candor-ui/react 2.2.0 → 2.4.0

package/dist/ui/accordion.d.ts

@@ -0,0 +1,23 @@
+import * as React from "react";
+import { Accordion as AccordionPrimitive } from "radix-ui";
+import { type RenderProp } from "../lib/render-prop.js";
+/**
+ * A stack of headings that each open to reveal more. Pass `type="single"` (one open at a time; add `collapsible` so the
+ * open one can be closed) or `type="multiple"`. Everything is closed until the person opens it, unless the app names
+ * what starts open with `defaultValue` or `value`. Arrow keys move between headings, Home and End go to the first
+ * and last, Space or Enter opens and closes.
+ */
+declare function Accordion(allProps: React.ComponentProps<typeof AccordionPrimitive.Root> & RenderProp): React.JSX.Element;
+/** One heading and its panel. Give it a `value` that is unique in the accordion. */
+declare function AccordionItem(allProps: React.ComponentProps<typeof AccordionPrimitive.Item> & RenderProp): React.JSX.Element;
+/** The heading that opens and closes its panel, with a chevron that turns over when open. Its children are the heading's text. */
+declare function AccordionTrigger(allProps: React.ComponentProps<typeof AccordionPrimitive.Trigger> & RenderProp): React.JSX.Element;
+/**
+ * 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.
+ */
+declare function AccordionContent(allProps: React.ComponentProps<typeof AccordionPrimitive.Content> & RenderProp): React.JSX.Element;
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };

package/dist/ui/accordion.js

@@ -0,0 +1,45 @@
+"use client";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { ChevronDown } from "lucide-react";
+import { Accordion as AccordionPrimitive } from "radix-ui";
+import { withRender } from "../lib/render-prop.js";
+import { cn } from "../lib/utils.js";
+import { motion } from "../lib/motion.js";
+const openMotion = motion("accordion", "open", "reveal");
+/**
+ * A stack of headings that each open to reveal more. Pass `type="single"` (one open at a time; add `collapsible` so the
+ * open one can be closed) or `type="multiple"`. Everything is closed until the person opens it, unless the app names
+ * what starts open with `defaultValue` or `value`. Arrow keys move between headings, Home and End go to the first
+ * and last, Space or Enter opens and closes.
+ */
+function Accordion(allProps) {
+    const props = withRender(allProps);
+    return _jsx(AccordionPrimitive.Root, { "data-slot": "accordion", ...props });
+}
+/** One heading and its panel. Give it a `value` that is unique in the accordion. */
+function AccordionItem(allProps) {
+    const { className, ...props } = withRender(allProps);
+    return _jsx(AccordionPrimitive.Item, { "data-slot": "accordion-item", className: cn("border-b border-border last:border-b-0", className), ...props });
+}
+/** The heading that opens and closes its panel, with a chevron that turns over when open. Its children are the heading's text. */
+function AccordionTrigger(allProps) {
+    const { className, children, render, nativeButton: _nativeButton, ...props } = allProps;
+    const heading = (_jsxs(_Fragment, { children: [children, _jsx(ChevronDown, { "aria-hidden": true, style: openMotion, className: "pointer-events-none mt-0.5 size-4 shrink-0 text-muted-foreground cd-reveal-turn" })] }));
+    return (_jsx(AccordionPrimitive.Header, { className: "flex", children: _jsx(AccordionPrimitive.Trigger, { "data-slot": "accordion-trigger", className: cn("flex flex-1 items-start justify-between gap-4 rounded-md py-3 text-start text-sm font-medium outline-none cd-tint hover:underline focus-visible:ring-[3px] focus-visible:ring-ring/80 disabled:pointer-events-none disabled:opacity-45 data-[locked]:cursor-not-allowed data-[locked]:opacity-45 [&[data-state=open]>svg]:rotate-180", className), ...props, ...(render ? { asChild: true } : null), children: render ? React.cloneElement(render, undefined, heading) : heading }) }));
+}
+/**
+ * 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.
+ */
+function AccordionContent(allProps) {
+    const { className, children, render, nativeButton: _nativeButton, style, ...props } = allProps;
+    const inner = _jsx("div", { className: cn("pt-0 pb-4", className), children: children });
+    return (_jsx(AccordionPrimitive.Content, { "data-slot": "accordion-content", 
+        // cd-reveal reads Radix's collapsible height, then the accordion's own.
+        style: { ...openMotion, ...style }, className: "overflow-hidden text-sm data-[state=open]:cd-reveal data-[state=closed]:cd-reveal-out", ...props, ...(render ? { asChild: true } : null), children: render ? React.cloneElement(render, undefined, inner) : inner }));
+}
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };

package/dist/ui/alert.d.ts

@@ -0,0 +1,22 @@
+import * as React from "react";
+/**
+ * A message about the page or the work that stays where it is until it no longer applies: a warning before a
+ * change, a note that something failed, a fact the person should know. Put an icon first, then `AlertTitle` and
+ * `AlertDescription`. Its text is plain text from the app, never HTML. An `Alert` is read out when it appears if
+ * its variant is `destructive` (role "alert"); the other variants are polite (role "status"). Pass `role` to change that.
+ * 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.
+ */
+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. */
+    variant?: "default" | "success" | "warning" | "attention" | "destructive" | null | undefined;
+}): React.JSX.Element;
+/** The alert's headline: what happened or what to know, in a few words. */
+declare function AlertTitle({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+/** The detail under the title: what it affects and what the person can do. Plain text or any elements; links and buttons keep their own styles. */
+declare function AlertDescription({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+export { Alert, AlertTitle, AlertDescription };

package/dist/ui/alert.js

@@ -0,0 +1,59 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { cva } from "class-variance-authority";
+import { cn } from "../lib/utils.js";
+import { motion } from "../lib/motion.js";
+const enterMotion = motion("alert", "enter", "arrive");
+// Set one frame after this file loads in the browser, which is when the page's first draw is done; an Alert that mounts
+// after that has arrived. It is per page load, not per route: after a client-side route change, an Alert on the new route
+// rises in, because it arrived after the page drew. An Alert in the first render, or on the server, is simply there.
+let pageDrawn = false;
+if (typeof window !== "undefined") {
+    const frame = typeof window.requestAnimationFrame === "function" ? window.requestAnimationFrame.bind(window) : (cb) => window.setTimeout(cb, 0);
+    frame(() => {
+        pageDrawn = true;
+    });
+}
+const subscribeNever = () => () => { };
+const alertVariants = cva("relative grid w-full grid-cols-[0_1fr] items-start gap-y-0.5 rounded-lg border px-4 py-3 text-sm has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] has-[>svg]:gap-x-3 [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current", {
+    variants: {
+        variant: {
+            default: "border-border bg-card text-card-foreground",
+            success: "border-success/40 bg-success-weak/60 text-foreground [&>svg]:text-success-text",
+            warning: "border-warning/40 bg-warning-weak/60 text-foreground [&>svg]:text-warning-text",
+            attention: "border-attention/40 bg-attention-weak/60 text-foreground [&>svg]:text-attention-text",
+            destructive: "border-destructive/40 bg-destructive-weak/60 text-foreground [&>svg]:text-destructive-text",
+        },
+    },
+    defaultVariants: { variant: "default" },
+});
+/**
+ * A message about the page or the work that stays where it is until it no longer applies: a warning before a
+ * change, a note that something failed, a fact the person should know. Put an icon first, then `AlertTitle` and
+ * `AlertDescription`. Its text is plain text from the app, never HTML. An `Alert` is read out when it appears if
+ * its variant is `destructive` (role "alert"); the other variants are polite (role "status"). Pass `role` to change that.
+ * 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.
+ */
+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
+    // the server sent is what hydrates; an Alert the browser creates later answers from the page. Decided once, so a
+    // re-render doesn't replay it.
+    const drawn = React.useSyncExternalStore(subscribeNever, () => pageDrawn, () => false);
+    const [arrived] = React.useState(drawn);
+    return (_jsx("div", { "data-slot": "alert", "data-variant": variant ?? "default", role: role ?? (variant === "destructive" ? "alert" : "status"), style: { ...enterMotion, ...style }, className: cn(alertVariants({ variant }), arrived && "cd-arrive", className), ...props }));
+}
+/** The alert's headline: what happened or what to know, in a few words. */
+function AlertTitle({ className, ...props }) {
+    return _jsx("div", { "data-slot": "alert-title", className: cn("col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight", className), ...props });
+}
+/** The detail under the title: what it affects and what the person can do. Plain text or any elements; links and buttons keep their own styles. */
+function AlertDescription({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "alert-description", className: cn("col-start-2 grid justify-items-start gap-1 text-sm text-muted-foreground [&_p]:leading-relaxed", className), ...props }));
+}
+export { Alert, AlertTitle, AlertDescription };

package/dist/ui/button.d.ts

@@ -3,7 +3,7 @@ import { type VariantProps } from "class-variance-authority";
 import { type RenderProp } from "../lib/render-prop.js";
 declare const buttonVariants: (props?: ({
     variant?: "link" | "outline" | "secondary" | "destructive" | "default" | "ghost" | null | undefined;
-    size?: "default" | "xs" | "sm" | "lg" | "icon" | "icon-xs" | "icon-sm" | "icon-lg" | null | undefined;
+    size?: "default" | "icon" | "xs" | "sm" | "lg" | "icon-xs" | "icon-sm" | "icon-lg" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 declare function Button(allProps: React.ComponentProps<"button"> & VariantProps<typeof buttonVariants> & {
     /** Render the child element (a link, say) with the button's styles instead of a <button>. */

package/dist/ui/button.js

@@ -5,9 +5,11 @@ import { cva } from "class-variance-authority";
 import { Slot } from "radix-ui";
 import { withRender } from "../lib/render-prop.js";
 import { cn } from "../lib/utils.js";
+import { motion } from "../lib/motion.js";
+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.
-const buttonVariants = cva("inline-flex shrink-0 items-center justify-center gap-2 rounded-button text-sm font-medium whitespace-nowrap outline-none select-none transition-[background-color,color,border-color,box-shadow,transform,opacity] duration-150 ease-standard active:scale-[0.98] focus-visible:ring-[3px] focus-visible:ring-ring/80 disabled:pointer-events-none disabled:opacity-45 data-[locked]:cursor-not-allowed data-[locked]:opacity-45 data-[locked]:active:scale-100 aria-invalid:ring-destructive/25 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", {
+const buttonVariants = cva("inline-flex shrink-0 items-center justify-center gap-2 rounded-button text-sm font-medium whitespace-nowrap outline-none select-none cd-press focus-visible:ring-[3px] focus-visible:ring-ring/80 disabled:pointer-events-none disabled:opacity-45 data-[locked]:cursor-not-allowed data-[locked]:opacity-45 data-[locked]:active:scale-100 aria-invalid:ring-destructive/25 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", {
     variants: {
         variant: {
             default: "bg-primary text-primary-foreground hover:bg-primary-hover",
@@ -34,8 +36,8 @@ const buttonVariants = cva("inline-flex shrink-0 items-center justify-center gap
     },
 });
 function Button(allProps) {
-    const { className, variant = "default", size = "default", asChild = false, ...props } = withRender(allProps);
+    const { className, style, variant = "default", size = "default", asChild = false, ...props } = withRender(allProps);
     const Comp = asChild ? Slot.Root : "button";
-    return (_jsx(Comp, { "data-slot": "button", "data-variant": variant, "data-size": size, className: cn(buttonVariants({ variant, size, className })), ...props }));
+    return (_jsx(Comp, { "data-slot": "button", "data-variant": variant, "data-size": size, style: { ...pressMotion, ...style }, className: cn(buttonVariants({ variant, size, className })), ...props }));
 }
 export { Button, buttonVariants };

package/dist/ui/checkbox.d.ts

@@ -0,0 +1,14 @@
+import * as React from "react";
+import { Checkbox as CheckboxPrimitive } from "radix-ui";
+import { type RenderProp } from "../lib/render-prop.js";
+/**
+ * A box the person ticks. Nothing is checked until the person checks it or the app says so with `checked` or
+ * `defaultChecked`; a choice that decides something is left empty, never pre-ticked. `checked="indeterminate"` shows a
+ * dash for a parent whose children are only partly ticked. Pair it with a `Label` (`htmlFor` and `id`), or wrap both
+ * in a <label>. To lock it, wrap it in `Locked` with a reason: it stays focusable, says why, and doesn't change.
+ *
+ * @motion mark:tick The tick draws along its path when the person checks the box. A box that is already checked when it
+ * appears, or that the app changes, shows its tick at once: nothing is drawn for a change the person didn't make.
+ */
+declare function Checkbox(allProps: React.ComponentProps<typeof CheckboxPrimitive.Root> & RenderProp): React.JSX.Element;
+export { Checkbox };

package/dist/ui/checkbox.js

@@ -0,0 +1,32 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Checkbox as CheckboxPrimitive } from "radix-ui";
+import {} from "../lib/render-prop.js";
+import { cn } from "../lib/utils.js";
+import { motion } from "../lib/motion.js";
+const tickMotion = motion("checkbox", "tick", "mark");
+/**
+ * A box the person ticks. Nothing is checked until the person checks it or the app says so with `checked` or
+ * `defaultChecked`; a choice that decides something is left empty, never pre-ticked. `checked="indeterminate"` shows a
+ * dash for a parent whose children are only partly ticked. Pair it with a `Label` (`htmlFor` and `id`), or wrap both
+ * in a <label>. To lock it, wrap it in `Locked` with a reason: it stays focusable, says why, and doesn't change.
+ *
+ * @motion mark:tick The tick draws along its path when the person checks the box. A box that is already checked when it
+ * appears, or that the app changes, shows its tick at once: nothing is drawn for a change the person didn't make.
+ */
+function Checkbox(allProps) {
+    const { className, onCheckedChange, render, nativeButton: _nativeButton, children, ...props } = allProps;
+    // The tick is drawn only for the state the person just set. An app-driven `checked` that differs retires it, so a later
+    // app change (even to the same value) shows the tick at once.
+    const [personSet, setPersonSet] = React.useState(undefined);
+    if (personSet !== undefined && props.checked !== undefined && props.checked !== personSet)
+        setPersonSet(undefined);
+    const byPerson = personSet !== undefined && (props.checked === undefined || props.checked === personSet);
+    const mark = children ?? (_jsxs(CheckboxPrimitive.Indicator, { "data-slot": "checkbox-indicator", className: "group/mark grid place-content-center text-current", children: [_jsx("svg", { "aria-hidden": true, viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", className: "size-3.5 group-data-[state=indeterminate]/mark:hidden", children: _jsx("path", { d: "M3.5 8.5 6.75 11.5 12.5 4.75", pathLength: 1, strokeDasharray: 1, style: tickMotion, className: cn(byPerson && "cd-mark") }) }), _jsx("svg", { "aria-hidden": true, viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", className: "hidden size-3.5 group-data-[state=indeterminate]/mark:block", children: _jsx("path", { d: "M4 8h8" }) })] }));
+    return (_jsx(CheckboxPrimitive.Root, { "data-slot": "checkbox", onCheckedChange: (checked) => {
+            setPersonSet(checked);
+            onCheckedChange?.(checked);
+        }, className: cn("peer relative after:absolute after:-inset-1 grid size-4 shrink-0 place-content-center rounded-xs border border-input bg-card text-primary-foreground shadow-xs cd-tint outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/80 disabled:cursor-not-allowed disabled:opacity-45 data-[locked]:cursor-not-allowed data-[locked]:opacity-45 data-[state=checked]:border-primary data-[state=checked]:bg-primary data-[state=indeterminate]:border-primary data-[state=indeterminate]:bg-primary aria-invalid:border-destructive aria-invalid:ring-destructive/25 dark:bg-input/30", className), ...props, ...(render ? { asChild: true } : null), children: render ? React.cloneElement(render, undefined, mark) : mark }));
+}
+export { Checkbox };

package/dist/ui/collapsible.d.ts

@@ -4,7 +4,8 @@ declare function Collapsible({ ...props }: React.ComponentProps<typeof Collapsib
 declare function CollapsibleTrigger(allProps: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleTrigger> & RenderProp): 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.
+ * state is seen settling rather than snapping (the reveal family); data-motion="none" and the calm level make it snap.
+ * An item can pass its own moment's chain as `style` (`motion("tool-call", "open", "reveal")`).
  */
-declare function CollapsibleContent({ className, ...props }: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleContent>): import("react").JSX.Element;
+declare function CollapsibleContent({ className, style, ...props }: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleContent>): import("react").JSX.Element;
 export { Collapsible, CollapsibleTrigger, CollapsibleContent };

package/dist/ui/collapsible.js

@@ -3,6 +3,8 @@ 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";
+import { motion } from "../lib/motion.js";
+const openMotion = motion("collapsible", "open", "reveal");
 function Collapsible({ ...props }) {
     return _jsx(CollapsiblePrimitive.Root, { "data-slot": "collapsible", ...props });
 }
@@ -12,9 +14,10 @@ function CollapsibleTrigger(allProps) {
 }
 /**
  * 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.
+ * state is seen settling rather than snapping (the reveal family); data-motion="none" and the calm level make it snap.
+ * An item can pass its own moment's chain as `style` (`motion("tool-call", "open", "reveal")`).
  */
-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 }));
+function CollapsibleContent({ className, style, ...props }) {
+    return (_jsx(CollapsiblePrimitive.CollapsibleContent, { "data-slot": "collapsible-content", style: { ...openMotion, ...style }, className: cn("data-[state=open]:cd-reveal data-[state=closed]:cd-reveal-out", className), ...props }));
 }
 export { Collapsible, CollapsibleTrigger, CollapsibleContent };

package/dist/ui/label.d.ts

@@ -0,0 +1,10 @@
+import * as React from "react";
+import { Label as LabelPrimitive } from "radix-ui";
+import { type RenderProp } from "../lib/render-prop.js";
+/**
+ * The name of a control. Point it at the control with `htmlFor` and the control's `id`, or wrap both in it. Clicking
+ * it focuses or toggles the control. It dims with the control beside it (a `peer`) when that control is disabled or
+ * locked, so keep it directly after the control in the markup, or set `data-disabled` on a wrapping `group`.
+ */
+declare function Label(allProps: React.ComponentProps<typeof LabelPrimitive.Root> & RenderProp): React.JSX.Element;
+export { Label };

package/dist/ui/label.js

@@ -0,0 +1,16 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { Label as LabelPrimitive } from "radix-ui";
+import { withRender } from "../lib/render-prop.js";
+import { cn } from "../lib/utils.js";
+/**
+ * The name of a control. Point it at the control with `htmlFor` and the control's `id`, or wrap both in it. Clicking
+ * it focuses or toggles the control. It dims with the control beside it (a `peer`) when that control is disabled or
+ * locked, so keep it directly after the control in the markup, or set `data-disabled` on a wrapping `group`.
+ */
+function Label(allProps) {
+    const { className, ...props } = withRender(allProps);
+    return (_jsx(LabelPrimitive.Root, { "data-slot": "label", className: cn("flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-45 peer-disabled:cursor-not-allowed peer-disabled:opacity-45 peer-data-[locked]:cursor-not-allowed peer-data-[locked]:opacity-45", className), ...props }));
+}
+export { Label };

package/dist/ui/popover.d.ts

@@ -3,7 +3,7 @@ import { Popover as PopoverPrimitive } from "radix-ui";
 import { type RenderProp } from "../lib/render-prop.js";
 declare function Popover({ ...props }: React.ComponentProps<typeof PopoverPrimitive.Root>): React.JSX.Element;
 declare function PopoverTrigger(allProps: React.ComponentProps<typeof PopoverPrimitive.Trigger> & RenderProp): React.JSX.Element;
-declare function PopoverContent({ className, align, sideOffset, ...props }: React.ComponentProps<typeof PopoverPrimitive.Content>): React.JSX.Element;
+declare function PopoverContent({ className, style, align, sideOffset, ...props }: React.ComponentProps<typeof PopoverPrimitive.Content>): React.JSX.Element;
 declare function PopoverAnchor({ ...props }: React.ComponentProps<typeof PopoverPrimitive.Anchor>): React.JSX.Element;
 declare function PopoverHeader({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
 declare function PopoverTitle({ className, ...props }: React.ComponentProps<"h2">): React.JSX.Element;

package/dist/ui/popover.js

@@ -4,6 +4,8 @@ import * as React from "react";
 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";
+const openMotion = motion("popover", "open", "overlay");
 function Popover({ ...props }) {
     return _jsx(PopoverPrimitive.Root, { "data-slot": "popover", ...props });
 }
@@ -11,8 +13,8 @@ function PopoverTrigger(allProps) {
     const props = withRender(allProps);
     return _jsx(PopoverPrimitive.Trigger, { "data-slot": "popover-trigger", ...props });
 }
-function PopoverContent({ className, align = "center", sideOffset = 4, ...props }) {
-    return (_jsx(PopoverPrimitive.Portal, { children: _jsx(PopoverPrimitive.Content, { "data-slot": "popover-content", align: align, sideOffset: sideOffset, className: cn("z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-hidden data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95", className), ...props }) }));
+function PopoverContent({ className, style, align = "center", sideOffset = 4, ...props }) {
+    return (_jsx(PopoverPrimitive.Portal, { children: _jsx(PopoverPrimitive.Content, { "data-slot": "popover-content", align: align, sideOffset: sideOffset, style: { ...openMotion, ...style }, className: cn("z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-hidden data-[state=open]:cd-overlay data-[state=closed]:cd-overlay-out", className), ...props }) }));
 }
 function PopoverAnchor({ ...props }) {
     return _jsx(PopoverPrimitive.Anchor, { "data-slot": "popover-anchor", ...props });

package/dist/ui/progress.d.ts

@@ -0,0 +1,29 @@
+import * as React from "react";
+import { Progress as ProgressPrimitive } from "radix-ui";
+import { type RenderProp } from "../lib/render-prop.js";
+/**
+ * A bar for work whose progress is measured: an upload, an import, an index. It moves only between values the service
+ * reported, and it starts at the first value it is given rather than filling from empty. With no `value` it is
+ * indeterminate: a pulsing bar and the `label` as text, and never a made-up percentage.
+ *
+ * @motion fill:value The filled part moves to each new measured value in the slow duration, and not on first draw.
+ * @motion live:indeterminate While the total is unknown, the bar pulses (the live family's pulse) and the label shimmers
+ * with it; it runs only while that state lasts, and stops the moment a value arrives.
+ */
+declare function Progress(allProps: ProgressProps): React.JSX.Element;
+type ProgressProps = Omit<React.ComponentProps<typeof ProgressPrimitive.Root>, "value" | "max"> & RenderProp & {
+    /**
+     * How far along the work is, from `0` to `max`, as the service reported it. Leave it out (or pass `null`) when the
+     * total isn't known: the bar then shows no fraction, only that work is going on, with the `label`. A bar is a claim
+     * about a fraction, so the app never estimates one.
+     */
+    value?: number | null | undefined;
+    /** The value that means finished. Defaults to 100. */
+    max?: number | undefined;
+    /**
+     * What is progressing, in the app's words and language ("Indexing 12 files", "Uploading report.pdf"). It names the
+     * bar for assistive technology, and when `value` is unknown it is printed under the bar as the word that says so.
+     */
+    label?: string | undefined;
+};
+export { Progress };

package/dist/ui/progress.js

@@ -0,0 +1,27 @@
+"use client";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Progress as ProgressPrimitive } from "radix-ui";
+import {} from "../lib/render-prop.js";
+import { cn } from "../lib/utils.js";
+import { motion } from "../lib/motion.js";
+const valueMotion = motion("progress", "value", "fill");
+const indeterminateMotion = motion("progress", "indeterminate", "live");
+/**
+ * A bar for work whose progress is measured: an upload, an import, an index. It moves only between values the service
+ * reported, and it starts at the first value it is given rather than filling from empty. With no `value` it is
+ * indeterminate: a pulsing bar and the `label` as text, and never a made-up percentage.
+ *
+ * @motion fill:value The filled part moves to each new measured value in the slow duration, and not on first draw.
+ * @motion live:indeterminate While the total is unknown, the bar pulses (the live family's pulse) and the label shimmers
+ * with it; it runs only while that state lasts, and stops the moment a value arrives.
+ */
+function Progress(allProps) {
+    const { className, value, max = 100, label, render, nativeButton: _nativeButton, children, ...props } = allProps;
+    const known = typeof value === "number" && Number.isFinite(value) && max > 0;
+    const percent = known ? Math.min(100, Math.max(0, (value / max) * 100)) : 0;
+    const indicator = children ??
+        (known ? (_jsx(ProgressPrimitive.Indicator, { "data-slot": "progress-indicator", className: "h-full w-[calc(100%+var(--cd-progress))] rounded-full bg-primary cd-fill", style: { ...valueMotion, "--cd-progress": `-${100 - percent}%` } }, "value")) : (_jsx(ProgressPrimitive.Indicator, { "data-slot": "progress-indicator", style: indeterminateMotion, className: "size-full cd-live-pulse bg-[linear-gradient(90deg,var(--muted)_0%,var(--primary)_50%,var(--muted)_100%)] opacity-60" }, "unknown")));
+    return (_jsxs(_Fragment, { children: [_jsx(ProgressPrimitive.Root, { "data-slot": "progress", value: known ? value : null, max: max, "aria-label": label, className: cn("relative h-2 w-full overflow-hidden rounded-full bg-muted", className), ...props, ...(render ? { asChild: true } : null), children: render ? React.cloneElement(render, undefined, indicator) : indicator }), !known && label ? (_jsx("span", { "data-slot": "progress-label", "aria-hidden": true, style: indeterminateMotion, className: "shimmer-text mt-1.5 block text-xs", children: label })) : null] }));
+}
+export { Progress };

package/dist/ui/skeleton.d.ts

@@ -1,2 +1,2 @@
-declare function Skeleton({ className, ...props }: React.ComponentProps<"div">): import("react").JSX.Element;
+declare function Skeleton({ className, style, ...props }: React.ComponentProps<"div">): import("react").JSX.Element;
 export { Skeleton };

package/dist/ui/skeleton.js

@@ -1,6 +1,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { cn } from "../lib/utils.js";
-function Skeleton({ className, ...props }) {
-    return (_jsx("div", { "data-slot": "skeleton", className: cn("animate-pulse rounded-md bg-accent", className), ...props }));
+import { motion } from "../lib/motion.js";
+/** Pulses while the content it stands in for is being fetched; still at level 0 and under calm. */
+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 }));
 }
 export { Skeleton };

package/dist/ui/slider.d.ts

@@ -0,0 +1,28 @@
+import * as React from "react";
+import { Slider as SliderPrimitive } from "radix-ui";
+import { type RenderProp } from "../lib/render-prop.js";
+/**
+ * A control for a value in a range, with one thumb or, when the value has two numbers, a range. Pass `aria-label` (or
+ * `aria-labelledby`) to name a single thumb, or `thumbLabels` for each thumb of a range. Arrow keys step, Page keys and
+ * Home/End jump. The thumb starts at `min` unless the app gives `defaultValue`; leave it there for a choice the person
+ * hasn't made, and show the value beside the slider, since a position alone isn't a number.
+ *
+ * @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.
+ */
+declare function Slider(allProps: SliderProps): React.JSX.Element;
+type SliderProps = React.ComponentProps<typeof SliderPrimitive.Root> & RenderProp & {
+    /**
+     * Why the slider can't be changed. With a reason it stays focusable but the pointer and arrow keys do nothing, it is
+     * marked `aria-disabled` and described by the reason, and the reason is printed under it. Without one the slider is
+     * normal. Use this rather than `disabled`, which takes the slider out of the tab order and says nothing.
+     */
+    locked?: string | undefined;
+    /**
+     * A name for each thumb, in order (a range has two: "Lowest price", "Highest price"). A thumb without one takes
+     * `aria-label`, then Radix's English "Minimum" and "Maximum" on a range, so give them in the app's language.
+     */
+    thumbLabels?: string[] | undefined;
+};
+export { Slider };

package/dist/ui/slider.js

@@ -0,0 +1,41 @@
+"use client";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { LockKeyhole } from "lucide-react";
+import { Slider as SliderPrimitive } from "radix-ui";
+import {} from "../lib/render-prop.js";
+import { cn } from "../lib/utils.js";
+const lockedKeys = new Set(["ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown", "Home", "End", "PageUp", "PageDown"]);
+/**
+ * A control for a value in a range, with one thumb or, when the value has two numbers, a range. Pass `aria-label` (or
+ * `aria-labelledby`) to name a single thumb, or `thumbLabels` for each thumb of a range. Arrow keys step, Page keys and
+ * Home/End jump. The thumb starts at `min` unless the app gives `defaultValue`; leave it there for a choice the person
+ * hasn't made, and show the value beside the slider, since a position alone isn't a number.
+ *
+ * @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.
+ */
+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;
+    const reasonId = React.useId();
+    const count = Array.isArray(value) ? value.length : Array.isArray(defaultValue) ? defaultValue.length : 1;
+    const isLocked = Boolean(locked);
+    const parts = children ?? (_jsxs(_Fragment, { children: [_jsx(SliderPrimitive.Track, { "data-slot": "slider-track", className: "relative grow overflow-hidden rounded-full bg-muted data-[orientation=horizontal]:h-1.5 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1.5", children: _jsx(SliderPrimitive.Range, { "data-slot": "slider-range", className: "absolute bg-primary data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full" }) }), Array.from({ length: count }, (_, i) => (_jsx(SliderPrimitive.Thumb, { "data-slot": "slider-thumb", "data-locked": isLocked ? "" : undefined, "aria-label": thumbLabels?.[i] ?? ariaLabel, "aria-labelledby": thumbLabels?.[i] ? undefined : ariaLabelledby, "aria-disabled": isLocked ? true : undefined, "aria-describedby": isLocked ? reasonId : undefined, className: "relative after:absolute after:-inset-2 block size-4 shrink-0 rounded-full border border-primary bg-card shadow-sm ring-ring/40 cd-tint outline-none hover:ring-[3px] focus-visible:ring-[3px] focus-visible:ring-ring/80 data-[locked]:cursor-not-allowed data-[locked]:hover:ring-0" }, i)))] }));
+    return (_jsxs(_Fragment, { children: [_jsx(SliderPrimitive.Root, { "data-slot": "slider", "data-locked": isLocked ? "" : undefined, value: value, defaultValue: defaultValue, min: min, onPointerDownCapture: (e) => {
+                    onPointerDownCapture?.(e);
+                    if (!isLocked)
+                        return;
+                    // Keep Radix from starting a drag, but let the thumb take focus so the reason is reachable.
+                    e.preventDefault();
+                    e.stopPropagation();
+                    e.target.closest('[role="slider"]')?.focus();
+                }, onKeyDownCapture: (e) => {
+                    onKeyDownCapture?.(e);
+                    if (isLocked && lockedKeys.has(e.key)) {
+                        e.preventDefault();
+                        e.stopPropagation();
+                    }
+                }, className: cn("relative flex w-full touch-none items-center select-none data-[locked]:cursor-not-allowed data-[locked]:opacity-45 data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-44 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col data-[disabled]:cursor-not-allowed data-[disabled]:opacity-45", className), ...props, ...(render ? { asChild: true } : null), children: render ? React.cloneElement(render, undefined, parts) : parts }), isLocked ? (_jsxs("p", { id: reasonId, "data-slot": "slider-reason", className: "mt-1.5 inline-flex items-center gap-1 text-xs text-muted-foreground", children: [_jsx(LockKeyhole, { "aria-hidden": true, className: "size-3" }), locked] })) : null] }));
+}
+export { Slider };

package/dist/ui/switch.d.ts

@@ -0,0 +1,14 @@
+import * as React from "react";
+import { Switch as SwitchPrimitive } from "radix-ui";
+import { type RenderProp } from "../lib/render-prop.js";
+/**
+ * A setting that is on or off. It is off until the person turns it on or the app says so with `checked` or
+ * `defaultChecked`. Space or Enter flips it. Pair it with a `Label`. To lock it, wrap it in `Locked` with a reason: it
+ * stays focusable, says why, and doesn't flip. Use a switch for a setting that takes effect at once; a choice the
+ * person confirms belongs in a `Checkbox` or `RadioGroup` with a button.
+ *
+ * @motion move:thumb The thumb slides to the other end when the state changes, over the move family's 200 ms. It follows the
+ * reading direction, so it slides the other way in right-to-left text.
+ */
+declare function Switch(allProps: React.ComponentProps<typeof SwitchPrimitive.Root> & RenderProp): React.JSX.Element;
+export { Switch };

package/dist/ui/switch.js

@@ -0,0 +1,23 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { Switch as SwitchPrimitive } from "radix-ui";
+import {} from "../lib/render-prop.js";
+import { cn } from "../lib/utils.js";
+import { motion } from "../lib/motion.js";
+const thumbMotion = motion("switch", "thumb", "move");
+/**
+ * A setting that is on or off. It is off until the person turns it on or the app says so with `checked` or
+ * `defaultChecked`. Space or Enter flips it. Pair it with a `Label`. To lock it, wrap it in `Locked` with a reason: it
+ * stays focusable, says why, and doesn't flip. Use a switch for a setting that takes effect at once; a choice the
+ * person confirms belongs in a `Checkbox` or `RadioGroup` with a button.
+ *
+ * @motion move:thumb The thumb slides to the other end when the state changes, over the move family's 200 ms. It follows the
+ * reading direction, so it slides the other way in right-to-left text.
+ */
+function Switch(allProps) {
+    const { className, render, nativeButton: _nativeButton, children, ...props } = allProps;
+    const thumb = children ?? (_jsx(SwitchPrimitive.Thumb, { "data-slot": "switch-thumb", style: thumbMotion, className: "pointer-events-none block size-4 rounded-full bg-card shadow-sm ring-0 cd-move data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=checked]:bg-primary-foreground data-[state=unchecked]:translate-x-0 rtl:data-[state=checked]:-translate-x-[calc(100%-2px)]" }));
+    return (_jsx(SwitchPrimitive.Root, { "data-slot": "switch", className: cn("peer relative after:absolute after:-inset-1 inline-flex h-[1.15rem] w-8 shrink-0 items-center rounded-full border border-transparent bg-input shadow-xs cd-tint outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/80 disabled:cursor-not-allowed disabled:opacity-45 data-[locked]:cursor-not-allowed data-[locked]:opacity-45 data-[state=checked]:bg-primary aria-invalid:ring-destructive/25", className), ...props, ...(render ? { asChild: true } : null), children: render ? React.cloneElement(render, undefined, thumb) : thumb }));
+}
+export { Switch };

package/dist/ui/tooltip.d.ts

@@ -5,5 +5,5 @@ declare function TooltipProvider({ delayDuration, ...props }: React.ComponentPro
 /** Works with or without a TooltipProvider above; an app-level one sets the delay for all. */
 declare function Tooltip({ ...props }: React.ComponentProps<typeof TooltipPrimitive.Root>): React.JSX.Element;
 declare function TooltipTrigger(allProps: React.ComponentProps<typeof TooltipPrimitive.Trigger> & RenderProp): React.JSX.Element;
-declare function TooltipContent({ className, sideOffset, children, ...props }: React.ComponentProps<typeof TooltipPrimitive.Content>): React.JSX.Element;
+declare function TooltipContent({ className, style, sideOffset, children, ...props }: React.ComponentProps<typeof TooltipPrimitive.Content>): React.JSX.Element;
 export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };

package/dist/ui/tooltip.js

@@ -4,6 +4,8 @@ import * as React from "react";
 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";
+const openMotion = motion("tooltip", "open", "overlay");
 // Whether a TooltipProvider is above, so a lone Tooltip can supply its own.
 const HasProvider = React.createContext(false);
 function TooltipProvider({ delayDuration = 0, ...props }) {
@@ -18,7 +20,7 @@ function TooltipTrigger(allProps) {
     const props = withRender(allProps);
     return _jsx(TooltipPrimitive.Trigger, { "data-slot": "tooltip-trigger", ...props });
 }
-function TooltipContent({ className, sideOffset = 0, children, ...props }) {
-    return (_jsx(TooltipPrimitive.Portal, { children: _jsxs(TooltipPrimitive.Content, { "data-slot": "tooltip-content", sideOffset: sideOffset, className: cn("z-50 w-fit origin-(--radix-tooltip-content-transform-origin) animate-in rounded-md bg-foreground px-3 py-1.5 text-xs text-balance text-background fade-in-0 zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95", className), ...props, children: [children, _jsx(TooltipPrimitive.Arrow, { className: "z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px] bg-foreground fill-foreground" })] }) }));
+function TooltipContent({ className, style, sideOffset = 0, children, ...props }) {
+    return (_jsx(TooltipPrimitive.Portal, { children: _jsxs(TooltipPrimitive.Content, { "data-slot": "tooltip-content", sideOffset: sideOffset, style: { ...openMotion, ...style }, className: cn("z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md bg-foreground px-3 py-1.5 text-xs text-balance text-background cd-overlay data-[state=closed]:cd-overlay-out", className), ...props, children: [children, _jsx(TooltipPrimitive.Arrow, { className: "z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px] bg-foreground fill-foreground" })] }) }));
 }
 export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@candor-ui/react",
-  "version": "2.2.0",
+  "version": "2.4.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",
@@ -50,8 +50,7 @@
     "clsx": "^2.1.1",
     "lucide-react": "^1.67.0",
     "radix-ui": "^1.8.1",
-    "tailwind-merge": "^3.7.0",
-    "tw-animate-css": "^1.4.0"
+    "tailwind-merge": "^3.7.0"
   },
   "peerDependencies": {
     "@ag-ui/client": "^1.0.3",