@datum-cloud/datum-ui 3.7.0 → 3.8.0

package/dist/collapsible-B-KP3JZ-.mjs

@@ -0,0 +1,104 @@
+import { n as EASE, t as DURATION } from "./motion-DOrRbLmy.mjs";
+import { t as useControllableState } from "./use-controllable-state-DLeVgbAb.mjs";
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+import { motion, useReducedMotion } from "motion/react";
+import * as CollapsiblePrimitive from "@radix-ui/react-collapsible";
+// src/components/base/collapsible/collapsible.tsx
+/**
+* Open state, mirrored from the root so `CollapsibleContent` can drive Motion.
+* `null` means the content sits under a bare Radix root rather than ours, and
+* falls back to Radix's own mount/unmount with no animation.
+*/
+const CollapsibleOpenContext = React.createContext(null);
+function Collapsible({ ref, open: openProp, defaultOpen, onOpenChange, ...props }) {
+	const [open, setOpen] = useControllableState(openProp, defaultOpen ?? false, onOpenChange);
+	return /* @__PURE__ */ jsx(CollapsibleOpenContext, {
+		value: open,
+		children: /* @__PURE__ */ jsx(CollapsiblePrimitive.Root, {
+			ref,
+			"data-slot": "collapsible",
+			open,
+			onOpenChange: setOpen,
+			...props
+		})
+	});
+}
+Collapsible.displayName = "Collapsible";
+const CollapsibleTrigger = CollapsiblePrimitive.Trigger;
+const OPEN = {
+	height: {
+		duration: DURATION.medium,
+		ease: EASE.out
+	},
+	opacity: {
+		duration: DURATION.medium,
+		ease: EASE.out
+	}
+};
+const CLOSE = {
+	height: {
+		duration: .2,
+		ease: EASE.out
+	},
+	opacity: {
+		duration: .12,
+		ease: EASE.out
+	}
+};
+/**
+* Collapsible content that animates its height and opacity with Motion.
+*
+* The node stays mounted. Radix would unmount it on close and drive the height
+* from a measured CSS variable, which restarts from zero if the user toggles
+* mid-animation and can measure 0px inside scroll containers. Motion animates
+* to and from `height: auto` instead and retargets smoothly when interrupted.
+* While closed the content is `inert`, so it is out of the tab order and the
+* accessibility tree just as an unmounted node would be.
+*
+* Under reduced motion the height changes instantly and only the fade remains.
+*/
+function CollapsibleContent({ ref, className, children, ...props }) {
+	const open = React.use(CollapsibleOpenContext);
+	const reduceMotion = Boolean(useReducedMotion());
+	const [settledClosed, setSettledClosed] = React.useState(open === false);
+	if (open && settledClosed) setSettledClosed(false);
+	if (open === null || props.asChild) return /* @__PURE__ */ jsx(CollapsiblePrimitive.Content, {
+		ref,
+		"data-slot": "collapsible-content",
+		className,
+		...props,
+		children
+	});
+	const transition = open ? OPEN : CLOSE;
+	return /* @__PURE__ */ jsx(CollapsiblePrimitive.Content, {
+		ref,
+		forceMount: true,
+		hidden: !open && settledClosed,
+		asChild: true,
+		...props,
+		children: /* @__PURE__ */ jsx(motion.div, {
+			"data-slot": "collapsible-content",
+			initial: false,
+			animate: {
+				height: open ? "auto" : 0,
+				opacity: open ? 1 : 0
+			},
+			transition: reduceMotion ? {
+				...transition,
+				height: { duration: 0 }
+			} : transition,
+			onAnimationComplete: () => {
+				if (!open) setSettledClosed(true);
+			},
+			inert: !open,
+			style: { overflow: "hidden" },
+			children: /* @__PURE__ */ jsx("div", {
+				className,
+				children
+			})
+		})
+	});
+}
+CollapsibleContent.displayName = "CollapsibleContent";
+export { CollapsibleContent as n, CollapsibleTrigger as r, Collapsible as t };

