prime-ui-kit 0.10.0 → 0.11.0

package/dist/components/tag-select/VirtualOptions.d.ts

@@ -0,0 +1,24 @@
+import * as React from "react";
+import type { ControlSize } from "../../internal/states";
+export type VirtualOptionsHandle = {
+    /** Scrolls the list's own scroller so option `index` is in view (the keyboard moved to it). */
+    reveal: (index: number) => void;
+};
+type VirtualOptionsProps = {
+    count: number;
+    getKey: (index: number) => string;
+    /** The panel's scroller; the window follows its scroll. */
+    scrollRef: React.RefObject<HTMLElement | null>;
+    /** Options rendered wherever the list scrolls: the highlighted one, the one whose menu is open. */
+    pinned: readonly number[];
+    size: ControlSize;
+    /** Draws option `index`; `measure` goes on its row element. */
+    renderOption: (index: number, measure: (node: HTMLElement | null) => void) => React.ReactNode;
+    ref: React.Ref<VirtualOptionsHandle>;
+};
+/**
+ * A long option list: only the options around the view are rendered (`useVirtualRows`), spacers
+ * hold the height of the rest. Mounted with the panel, so the scroller exists before its effects.
+ */
+export declare function VirtualOptions({ count, getKey, scrollRef, pinned, size, renderOption, ref, }: VirtualOptionsProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/textarea/Textarea.d.ts

@@ -1,12 +1,33 @@
 import * as React from "react";
-import type { ControlSize } from "@/internal/states";
+import { type FieldActionButtonProps } from "../../internal/FieldAction";
+import { type FieldCommitHandler } from "../../internal/FieldCommit";
+import type { ControlSize } from "../../internal/states";
 export type TextareaLabels = {
     /** Muted marker after the label when `optional`. */
     optional: string;
     /** Screen-reader text of `Textarea.Counter`; `{current}` and `{max}` are replaced. */
     counter: string;
+    /** Name and tooltip of `Textarea.CopyButton`. */
+    copy: string;
+    /** Name, tooltip and announcement of `Textarea.CopyButton` once the text is copied. */
+    copied: string;
+    /** Name, tooltip and announcement of `Textarea.CopyButton` when the clipboard refuses. */
+    copyError: string;
+    /** Announced while an `onCommit` save is pending. */
+    saving: string;
+    /** Announced once an `onCommit` save succeeds. */
+    saved: string;
 };
 export type TextareaRootProps = Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, "size" | "children"> & {
+    /**
+     * Saves the field on its own (inline editing): fires with the value on blur and Mod+Enter when it
+     * differs from the last committed one; Escape reverts to it. Return a Promise to show a spinner
+     * in the field's corner while it runs (the field stays editable, Tab moves on); a rejection puts
+     * the committed value back — show why through `error`. Success shows a brief check.
+     */
+    onCommit?: FieldCommitHandler;
+    /** Actions in the field's top end corner: `Textarea.CopyButton`, `Textarea.Action`. */
+    children?: React.ReactNode;
     /** Tier. Default: the tier of the surrounding control (a form, a panel), else `m`. */
     size?: ControlSize;
     /** Invalid state: danger ring and `aria-invalid`. A non-empty `error` implies it. */
@@ -29,6 +50,13 @@ export type TextareaRootProps = Omit<React.TextareaHTMLAttributes<HTMLTextAreaEl
     reserveSupportRow?: boolean;
     /** Height follows the content. `false` → fixed height with native vertical resize. */
     autoResize?: boolean;
+    /** Minimum height in lines (default 3); with `autoResize={false}` the fixed height. */
+    rows?: number;
+    /**
+     * With `autoResize`: the field grows up to this many lines, then scrolls inside (a chat
+     * composer: `rows={1} maxRows={8}`). Without it the field grows without a limit.
+     */
+    maxRows?: number;
     /** Called with the new string value; native `onChange` still fires. */
     onValueChange?: (value: string) => void;
     labels?: Partial<TextareaLabels>;
@@ -39,7 +67,7 @@ export type TextareaRootProps = Omit<React.TextareaHTMLAttributes<HTMLTextAreaEl
  * A multi-line field. `className` goes to the field frame, `id`, `ref` and the native attributes
  * to the `<textarea>` (it has no `Field` part).
  */
-declare function TextareaRoot({ id, className, size: sizeProp, invalid, focusRing, label, required, optional, hint, error, counter, reserveSupportRow, autoResize, disabled, readOnly, value, onInput, onChange, onValueChange, labels: labelsProp, "aria-describedby": ariaDescribedBy, ref, ...rest }: TextareaRootProps): import("react/jsx-runtime").JSX.Element;
+declare function TextareaRoot({ id, className, size: sizeProp, invalid, focusRing, label, required, optional, hint, error, counter, reserveSupportRow, autoResize, rows, maxRows, disabled: disabledProp, readOnly, value, onInput, onChange, onValueChange, onFocus, onBlur, onKeyDown, onCommit, labels: labelsProp, "aria-describedby": ariaDescribedBy, children, ref, ...rest }: TextareaRootProps): import("react/jsx-runtime").JSX.Element;
 declare namespace TextareaRoot {
     var displayName: string;
 }
@@ -53,8 +81,26 @@ declare function TextareaCounter(props: TextareaCounterProps): import("react/jsx
 declare namespace TextareaCounter {
     var displayName: string;
 }
+export type TextareaActionProps = FieldActionButtonProps;
+/** The consumer's icon action in the field's corner: a named button with a tooltip; `asChild` renders a link. */
+declare function TextareaAction(props: TextareaActionProps): import("react/jsx-runtime").JSX.Element;
+declare namespace TextareaAction {
+    var displayName: string;
+}
+export type TextareaCopyButtonProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "type" | "children" | "aria-label"> & {
+    /** Text to copy; the field's current value when omitted. */
+    value?: string;
+    ref?: React.Ref<HTMLButtonElement>;
+};
+/** Copies the field's text (a read-only result); the glyph morphs into a check. */
+declare function TextareaCopyButton({ value, ...rest }: TextareaCopyButtonProps): import("react/jsx-runtime").JSX.Element;
+declare namespace TextareaCopyButton {
+    var displayName: string;
+}
 export declare const Textarea: {
     Root: typeof TextareaRoot;
     Counter: typeof TextareaCounter;
+    CopyButton: typeof TextareaCopyButton;
+    Action: typeof TextareaAction;
 };
 export {};

package/dist/components/thumbnail/Thumbnail.d.ts

@@ -1,9 +1,9 @@
-import type * as React from "react";
-import { type ImageSlotFallbackProps, type ImageSlotImageProps } from "@/internal/imageSlot";
-import type { ControlSize, PaletteColor } from "@/internal/states";
+import * as React from "react";
+import { type ImageSlotFallbackProps, type ImageSlotImageProps } from "../../internal/imageSlot";
+import type { ControlSize, PaletteColor } from "../../internal/states";
 /** Width ÷ height. `1:1` square · `4:3` / `3:2` photo · `16:9` wide cover · `3:4` portrait. */
 export type ThumbnailRatio = "1:1" | "4:3" | "3:2" | "16:9" | "3:4";
-export type ThumbnailRootProps = React.HTMLAttributes<HTMLDivElement> & {
+export type ThumbnailRootProps = Omit<React.HTMLAttributes<HTMLDivElement>, "color" | "defaultChecked" | "onChange"> & {
     /** Height tier: 24 · 32 · 40 · 48 · 64; width follows `ratio`. Default `m`. */
     size?: ControlSize;
     /** Aspect ratio, width ÷ height. Default `1:1`. */
@@ -16,10 +16,25 @@ export type ThumbnailRootProps = React.HTMLAttributes<HTMLDivElement> & {
     fullWidth?: boolean;
     /** A faint inner ring around the frame, for photos with a white background on a light surface. */
     ring?: boolean;
+    /**
+     * Puts the frame on its one child — a `<button>` that opens a viewer, an `<a>` to the object —
+     * which takes the parts as its children: hover lift, press and focus ring come with it.
+     */
+    asChild?: boolean;
+    /** Selected (controlled): the tile becomes a checkbox with a check in its corner. */
+    checked?: boolean;
+    /** Initially selected (uncontrolled); makes the tile selectable. */
+    defaultChecked?: boolean;
+    /** Selection changed; makes the tile selectable. */
+    onCheckedChange?: (checked: boolean) => void;
     ref?: React.Ref<HTMLDivElement>;
 };
-/** A preview of an object (product, vehicle, file, cover) at a fixed aspect ratio. People use Avatar. */
-declare function ThumbnailRoot({ size, ratio, color, variant, fullWidth, ring, className, children, ...rest }: ThumbnailRootProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * A preview of an object (product, vehicle, file, cover) at a fixed aspect ratio. People use Avatar.
+ * With `asChild` it is a link or a button that opens the object; with the checked triad a
+ * selectable tile of a media library.
+ */
+declare function ThumbnailRoot({ size, ratio, color, variant, fullWidth, ring, asChild, checked: checkedProp, defaultChecked, onCheckedChange, className, children, ref, ...rest }: ThumbnailRootProps): import("react/jsx-runtime").JSX.Element;
 declare namespace ThumbnailRoot {
     var displayName: string;
 }
@@ -32,10 +47,37 @@ declare function ThumbnailImage({ fit, ...rest }: ThumbnailImageProps): import("
 declare namespace ThumbnailImage {
     var displayName: string;
 }
+export type ThumbnailVideoProps = Omit<React.VideoHTMLAttributes<HTMLVideoElement>, "src" | "poster" | "controls" | "autoPlay" | "muted" | "loop" | "children"> & {
+    src: string;
+    /** A still to show before playing; without it the first frame is drawn (`preload="metadata"`). */
+    poster?: string;
+    /** The native controls: a video message or a clip to watch in place. */
+    controls?: boolean;
+    /**
+     * Plays muted, in a loop, inline, with no controls: a GIF-like clip. Off under reduced motion
+     * (the first frame stands still).
+     */
+    autoPlay?: boolean;
+    /** `cover` (default) crops to fill; `contain` letterboxes on the fallback fill. */
+    fit?: "cover" | "contain";
+    /** Display of the duration badge. Default `m:ss` (`h:mm:ss` from an hour). */
+    formatDuration?: (seconds: number) => string;
+    ref?: React.Ref<HTMLVideoElement>;
+};
+/**
+ * A video in the frame: the first frame (or `poster`) while still, a play mark and the duration;
+ * `controls` to watch in place, `autoPlay` for a muted looping clip. Reports its load like an
+ * image, so the Fallback shows until the first frame is there.
+ */
+declare function ThumbnailVideo(props: ThumbnailVideoProps): import("react/jsx-runtime").JSX.Element;
+declare namespace ThumbnailVideo {
+    var displayName: string;
+}
 export type ThumbnailFallbackProps = ImageSlotFallbackProps;
 export declare const Thumbnail: {
     Root: typeof ThumbnailRoot;
     Image: typeof ThumbnailImage;
+    Video: typeof ThumbnailVideo;
     Fallback: (props: ImageSlotFallbackProps) => React.ReactElement;
 };
 export {};

package/dist/components/timeline/Timeline.d.ts

@@ -1,5 +1,5 @@
 import * as React from "react";
-import type { ControlSize, PaletteColor, Tone } from "@/internal/states";
+import type { ControlSize, PaletteColor, Tone } from "../../internal/states";
 export type TimelineRootProps = {
     /** Tier of text, dots and row rhythm. Default `m` (rows 64px). */
     size?: ControlSize;

package/dist/components/tooltip/Tooltip.d.ts

@@ -1,8 +1,9 @@
 import * as React from "react";
-import { type PositionAlign, type PositionSide } from "@/hooks/usePosition";
-import type { ControlSize } from "@/internal/states";
+import { type PositionAlign, type PositionSide } from "../../hooks/usePosition";
+import type { ControlSize } from "../../internal/states";
 export type TooltipSide = PositionSide;
-export type TooltipAlign = PositionAlign;
+/** A tooltip lines up with its trigger by choice: `auto` is for panels that grow. */
+export type TooltipAlign = Exclude<PositionAlign, "auto">;
 export type TooltipProviderProps = {
     /** Show delay in ms for every Tooltip.Root inside. */
     delayDuration?: number;
@@ -27,7 +28,11 @@ declare namespace TooltipRoot {
     var displayName: string;
 }
 export type TooltipTriggerProps = {
-    /** One focusable element: a Button, or a `tabIndex={0}` wrapper around a disabled control. */
+    /**
+     * One element. A focusable one (Button, link) is the trigger as is; a disabled control is wrapped
+     * in a focusable host that takes hover and Tab for it; a non-interactive one (Badge, Avatar,
+     * ProgressCircle, an `Icon` with `label`) becomes a tab stop.
+     */
     children: React.ReactElement;
     ref?: React.Ref<HTMLElement>;
 } & Omit<React.HTMLAttributes<HTMLElement>, "children">;

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

@@ -1,5 +1,5 @@
 import type * as React from "react";
-import type { TextTone } from "@/internal/states";
+import type { TextTone } from "../../internal/states";
 /** Text roles from the foundation (`--prime-text-<role>-*`). */
 export type TypographyRole = "caption" | "body-s" | "body-m" | "body-l" | "title-s" | "title-m" | "title-l" | "heading-s" | "heading-m" | "heading-l" | "display-s" | "display-m" | "display-l" | "code";
 export type TypographyWeight = "regular" | "medium" | "semibold";

package/dist/components/video-note/VideoNote.d.ts

@@ -0,0 +1,27 @@
+import { type MediaPlayerLabels, type MediaPlayerProps, type MediaPlayerRootProps } from "../../internal/mediaPlayer";
+/**
+ * The shared player strings and the circle's own: the description of its disk before playback
+ * (the voice message says the same through its slider's value).
+ */
+export type VideoNoteLabels = MediaPlayerLabels & {
+    /** The disk's description before playback: `{duration}`. */
+    duration: string;
+};
+/**
+ * The shared player props (`MediaPlayerProps`, the same as VoicePlayer's) and what only a video
+ * has: a poster. No waveform (it shows a face, not levels) and no rate (a face is watched at its
+ * own pace; a voice recording is the one listened to faster).
+ */
+export type VideoNoteProps = MediaPlayerRootProps & MediaPlayerProps & {
+    /** A still to show before the video draws its first frame. */
+    poster?: string;
+    labels?: Partial<VideoNoteLabels>;
+};
+/**
+ * A round video message: at rest its first frame (or `poster`) stands still with the play disk
+ * and the duration — nothing plays or loops before a press. Activation plays it with sound with a
+ * progress ring around the circle; at the end it rewinds to the still frame. With `transcript` or
+ * `onTranscribe` a button at the top end of its box opens the text in a block under the circle. A
+ * transfer dims the circle under the transfer disk in its middle.
+ */
+export declare function VideoNote(props: VideoNoteProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/voice-player/VoicePlayer.d.ts

@@ -0,0 +1,33 @@
+import { type MediaPlayerLabels, type MediaPlayerProps, type MediaPlayerRootProps } from "../../internal/mediaPlayer";
+export { getWaveform } from "./getWaveform";
+/** Playback speeds the rate chip cycles through. */
+export type VoicePlayerRate = 1 | 1.5 | 2;
+/** The shared player strings and the voice message's own: the slider and the rate chip. */
+export type VoicePlayerLabels = MediaPlayerLabels & {
+    /** Name of the waveform slider. */
+    seek: string;
+    /** Name of the rate chip: `{rate}` as shown on it. */
+    rate: string;
+};
+/**
+ * The shared player props (`MediaPlayerProps`, the same as VideoNote's) and what only a voice
+ * message has: its waveform (the seek is drawn on it) and the speed chip (a recording of speech is
+ * listened to faster; a round video is watched as a face at its own pace — VideoNote has no rate).
+ */
+export type VoicePlayerProps = MediaPlayerRootProps & MediaPlayerProps & {
+    /** Levels 0…1 from data, resampled to the bars that fit the width. Without it: a calm flat row. */
+    waveform?: readonly number[];
+    /** Playback speed (controlled). */
+    rate?: VoicePlayerRate;
+    /** Initial playback speed (uncontrolled). Default `1`. */
+    defaultRate?: VoicePlayerRate;
+    onRateChange?: (rate: VoicePlayerRate) => void;
+    labels?: Partial<VoicePlayerLabels>;
+};
+/**
+ * A voice message: a round play disk, a waveform that is the seek slider, and the time with the
+ * playback speed. Plays one at a time on the page. With `transcript` or `onTranscribe` a button at
+ * the waveform's end opens the text under the player. As the last part of a chat message it keeps
+ * the meta's room at the end of its time row, or of the transcript while that is open.
+ */
+export declare function VoicePlayer(props: VoicePlayerProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/voice-player/getWaveform.d.ts

@@ -0,0 +1,7 @@
+/**
+ * The waveform of a recorded voice message that has no stored levels: decodes the audio (a `Blob`
+ * or a URL) with the Web Audio API, takes the peak of each of `bars` slices and scales the loudest
+ * to 1 — the same 0…1 array `Composer` hands to `onSendVoice`, ready for `VoicePlayer waveform`.
+ * Rejects when the audio cannot be fetched or decoded, or the browser has no Web Audio.
+ */
+export declare function getWaveform(source: Blob | string, bars?: number): Promise<number[]>;

package/dist/hooks/useEdgeOverflow.d.ts

@@ -1,16 +1,25 @@
 import * as React from "react";
+/** The axes a region scrolls along: only those are measured. */
+export type EdgeOverflowAxis = "vertical" | "horizontal" | "both";
+/**
+ * Edges of a scroll region that hide content: `start` / `end` along the inline axis (logical,
+ * RTL-aware), `top` / `bottom` along the block axis.
+ */
 export type EdgeOverflow = {
     start: boolean;
     end: boolean;
+    top: boolean;
+    bottom: boolean;
 };
 /**
- * Tracks whether a scroll region hides content before / after its visible part along one axis
- * (`ScrollContainer` `fade`, the DataTable edge cue). Measured at most once per frame on scroll,
- * on resize of the region or any child, and when children are added. RTL-aware: the start is the
- * inline start of the region.
+ * Tracks which edges of a scroll region hide content (`ScrollContainer` `edges="fade"`, the
+ * DataTable and Gantt edge shadows). Measured at most once per frame on scroll, on resize of the
+ * region or any child, and when children are added; `null` measures nothing.
  *
- * It also writes how far the hidden content reaches on each side to the region itself
- * (`--edge-start` / `--edge-end`, px), so a fade can be as deep as that distance at most: it grows
- * as the region scrolls away from an edge and melts as it comes back, instead of switching.
+ * With `depth` it also writes how far the hidden content reaches on each side to the region itself
+ * (`--edge-top` / `--edge-bottom` / `--edge-start` / `--edge-end`, px), so a fade is as deep as
+ * that distance at most: it grows as the region scrolls away from an edge and melts as it comes
+ * back. A distance is written capped at `--prime-space-8` (the deepest fade) and only when it
+ * changes, so away from the edges a scroll frame writes nothing and restyles nothing.
  */
-export declare function useEdgeOverflow(ref: React.RefObject<HTMLElement | null>, enabled: boolean, horizontal: boolean): EdgeOverflow;
+export declare function useEdgeOverflow(ref: React.RefObject<HTMLElement | null>, axis: EdgeOverflowAxis | null, depth?: boolean): EdgeOverflow;

package/dist/hooks/useImageStatus.d.ts

@@ -1,19 +1,19 @@
 import * as React from "react";
 /** Load status of an image part as its root sees it; `idle` = no image part mounted. */
 export type ImageStatus = "idle" | "loading" | "loaded" | "error";
-type ImageHandlers = {
-    onLoad?: React.ReactEventHandler<HTMLImageElement>;
-    onError?: React.ReactEventHandler<HTMLImageElement>;
+type MediaHandlers<E extends Element> = {
+    onLoad?: React.ReactEventHandler<E>;
+    onError?: React.ReactEventHandler<E>;
 };
 /**
- * Image side of an image-with-fallback component (Avatar, Thumbnail): tracks the `<img>` load and
- * reports it to the root through `report`, so the root's Fallback shows while loading and after an
- * error. Key the image element by `src`: a new source remounts it and starts again at `loading`.
- * Unmounting the image reports `idle`.
+ * Media side of an image-with-fallback component (Avatar, Thumbnail): tracks the `<img>` (or a
+ * `<video>`'s first frame) and reports it to the root through `report`, so the root's Fallback
+ * shows while loading and after an error. Key the element by `src`: a new source remounts it and
+ * starts again at `loading`. Unmounting the media reports `idle`.
  */
-export declare function useImageStatus(report: (status: ImageStatus) => void, { onLoad, onError }?: ImageHandlers): {
+export declare function useImageStatus<E extends Element = HTMLImageElement>(report: (status: ImageStatus) => void, { onLoad, onError }?: MediaHandlers<E>): {
     status: "loading" | "error" | "loaded";
-    onLoad: (event: React.SyntheticEvent<HTMLImageElement>) => void;
-    onError: (event: React.SyntheticEvent<HTMLImageElement>) => void;
+    onLoad: (event: React.SyntheticEvent<E>) => void;
+    onError: (event: React.SyntheticEvent<E>) => void;
 };
 export {};

package/dist/hooks/useModalLayer.d.ts

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { type DismissReason, type LayerEntry } from "@/internal/overlay/layerStack";
+import { type DismissReason, type LayerEntry } from "../internal/overlay/layerStack";
 export type UseModalLayerOptions = {
     open: boolean;
     /** Escape (`escape`) or a click on the scrim (`scrim`); the owner applies its `closeOn*` props. */
@@ -15,8 +15,10 @@ export type ModalLayer<T extends HTMLElement> = {
  * The mechanics of a modal layer — Modal, Drawer, CommandMenu, the off-canvas Sidebar — in one
  * fixed order: the rest of the page becomes inert, focus moves in and Tab is trapped, document
  * scroll locks, and the layer joins the stack with scrim (`click`) dismissal. On close the page is
- * restored first, then focus returns to the opener, captured at the open transition. Focus always
- * returns, also after a scrim click: the page behind was inert, so the opener is the only place to
- * continue from (foundation §8).
+ * restored first, then focus returns to the opener, captured at the open transition — the control
+ * that was pressed (Safari does not focus a clicked button), else the focused element; a layer a
+ * pointer opened returns focus without the focus ring. Focus always returns, also after a scrim
+ * click: the page behind was inert, so the opener is the only place to continue from (foundation
+ * §8).
  */
 export declare function useModalLayer<T extends HTMLElement = HTMLElement>({ open, onDismiss, }: UseModalLayerOptions): ModalLayer<T>;

package/dist/hooks/usePosition.d.ts

@@ -1,6 +1,15 @@
 import * as React from "react";
 export type PositionSide = "top" | "right" | "bottom" | "left";
-export type PositionAlign = "start" | "center" | "end";
+/** `auto` picks `start` or `end` by the room around the anchor (see `computeFloatingPosition`). */
+export type PositionAlign = "auto" | "start" | "center" | "end";
+/**
+ * Where every anchored panel (Popover, Dropdown, Select, TagSelect, Datepicker, ColorPresets)
+ * opens unless it asks otherwise: below its anchor, lined up with the anchor edge that has the
+ * room — a trigger near the end of the screen lines up its end edge and the panel grows toward
+ * the start, a trigger near the start the other way. It flips to the top only when it does not fit.
+ */
+export declare const DEFAULT_SIDE: PositionSide;
+export declare const DEFAULT_ALIGN: PositionAlign;
 /**
  * Computed length of a CSS custom property on `:root` in px (rem/px values).
  * Falls back when there is no DOM / stylesheet (SSR, jsdom).
@@ -20,6 +29,12 @@ export type ComputeFloatingOptions = {
     matchAnchorWidth: boolean;
     /** Closest the arrow centre may come to a layer corner; computes `arrow` when set. */
     arrowInset?: number;
+    /**
+     * The box the layer must stay in (viewport px), intersected with the viewport: a scroll region
+     * whose sticky parts the layer must not cover. Flipping, the cross-axis clamp and the size limits
+     * use it instead of the viewport.
+     */
+    boundary?: Pick<DOMRectReadOnly, "top" | "left" | "right" | "bottom">;
 };
 export type ComputedFloatPosition = {
     top: number;

package/dist/hooks/usePresence.d.ts

@@ -1,6 +1,6 @@
 import * as React from "react";
 export type PresenceState = "open" | "closed";
-export type MotionDurationToken = "fast" | "base" | "slow";
+export type MotionDurationToken = "xfast" | "fast" | "base" | "slow";
 export declare function prefersReducedMotion(): boolean;
 /** `--prime-motion-duration-<token>` in ms, read from the document (respects theme overrides). */
 export declare function motionDurationMs(token: MotionDurationToken): number;

package/dist/hooks/useSwipeDismiss.d.ts

@@ -1,34 +1,26 @@
 import * as React from "react";
-/** The direction a panel leaves in: toward the screen edge it came from. */
-export type SwipeDirection = "down" | "left" | "right";
 export type UseSwipeDismissOptions = {
     enabled: boolean;
-    direction: SwipeDirection;
     onDismiss: () => void;
-    /** Selector of the zones a drag starts from by any pointer: the grab handle, the header. */
+    /** Selector of the zones a drag starts from: the grab handle, the header. */
     handle: string;
     /**
-     * A touch drag may also start anywhere else in the panel (side drawers, whose content scrolls
-     * across the swipe axis). Mouse and pen drags start from `handle` only, so text stays selectable.
-     */
-    touchAnywhere?: boolean;
-    /**
-     * How far out the panel is, 0 (at rest) … 1 (off its edge), on every move and on release (0 back,
-     * 1 out) — for parts that follow the drag, such as the scrim's opacity.
+     * How far down the panel is, 0 (at rest) … 1 (off the bottom edge), on every move and on release
+     * (0 back, 1 out) — for parts that follow the drag, such as the scrim's opacity.
      */
     onProgress?: (progress: number) => void;
 };
 /** The custom property the panel CSS maps onto its own axis (`transform`). */
 export declare const SWIPE_OFFSET_VAR = "--swipe-offset";
 /**
- * Swipe-to-close for a panel at a screen edge (Drawer, a bottom sheet). Attach `onPointerDown` to
- * the panel: a drag from `handle` (or, with `touchAnywhere`, any touch) along the closing axis moves
- * the panel with the pointer through `--swipe-offset` and `data-swiping`, which its CSS maps onto
- * `transform`. On release the panel closes past 30% of its size or on a flick — gliding the rest of
- * the way out from the release point (`data-swipe-dismissed`) — otherwise it glides back;
- * `onProgress` follows along. A drag across the axis is left to scrolling. The gesture is an extra
- * way out: the panel keeps its close button and Escape (WCAG 2.5.7).
+ * Swipe-down-to-close for a panel at the bottom edge (Sheet, Modal and floating layers as phone
+ * sheets). Attach `onPointerDown` to the panel: a drag down from `handle` moves the panel with the
+ * pointer through `--swipe-offset` and `data-swiping`, which its CSS maps onto `transform`. On
+ * release the panel closes past 30% of its height or on a flick — gliding the rest of the way out
+ * from the release point (`data-swipe-dismissed`) — otherwise it glides back; `onProgress` follows
+ * along. A sideways drag is left to scrolling. The gesture is an extra way out: the panel keeps
+ * Escape and the scrim (WCAG 2.5.7).
  */
-export declare function useSwipeDismiss({ enabled, direction, onDismiss, handle, touchAnywhere, onProgress, }: UseSwipeDismissOptions): {
+export declare function useSwipeDismiss({ enabled, onDismiss, handle, onProgress, }: UseSwipeDismissOptions): {
     onPointerDown: (event: React.PointerEvent<HTMLElement>) => void;
 };

package/dist/hooks/useTokenValue.d.ts

@@ -0,0 +1,10 @@
+/** A length token of the kit: `--prime-space-7`, `--prime-control-m-height`, `--prime-radius-l`. */
+export type LengthToken = `--prime-${string}`;
+/**
+ * The value of a length token in px (rem and px tokens), read from the document, for geometry that
+ * CSS cannot take — SVG coordinates, a canvas, a virtualizer's row height. Follows a theme or a
+ * density change: re-reads when `data-theme`, `class` or `style` changes on `<html>` or any
+ * element below it, and when the viewport is resized (rem follows the root font size). Without a
+ * DOM, or for a token that is not a length, returns `fallbackPx`.
+ */
+export declare function useTokenValue(token: LengthToken, fallbackPx?: number): number;

package/dist/hooks/useUploadQueue.d.ts

@@ -0,0 +1,60 @@
+import type { TransferState } from "../internal/transfer";
+/** One file of an upload queue. */
+export type UploadItem<TResult = unknown> = {
+    /** Unique within the queue; stable for the life of the item. */
+    id: string;
+    file: File;
+    /**
+     * Where the file is on its way — waiting for a slot, sending, sent, or failed: the transfer
+     * states of the kit (`TransferState` without `remote`), so an item maps onto a message part as
+     * is (`transfer={item.status}`, `transferProgress={item.progress}`).
+     */
+    status: Exclude<TransferState, "remote">;
+    /** Share sent, 0…1; `1` once done. Kept as it was when an upload fails. */
+    progress: number;
+    /** Why the upload failed: the rejection's `Error.message`, or the rejected string. Empty when unknown. */
+    error?: string;
+    /** What `upload` resolved with, once done. */
+    result?: TResult;
+    /**
+     * A local object URL of an image or video file (by MIME type, else by the name's extension),
+     * drawn while it uploads; revoked when the item leaves.
+     */
+    preview?: string;
+};
+export type UploadContext = {
+    /** Aborted when the item is removed (or the queue unmounts): stop the request. */
+    signal: AbortSignal;
+    /** Reports the share sent, 0…1. */
+    onProgress: (progress: number) => void;
+};
+export type UploadQueueOptions<TResult> = {
+    /**
+     * Sends one file. Resolve with what the server answered (kept as `result`); reject to mark the
+     * item failed — the rejection's message is shown as the reason.
+     */
+    upload: (file: File, context: UploadContext) => Promise<TResult>;
+    /** How many files upload at once; the rest wait as `queued`. Default 3. */
+    concurrency?: number;
+};
+export type UploadQueue<TResult = unknown> = {
+    /** Every file in the order it was added. */
+    items: readonly UploadItem<TResult>[];
+    /** Queues files and returns their new items (ids to place them in your own list). */
+    add: (files: readonly File[]) => UploadItem<TResult>[];
+    /** Queues a failed file again. */
+    retry: (id: string) => void;
+    /** Takes a file out: aborts its upload if it is in flight and revokes its preview. */
+    remove: (id: string) => void;
+    /** Takes every file out, aborting what is in flight. */
+    clear: () => void;
+    /** Puts a file in front of `beforeId` (`null` = last): the order of the set (an album, tiles). */
+    move: (id: string, beforeId: string | null) => void;
+};
+/**
+ * An upload queue for FileUpload: files wait their turn, `concurrency` of them go
+ * at once through your `upload`, each with its progress, its error and a retry. Removing a file
+ * aborts its request through the signal; image and video files carry a local preview URL, revoked when the
+ * item leaves or the queue unmounts.
+ */
+export declare function useUploadQueue<TResult = unknown>(options: UploadQueueOptions<TResult>): UploadQueue<TResult>;

package/dist/hooks/useVirtualRows.d.ts

@@ -0,0 +1,74 @@
+import * as React from "react";
+/** A row to render: its index, top offset and height in px. */
+export type VirtualRow = {
+    index: number;
+    start: number;
+    size: number;
+};
+export type UseVirtualRowsOptions = {
+    /** Number of rows. */
+    count: number;
+    /** The scroll container the rows scroll in (vertically). */
+    scrollRef: React.RefObject<HTMLElement | null>;
+    /** Stable key of a row: a measured height stays with its row when rows reorder. */
+    getKey: (index: number) => React.Key;
+    /** Height before the row is measured, px. */
+    estimateSize: (index: number) => number;
+    /**
+     * Rows of one group share a measured height until each is measured itself (rows with the same
+     * lane count, the same template): one measurement corrects the estimate for the whole group.
+     */
+    getGroup?: (index: number) => React.Key;
+    /**
+     * Distance from the top of the scroller's content to the first row (a sticky head above, content
+     * before the list), px — or a function read on every scroll, for a distance that changes.
+     */
+    offset?: number | (() => number);
+    /** Extra rows rendered above and below the visible ones. Default 6. */
+    overscan?: number;
+    /** Rows rendered whatever the scroll position (a focused row, a row being dragged in). */
+    pinned?: readonly number[];
+    /** Rows rendered while the scroller has no size yet (no layout, first paint). Default 30. */
+    initialCount?: number;
+    /**
+     * Which end the list opens at: `end` for a list that opens at its end (a chat) — the first batch
+     * and the first range come from the end, so the first paint shows the rows the scroller lands on.
+     */
+    initialAlign?: "start" | "end";
+    /**
+     * Sticky header rows, ascending (date separators): the last one at or above the first rendered
+     * row stays rendered, so it can stick while its rows scroll under it.
+     */
+    sticky?: readonly number[];
+};
+export type VirtualRows = {
+    /** Rows to render, by index: the visible range, the overscan and the pinned rows. */
+    rows: VirtualRow[];
+    /** Height of all rows, px: the size of the scrolled content. */
+    totalSize: number;
+    /** Top offset of a row (rendered or not), px from the first row. */
+    startOf: (index: number) => number;
+    /** Callback ref for the element of row `index`: measures it and follows its size. */
+    measure: (index: number) => (node: HTMLElement | null) => void;
+};
+/**
+ * Vertical row virtualization inside a component's own scroller: renders the rows that intersect
+ * the viewport plus an overscan, places them by exact offsets (estimated, then measured with a
+ * ResizeObserver, each size cached by row key) and keeps the total height right, so the scrollbar
+ * never jumps. Re-renders only when the rendered range changes, at most once per frame. The range
+ * follows its rows by key: rows inserted above (history loaded) keep the same rows rendered — the
+ * same DOM nodes — and a range that reaches the last row grows with rows appended at the end. An
+ * estimate that changes never moves the range: it is read from the scroll position.
+ */
+export declare function useVirtualRows({ count, scrollRef, getKey, estimateSize, getGroup, offset, overscan, pinned, initialCount, initialAlign, sticky, }: UseVirtualRowsOptions): VirtualRows;
+/**
+ * For rows laid out in flow (table rows, listbox options) rather than placed by offset: each
+ * rendered row with the empty space before it, and the space after the last one, px. Spacer
+ * elements of those heights stand for the rows not rendered.
+ */
+export declare function rowGaps({ rows, totalSize }: Pick<VirtualRows, "rows" | "totalSize">): {
+    rows: (VirtualRow & {
+        gap: number;
+    })[];
+    end: number;
+};