package/dist/command/index.mjs

@@ -1,2 +1 @@
-import { a as CommandInput, c as CommandSeparator, i as CommandGroup, l as CommandShortcut, n as CommandDialog, o as CommandItem, r as CommandEmpty, s as CommandList, t as Command } from "../command-C0aGIYnQ.mjs";
-export { Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut };
+export { t as Command, n as CommandDialog, r as CommandEmpty, i as CommandGroup, a as CommandInput, o as CommandItem, s as CommandList, c as CommandSeparator, l as CommandShortcut } from "../command-B0be-zU5.mjs";

package/dist/{command-C0aGIYnQ.mjs → command-B0be-zU5.mjs}

@@ -1,10 +1,10 @@
-import { t as cn } from "./utils-Bu32wN-x.mjs";
-import { i as DialogDescription, l as DialogTitle, o as DialogHeader, r as DialogContent, t as Dialog } from "./dialog-CmkrpaYy.mjs";
+import { t as cn } from "./utils-CTIuhCOs.mjs";
+import { i as DialogDescription, l as DialogTitle, o as DialogHeader, r as DialogContent, t as Dialog } from "./dialog-D6sDXaH6.mjs";
 import { SearchIcon } from "lucide-react";
 import "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Command } from "cmdk";
-//#region ../shadcn/ui/command.tsx
+// ../shadcn/ui/command.tsx
 function Command$1({ className, ...props }) {
 	return /* @__PURE__ */ jsx(Command, {
 		"data-slot": "command",
@@ -80,5 +80,4 @@ function CommandShortcut({ className, ...props }) {
 		...props
 	});
 }
-//#endregion
 export { CommandInput as a, CommandSeparator as c, CommandGroup as i, CommandShortcut as l, CommandDialog as n, CommandItem as o, CommandEmpty as r, CommandList as s, Command$1 as t };

package/dist/components/base/checkbox/checkbox.d.ts

@@ -1,7 +1,15 @@
-import { Checkbox as ShadcnCheckbox } from '../../../_shadcn/ui/checkbox';
+import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
 import * as React from 'react';
-declare function Checkbox({ ref, className, ...props }: React.ComponentProps<typeof ShadcnCheckbox> & {
-    ref?: React.RefObject<React.ElementRef<typeof ShadcnCheckbox> | null>;
+/**
+ * Checkbox renders the Radix primitive directly rather than wrapping the
+ * shadcn one, so the indicator can stay mounted and animate out as well as in.
+ * The shadcn base stays untouched and can be regenerated from upstream.
+ *
+ * The checked state is mirrored here (controlled or not) because Motion needs
+ * it in JS to drive the check mark.
+ */
+declare function Checkbox({ ref, className, checked: checkedProp, defaultChecked, onCheckedChange, ...props }: React.ComponentProps<typeof CheckboxPrimitive.Root> & {
+    ref?: React.RefObject<React.ElementRef<typeof CheckboxPrimitive.Root> | null>;
 }): React.JSX.Element;
 declare namespace Checkbox {
     var displayName: string;

package/dist/components/base/collapsible/collapsible.d.ts

@@ -0,0 +1,28 @@
+import * as CollapsiblePrimitive from '@radix-ui/react-collapsible';
+import * as React from 'react';
+declare function Collapsible({ ref, open: openProp, defaultOpen, onOpenChange, ...props }: React.ComponentProps<typeof CollapsiblePrimitive.Root> & {
+    ref?: React.RefObject<React.ElementRef<typeof CollapsiblePrimitive.Root> | null>;
+}): React.JSX.Element;
+declare namespace Collapsible {
+    var displayName: string;
+}
+declare const CollapsibleTrigger: React.ForwardRefExoticComponent<CollapsiblePrimitive.CollapsibleTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+/**
+ * Collapsible content that animates its height and opacity with Motion.
+ *
+ * The node stays mounted. Radix would unmount it on close and drive the height
+ * from a measured CSS variable, which restarts from zero if the user toggles
+ * mid-animation and can measure 0px inside scroll containers. Motion animates
+ * to and from `height: auto` instead and retargets smoothly when interrupted.
+ * While closed the content is `inert`, so it is out of the tab order and the
+ * accessibility tree just as an unmounted node would be.
+ *
+ * Under reduced motion the height changes instantly and only the fade remains.
+ */
+declare function CollapsibleContent({ ref, className, children, ...props }: React.ComponentProps<typeof CollapsiblePrimitive.Content> & {
+    ref?: React.RefObject<React.ElementRef<typeof CollapsiblePrimitive.Content> | null>;
+}): React.JSX.Element;
+declare namespace CollapsibleContent {
+    var displayName: string;
+}
+export { Collapsible, CollapsibleContent, CollapsibleTrigger };

package/dist/components/base/collapsible/index.d.ts

@@ -1 +1 @@
-export * from '../../../_shadcn/ui/collapsible';
+export { Collapsible, CollapsibleContent, CollapsibleTrigger } from './collapsible';

package/dist/components/base/radio-group/radio-group.d.ts

@@ -1,13 +1,19 @@
-import { RadioGroup as ShadcnRadioGroup, RadioGroupItem as ShadcnRadioGroupItem } from '../../../_shadcn/ui/radio-group';
+import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
 import * as React from 'react';
-declare function RadioGroup({ ref, className, ...props }: React.ComponentProps<typeof ShadcnRadioGroup> & {
-    ref?: React.RefObject<React.ElementRef<typeof ShadcnRadioGroup> | null>;
+declare function RadioGroup({ ref, className, value: valueProp, defaultValue, onValueChange, ...props }: React.ComponentProps<typeof RadioGroupPrimitive.Root> & {
+    ref?: React.RefObject<React.ElementRef<typeof RadioGroupPrimitive.Root> | null>;
 }): React.JSX.Element;
 declare namespace RadioGroup {
     var displayName: string;
 }
-declare function RadioGroupItem({ ref, className, ...props }: React.ComponentProps<typeof ShadcnRadioGroupItem> & {
-    ref?: React.RefObject<React.ElementRef<typeof ShadcnRadioGroupItem> | null>;
+/**
+ * RadioGroupItem renders the Radix primitive directly (not the shadcn wrapper)
+ * so the dot can stay mounted and animate out as well as in. The dot pops in
+ * from half size with a small spring and fades out quickly when another option
+ * takes the selection. Under reduced motion it only fades.
+ */
+declare function RadioGroupItem({ ref, className, value, ...props }: React.ComponentProps<typeof RadioGroupPrimitive.Item> & {
+    ref?: React.RefObject<React.ElementRef<typeof RadioGroupPrimitive.Item> | null>;
 }): React.JSX.Element;
 declare namespace RadioGroupItem {
     var displayName: string;

package/dist/components/base/spinner/index.d.ts

@@ -1 +1 @@
-export * from '../../../_shadcn/ui/spinner';
+export { Spinner } from './spinner';

package/dist/components/base/spinner/spinner.d.ts

@@ -0,0 +1,11 @@
+import type * as React from 'react';
+/**
+ * Standalone loading indicator, announced to assistive tech as a status.
+ *
+ * Built on `SpinnerIcon`. It differs in three ways: it is `size-4` unless a
+ * size class is passed, it carries `role="status"`, and its colour comes from
+ * `className` (default `text-primary`), so `<Spinner className="text-white" />`
+ * recolours the arc and its track together.
+ */
+declare function Spinner({ className, ...props }: React.ComponentProps<'svg'>): React.JSX.Element;
+export { Spinner };

package/dist/components/base/switch/switch.d.ts

@@ -5,8 +5,13 @@ import * as React from 'react';
  * one, because its state glyphs go inside the thumb. Building it here keeps the
  * shadcn base untouched, so that base can be regenerated from upstream without
  * losing anything of ours.
+ *
+ * Motion drives the thumb: it slides on a light spring, stretches while the
+ * pointer is held down (so the press registers before the release toggles it),
+ * and the on/off glyphs cross-fade. Under reduced motion the thumb moves
+ * instantly and only the glyphs fade.
  */
-declare function Switch({ ref, className, ...props }: React.ComponentProps<typeof SwitchPrimitive.Root> & {
+declare function Switch({ ref, className, checked: checkedProp, defaultChecked, onCheckedChange, onPointerDown, onPointerUp, onPointerLeave, onPointerCancel, ...props }: React.ComponentProps<typeof SwitchPrimitive.Root> & {
     ref?: React.RefObject<React.ElementRef<typeof SwitchPrimitive.Root> | null>;
 }): React.JSX.Element;
 declare namespace Switch {

package/dist/components/base/typography/typography.d.ts

@@ -1,7 +1,7 @@
 import type { VariantProps } from 'class-variance-authority';
 import * as React from 'react';
 declare const titleVariants: (props?: ({
-    level?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | null | undefined;
+    level?: 1 | 2 | 4 | 3 | 5 | 6 | 7 | null | undefined;
     weight?: "bold" | "normal" | "medium" | "semibold" | "extrabold" | null | undefined;
     textColor?: "default" | "secondary" | "destructive" | "success" | "info" | "warning" | "primary" | "muted" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;

package/dist/components/features/_shared/copy-state-icon.d.ts

@@ -0,0 +1,12 @@
+import type { LucideProps } from 'lucide-react';
+/**
+ * Copy glyph that turns into a check once the copy has happened, and back again
+ * when `copied` resets. The two glyphs are stacked and cross-fade with a scale
+ * and a light blur, so the swap reads as one icon changing rather than two
+ * swapping places. Under reduced motion it only fades.
+ *
+ * Decorative: the owning button carries the accessible label.
+ */
+export declare function CopyStateIcon({ copied, ...iconProps }: LucideProps & {
+    copied: boolean;
+}): import("react").JSX.Element;

package/dist/components/features/_shared/index.d.ts

@@ -1,2 +1,4 @@
+export { CopyStateIcon } from './copy-state-icon';
+export { MotionBadge, useChipMotion } from './motion-chip';
 export { endOfDayInTz, startOfDayInTz } from './timezone';
 export { useDeprecationWarning } from './use-deprecation-warning';

package/dist/components/features/_shared/motion-chip.d.ts

@@ -0,0 +1,293 @@
+import type { HTMLMotionProps } from 'motion/react';
+/** `Badge` as a Motion component, so chips can enter, exit and reflow. */
+export declare const MotionBadge: import("react").ComponentType<Omit<{
+    slot?: string | undefined;
+    title?: string | undefined;
+    className?: string | undefined;
+    defaultChecked?: boolean | undefined;
+    defaultValue?: string | number | readonly string[] | undefined;
+    suppressContentEditableWarning?: boolean | undefined;
+    suppressHydrationWarning?: boolean | undefined;
+    accessKey?: string | undefined;
+    autoCapitalize?: "none" | (string & {}) | "off" | "on" | "sentences" | "words" | "characters" | undefined;
+    autoFocus?: boolean | undefined;
+    contentEditable?: (boolean | "true" | "false") | "inherit" | "plaintext-only" | undefined;
+    contextMenu?: string | undefined;
+    dir?: string | undefined;
+    draggable?: (boolean | "true" | "false") | undefined;
+    enterKeyHint?: "search" | "enter" | "done" | "go" | "next" | "previous" | "send" | undefined;
+    hidden?: boolean | undefined;
+    id?: string | undefined;
+    lang?: string | undefined;
+    nonce?: string | undefined;
+    spellCheck?: (boolean | "true" | "false") | undefined;
+    tabIndex?: number | undefined;
+    translate?: "yes" | "no" | undefined;
+    radioGroup?: string | undefined;
+    role?: import("react").AriaRole | undefined;
+    about?: string | undefined;
+    content?: string | undefined;
+    datatype?: string | undefined;
+    inlist?: any;
+    prefix?: string | undefined;
+    property?: string | undefined;
+    rel?: string | undefined;
+    resource?: string | undefined;
+    rev?: string | undefined;
+    typeof?: string | undefined;
+    vocab?: string | undefined;
+    autoCorrect?: string | undefined;
+    autoSave?: string | undefined;
+    color?: string | undefined;
+    itemProp?: string | undefined;
+    itemScope?: boolean | undefined;
+    itemType?: string | undefined;
+    itemID?: string | undefined;
+    itemRef?: string | undefined;
+    results?: number | undefined;
+    security?: string | undefined;
+    unselectable?: "off" | "on" | undefined;
+    popover?: "" | "auto" | "manual" | "hint" | undefined;
+    popoverTargetAction?: "toggle" | "show" | "hide" | undefined;
+    popoverTarget?: string | undefined;
+    inert?: boolean | undefined;
+    inputMode?: "search" | "text" | "none" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
+    is?: string | undefined;
+    exportparts?: string | undefined;
+    part?: string | undefined;
+    "aria-activedescendant"?: string | undefined;
+    "aria-atomic"?: (boolean | "true" | "false") | undefined;
+    "aria-autocomplete"?: "list" | "none" | "inline" | "both" | undefined;
+    "aria-braillelabel"?: string | undefined;
+    "aria-brailleroledescription"?: string | undefined;
+    "aria-busy"?: (boolean | "true" | "false") | undefined;
+    "aria-checked"?: boolean | "true" | "false" | "mixed" | undefined;
+    "aria-colcount"?: number | undefined;
+    "aria-colindex"?: number | undefined;
+    "aria-colindextext"?: string | undefined;
+    "aria-colspan"?: number | undefined;
+    "aria-controls"?: string | undefined;
+    "aria-current"?: boolean | "true" | "false" | "time" | "page" | "step" | "location" | "date" | undefined;
+    "aria-describedby"?: string | undefined;
+    "aria-description"?: string | undefined;
+    "aria-details"?: string | undefined;
+    "aria-disabled"?: (boolean | "true" | "false") | undefined;
+    "aria-dropeffect"?: "link" | "none" | "copy" | "execute" | "move" | "popup" | undefined;
+    "aria-errormessage"?: string | undefined;
+    "aria-expanded"?: (boolean | "true" | "false") | undefined;
+    "aria-flowto"?: string | undefined;
+    "aria-grabbed"?: (boolean | "true" | "false") | undefined;
+    "aria-haspopup"?: boolean | "true" | "false" | "dialog" | "menu" | "grid" | "listbox" | "tree" | undefined;
+    "aria-hidden"?: (boolean | "true" | "false") | undefined;
+    "aria-invalid"?: boolean | "true" | "false" | "grammar" | "spelling" | undefined;
+    "aria-keyshortcuts"?: string | undefined;
+    "aria-label"?: string | undefined;
+    "aria-labelledby"?: string | undefined;
+    "aria-level"?: number | undefined;
+    "aria-live"?: "off" | "assertive" | "polite" | undefined;
+    "aria-modal"?: (boolean | "true" | "false") | undefined;
+    "aria-multiline"?: (boolean | "true" | "false") | undefined;
+    "aria-multiselectable"?: (boolean | "true" | "false") | undefined;
+    "aria-orientation"?: "horizontal" | "vertical" | undefined;
+    "aria-owns"?: string | undefined;
+    "aria-placeholder"?: string | undefined;
+    "aria-posinset"?: number | undefined;
+    "aria-pressed"?: boolean | "true" | "false" | "mixed" | undefined;
+    "aria-readonly"?: (boolean | "true" | "false") | undefined;
+    "aria-relevant"?: "text" | "all" | "additions" | "additions removals" | "additions text" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals" | undefined;
+    "aria-required"?: (boolean | "true" | "false") | undefined;
+    "aria-roledescription"?: string | undefined;
+    "aria-rowcount"?: number | undefined;
+    "aria-rowindex"?: number | undefined;
+    "aria-rowindextext"?: string | undefined;
+    "aria-rowspan"?: number | undefined;
+    "aria-selected"?: (boolean | "true" | "false") | undefined;
+    "aria-setsize"?: number | undefined;
+    "aria-sort"?: "none" | "ascending" | "descending" | "other" | undefined;
+    "aria-valuemax"?: number | undefined;
+    "aria-valuemin"?: number | undefined;
+    "aria-valuenow"?: number | undefined;
+    "aria-valuetext"?: string | undefined;
+    dangerouslySetInnerHTML?: {
+        __html: string | TrustedHTML;
+    } | undefined;
+    onCopy?: import("react").ClipboardEventHandler<HTMLDivElement> | undefined;
+    onCopyCapture?: import("react").ClipboardEventHandler<HTMLDivElement> | undefined;
+    onCut?: import("react").ClipboardEventHandler<HTMLDivElement> | undefined;
+    onCutCapture?: import("react").ClipboardEventHandler<HTMLDivElement> | undefined;
+    onPaste?: import("react").ClipboardEventHandler<HTMLDivElement> | undefined;
+    onPasteCapture?: import("react").ClipboardEventHandler<HTMLDivElement> | undefined;
+    onCompositionEnd?: import("react").CompositionEventHandler<HTMLDivElement> | undefined;
+    onCompositionEndCapture?: import("react").CompositionEventHandler<HTMLDivElement> | undefined;
+    onCompositionStart?: import("react").CompositionEventHandler<HTMLDivElement> | undefined;
+    onCompositionStartCapture?: import("react").CompositionEventHandler<HTMLDivElement> | undefined;
+    onCompositionUpdate?: import("react").CompositionEventHandler<HTMLDivElement> | undefined;
+    onCompositionUpdateCapture?: import("react").CompositionEventHandler<HTMLDivElement> | undefined;
+    onFocus?: import("react").FocusEventHandler<HTMLDivElement> | undefined;
+    onFocusCapture?: import("react").FocusEventHandler<HTMLDivElement> | undefined;
+    onBlur?: import("react").FocusEventHandler<HTMLDivElement> | undefined;
+    onBlurCapture?: import("react").FocusEventHandler<HTMLDivElement> | undefined;
+    onChange?: import("react").ChangeEventHandler<HTMLDivElement, Element> | undefined;
+    onChangeCapture?: import("react").ChangeEventHandler<HTMLDivElement, Element> | undefined;
+    onBeforeInput?: import("react").InputEventHandler<HTMLDivElement> | undefined;
+    onBeforeInputCapture?: import("react").InputEventHandler<HTMLDivElement> | undefined;
+    onInput?: import("react").InputEventHandler<HTMLDivElement> | undefined;
+    onInputCapture?: import("react").InputEventHandler<HTMLDivElement> | undefined;
+    onReset?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onResetCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onSubmit?: import("react").SubmitEventHandler<HTMLDivElement> | undefined;
+    onSubmitCapture?: import("react").SubmitEventHandler<HTMLDivElement> | undefined;
+    onInvalid?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onInvalidCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onLoad?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onLoadCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onError?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onErrorCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onKeyDown?: import("react").KeyboardEventHandler<HTMLDivElement> | undefined;
+    onKeyDownCapture?: import("react").KeyboardEventHandler<HTMLDivElement> | undefined;
+    onKeyPress?: import("react").KeyboardEventHandler<HTMLDivElement> | undefined;
+    onKeyPressCapture?: import("react").KeyboardEventHandler<HTMLDivElement> | undefined;
+    onKeyUp?: import("react").KeyboardEventHandler<HTMLDivElement> | undefined;
+    onKeyUpCapture?: import("react").KeyboardEventHandler<HTMLDivElement> | undefined;
+    onAbort?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onAbortCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onCanPlay?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onCanPlayCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onCanPlayThrough?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onCanPlayThroughCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onDurationChange?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onDurationChangeCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onEmptied?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onEmptiedCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onEncrypted?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onEncryptedCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onEnded?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onEndedCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onLoadedData?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onLoadedDataCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onLoadedMetadata?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onLoadedMetadataCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onLoadStart?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onLoadStartCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onPause?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onPauseCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onPlay?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onPlayCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onPlaying?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onPlayingCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onProgress?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onProgressCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onRateChange?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onRateChangeCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onSeeked?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onSeekedCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onSeeking?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onSeekingCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onStalled?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onStalledCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onSuspend?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onSuspendCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onTimeUpdate?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onTimeUpdateCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onVolumeChange?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onVolumeChangeCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onWaiting?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onWaitingCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onAuxClick?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onAuxClickCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onClick?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onClickCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onContextMenu?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onContextMenuCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onDoubleClick?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onDoubleClickCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onDragCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
+    onDragEndCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
+    onDragEnter?: import("react").DragEventHandler<HTMLDivElement> | undefined;
+    onDragEnterCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
+    onDragExit?: import("react").DragEventHandler<HTMLDivElement> | undefined;
+    onDragExitCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
+    onDragLeave?: import("react").DragEventHandler<HTMLDivElement> | undefined;
+    onDragLeaveCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
+    onDragOver?: import("react").DragEventHandler<HTMLDivElement> | undefined;
+    onDragOverCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
+    onDragStartCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
+    onDrop?: import("react").DragEventHandler<HTMLDivElement> | undefined;
+    onDropCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
+    onMouseDown?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onMouseDownCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onMouseEnter?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onMouseLeave?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onMouseMove?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onMouseMoveCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onMouseOut?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onMouseOutCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onMouseOver?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onMouseOverCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onMouseUp?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onMouseUpCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onSelect?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onSelectCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onTouchCancel?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
+    onTouchCancelCapture?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
+    onTouchEnd?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
+    onTouchEndCapture?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
+    onTouchMove?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
+    onTouchMoveCapture?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
+    onTouchStart?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
+    onTouchStartCapture?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
+    onPointerDown?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerDownCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerMove?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerMoveCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerUp?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerUpCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerCancel?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerCancelCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerEnter?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerLeave?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerOver?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerOverCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerOut?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerOutCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onGotPointerCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onGotPointerCaptureCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onLostPointerCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onLostPointerCaptureCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onScroll?: import("react").UIEventHandler<HTMLDivElement> | undefined;
+    onScrollCapture?: import("react").UIEventHandler<HTMLDivElement> | undefined;
+    onScrollEnd?: import("react").UIEventHandler<HTMLDivElement> | undefined;
+    onScrollEndCapture?: import("react").UIEventHandler<HTMLDivElement> | undefined;
+    onWheel?: import("react").WheelEventHandler<HTMLDivElement> | undefined;
+    onWheelCapture?: import("react").WheelEventHandler<HTMLDivElement> | undefined;
+    onAnimationStartCapture?: import("react").AnimationEventHandler<HTMLDivElement> | undefined;
+    onAnimationEnd?: import("react").AnimationEventHandler<HTMLDivElement> | undefined;
+    onAnimationEndCapture?: import("react").AnimationEventHandler<HTMLDivElement> | undefined;
+    onAnimationIteration?: import("react").AnimationEventHandler<HTMLDivElement> | undefined;
+    onAnimationIterationCapture?: import("react").AnimationEventHandler<HTMLDivElement> | undefined;
+    onToggle?: import("react").ToggleEventHandler<HTMLDivElement> | undefined;
+    onBeforeToggle?: import("react").ToggleEventHandler<HTMLDivElement> | undefined;
+    onTransitionCancel?: import("react").TransitionEventHandler<HTMLDivElement> | undefined;
+    onTransitionCancelCapture?: import("react").TransitionEventHandler<HTMLDivElement> | undefined;
+    onTransitionEnd?: import("react").TransitionEventHandler<HTMLDivElement> | undefined;
+    onTransitionEndCapture?: import("react").TransitionEventHandler<HTMLDivElement> | undefined;
+    onTransitionRun?: import("react").TransitionEventHandler<HTMLDivElement> | undefined;
+    onTransitionRunCapture?: import("react").TransitionEventHandler<HTMLDivElement> | undefined;
+    onTransitionStart?: import("react").TransitionEventHandler<HTMLDivElement> | undefined;
+    onTransitionStartCapture?: import("react").TransitionEventHandler<HTMLDivElement> | undefined;
+    type?: "secondary" | "success" | "info" | "warning" | "primary" | "tertiary" | "quaternary" | "danger" | "muted" | null | undefined;
+    theme?: "outline" | "solid" | "light" | null | undefined;
+} & import("motion/react").MotionProps, "children"> & {
+    children?: import("react").ReactNode | import("motion/react").MotionValue<number> | import("motion/react").MotionValue<string>;
+}>;
+/**
+ * Motion props for a chip in a wrapping list, for use with `MotionBadge`
+ * inside `<AnimatePresence initial={false} mode="popLayout">`.
+ *
+ * A chip scales up slightly as it fades in, and fades out a little faster
+ * when removed. `popLayout` takes the leaving chip out of flow straight away,
+ * and `layout="position"` slides the chips after it into the gap rather than
+ * snapping. The list needs `position: relative` for `popLayout` to place the
+ * leaving chip. Under reduced motion chips only fade and nothing slides.
+ */
+export declare function useChipMotion(): Pick<HTMLMotionProps<'div'>, 'initial' | 'animate' | 'exit' | 'transition' | 'layout'>;

package/dist/components/features/assistant/components/message/plan-card.d.ts

@@ -8,7 +8,7 @@ export interface AssistantPlanCardProps {
     onApprove?: () => void;
     /** "Change something": the host puts the person in the composer to say what. */
     onChange?: () => void;
-    /** The clock, for tests. */
+    /** A fixed clock, for tests. Without it the card keeps its own. */
     now?: number;
 }
 /**

package/dist/components/icons/spinner.icon.d.ts

@@ -1,12 +1,26 @@
 import type { VariantProps } from 'class-variance-authority';
+import * as React from 'react';
 declare const spinnerVariants: (props?: ({
     size?: "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export interface SpinnerIconProps extends React.SVGProps<SVGSVGElement>, VariantProps<typeof spinnerVariants> {
-    /** Color of the track (background circle) */
+    /**
+     * Colour of the track (background circle). By default the track is the
+     * indicator colour at low opacity, so recolouring the indicator recolours both.
+     */
     trackClassName?: string;
-    /** Color of the spinning indicator */
+    /** Colour of the spinning indicator */
     indicatorClassName?: string;
 }
-export declare function SpinnerIcon({ size, className, trackClassName, indicatorClassName, ...props }: SpinnerIconProps): import("react").JSX.Element;
+/**
+ * A loading spinner: a faint full-circle track with an arc that fades from a
+ * transparent tail to a solid, rounded head, turning clockwise.
+ *
+ * The rotation runs through Motion as a full `transform` keyframe animation,
+ * which Motion hands to the Web Animations API. That keeps it on the
+ * compositor, so the spinner stays smooth while the main thread is busy doing
+ * whatever the user is waiting for. It keeps spinning under reduced motion:
+ * it is essential loading feedback, not decoration.
+ */
+export declare function SpinnerIcon({ size, className, trackClassName, indicatorClassName, ...props }: SpinnerIconProps): React.JSX.Element;
 export {};