@jfrader/ui 0.5.0 → 0.5.1

package/dist/{toast-stack-DqrAzdg5.js → toast-stack-B40VpS4M.js}

@@ -1,8 +1,8 @@
 'use client';
 import { r as e, t } from "./sx-Dx9JUKp5.js";
 import { r as n } from "./media-8yrN85VT.js";
-import { t as r } from "./button-C92uYFJW.js";
-import { i, o as a, r as o, t as s } from "./toast-BHxI32ZA.js";
+import { t as r } from "./button-NLY0h6EJ.js";
+import { i, o as a, r as o, t as s } from "./toast-B7wo3sX1.js";
 import { useEffect as c, useId as l, useLayoutEffect as u, useRef as d, useState as f } from "react";
 import { vars as p } from "@jfrader/tokens/vars";
 import { jsx as m, jsxs as h } from "@emotion/react/jsx-runtime";
@@ -98,8 +98,22 @@ function b({ ref: e, className: n, sx: i, variant: s = "stacked", position: b =
 		Z.forEach((e, t) => W.current.set(t, e));
 		for (let e of W.current.keys()) G.some((t) => t.id === e) || W.current.delete(e);
 	}), K.length && (X = J ? `calc(${Q}px + ${K.length - 1} * ${p.space[2]})` : `calc(${H[K[0].id] ?? 0}px + ${Math.min(K.length, q) - 1} * ${p.space[3]})`);
-	let $ = Math.max(0, K.length - q);
-	return /* @__PURE__ */ m(t, {
+	let $ = Math.max(0, K.length - q), re = K[0]?.id;
+	return c(() => {
+		let e = N.current, t = P.current;
+		if (!e || !t || R) return;
+		let n = !1, r = typeof t.getAnimations == "function" ? t.getAnimations() : [];
+		return Promise.allSettled(r.map((e) => e.finished)).then(() => {
+			n || (e.scrollTop = e.scrollHeight);
+		}), () => {
+			n = !0;
+		};
+	}, [
+		X,
+		re,
+		J,
+		R
+	]), /* @__PURE__ */ m(t, {
 		className: n,
 		styles: g,
 		sx: i,

package/dist/toast-stack.js

@@ -1,2 +1,2 @@
 'use client';
-export { t as ToastStack } from "./toast-stack-DqrAzdg5.js";
+export { t as ToastStack } from "./toast-stack-B40VpS4M.js";

package/dist/toast.js

@@ -1,2 +1,2 @@
 'use client';
-export { n as Toast, a as useToast } from "./toast-BHxI32ZA.js";
+export { n as Toast, a as useToast } from "./toast-B7wo3sX1.js";

package/dist/{toggle-group-fcjzpifI.js → toggle-group-B2fpFZwV.js}

@@ -123,7 +123,7 @@ function D({ ref: e, type: n = "single", value: r, defaultValue: i, onValueChang
 				ref: P,
 				role: "group",
 				"aria-label": b ?? C,
-				"aria-disabled": g || void 0,
+				"aria-disabled": g ? !0 : k["aria-disabled"],
 				"data-ui": "toggle-group-root",
 				"data-type": n,
 				"data-orientation": u,

package/dist/toggle-group.js

@@ -1,2 +1,2 @@
 'use client';
-export { t as ToggleGroup } from "./toggle-group-fcjzpifI.js";
+export { t as ToggleGroup } from "./toggle-group-B2fpFZwV.js";

package/dist/tooltip-BvgVTCTN.js

@@ -0,0 +1,120 @@
+'use client';
+import { r as e, t } from "./sx-Dx9JUKp5.js";
+import { t as n } from "./use-controlled-state-DpeVQZNR.js";
+import { t as r } from "./trigger-style-B1KVC8O1.js";
+import { t as i } from "./overlay-layer-qEbpEtb8.js";
+import { t as a } from "./overlay-portal-C4JZFq2M.js";
+import { t as o } from "./use-overlay-floating-Bx2jBKAA.js";
+import { createContext as s, useContext as c, useMemo as l, useState as u } from "react";
+import { vars as d } from "@jfrader/tokens/vars";
+import { jsx as f } from "@emotion/react/jsx-runtime";
+import { useDismiss as p, useFocus as m, useHover as h, useInteractions as g, useMergeRefs as _, useRole as v } from "@floating-ui/react";
+//#region src/components/tooltip/tooltip.tsx
+var y = 300, b = 100, x = s(null);
+function S(e) {
+	let t = c(x);
+	if (!t) throw Error(`Tooltip.${e} must be rendered inside <Tooltip>.`);
+	return t;
+}
+var C = e({
+	boxSizing: "border-box",
+	backgroundColor: d.color.bgSoft,
+	border: `1px solid ${d.color.border}`,
+	borderRadius: d.radius.sm,
+	boxShadow: d.shadow.raised,
+	padding: `${d.space[1]} ${d.space[2]}`,
+	maxInlineSize: `min(260px, calc(100vw - 2 * ${d.space[4]}))`,
+	overflowWrap: "anywhere",
+	color: d.color.text,
+	fontFamily: d.font.sans,
+	fontSize: d.textSize.sm,
+	lineHeight: d.lineHeight.base
+});
+function w({ open: e, defaultOpen: t = !1, onOpenChange: r, placement: i = "top", openDelay: a = y, closeDelay: s = b, children: c }) {
+	let [u = !1, d] = n(e, t, r), { refs: _, floatingStyles: S, context: C } = o({
+		open: u,
+		placement: i,
+		onOpenChange: d
+	}), w = h(C, {
+		delay: {
+			open: a,
+			close: s
+		},
+		move: !1
+	}), T = m(C), E = p(C, { escapeKey: !0 }), D = v(C, { role: "tooltip" }), { getReferenceProps: O, getFloatingProps: k } = g([
+		w,
+		T,
+		E,
+		D
+	]), A = l(() => ({
+		open: u,
+		refs: _,
+		floatingStyles: S,
+		getReferenceProps: O,
+		getFloatingProps: k
+	}), [
+		u,
+		_,
+		S,
+		O,
+		k
+	]);
+	return /* @__PURE__ */ f(x.Provider, {
+		value: A,
+		children: c
+	});
+}
+function T(e) {
+	return /* @__PURE__ */ f(i, { children: /* @__PURE__ */ f(w, { ...e }) });
+}
+T.displayName = "Tooltip";
+function E({ ref: e, "aria-describedby": n, className: i, sx: a, ...o }) {
+	let { refs: s, getReferenceProps: c } = S("Trigger"), l = _([s.setReference, e]), u = c(o), d = [n, u["aria-describedby"]].filter(Boolean).join(" ") || void 0;
+	return /* @__PURE__ */ f(t, {
+		className: i,
+		styles: r,
+		sx: a,
+		children: (e) => /* @__PURE__ */ f("button", {
+			type: "button",
+			...u,
+			ref: l,
+			"aria-describedby": d,
+			"data-ui": "tooltip-trigger",
+			className: e
+		})
+	});
+}
+E.displayName = "Tooltip.Trigger";
+function D({ ref: e, style: n, className: r, sx: i, dir: a, ...o }) {
+	let { refs: s, floatingStyles: c, getFloatingProps: l } = S("Content"), d = _([s.setFloating, e]), [p] = u(() => {
+		let e = s.domReference.current;
+		return e?.ownerDocument.defaultView?.getComputedStyle(e).direction;
+	}), { tabIndex: m, ...h } = l(o);
+	return /* @__PURE__ */ f(t, {
+		className: r,
+		styles: C,
+		sx: i,
+		children: (e) => /* @__PURE__ */ f("div", {
+			...h,
+			ref: d,
+			dir: a ?? p,
+			"data-ui": "tooltip",
+			style: {
+				...n,
+				...c
+			},
+			className: e
+		})
+	});
+}
+function O(e) {
+	let { open: t } = S("Content");
+	return t ? /* @__PURE__ */ f(a, { children: /* @__PURE__ */ f(D, { ...e }) }) : null;
+}
+O.displayName = "Tooltip.Content";
+var k = Object.assign(T, {
+	Trigger: E,
+	Content: O
+});
+//#endregion
+export { k as t };

package/dist/tooltip.js

@@ -1,2 +1,2 @@
 'use client';
-export { t as Tooltip } from "./tooltip-CkeiW9C1.js";
+export { t as Tooltip } from "./tooltip-BvgVTCTN.js";

package/dist/{tree-view-C2liIxqy.js → tree-view-j8qLqkb_.js}

@@ -84,7 +84,11 @@ var re = 500, ie = {
 	},
 	"&[data-open=\"true\"]::after": { transform: "rotate(90deg)" },
 	"&:dir(rtl)[data-open=\"true\"]::after": { transform: "rotate(-90deg)" },
-	[a]: { "&[data-branch=\"true\"]::after": { transitionDuration: "0s" } }
+	[a]: { "&[data-branch=\"true\"]::after": { transitionDuration: "0s" } },
+	[i]: { "&[data-branch=\"true\"]::after": {
+		forcedColorAdjust: "none",
+		color: "CanvasText"
+	} }
 }), fe = e({
 	listStyle: "none",
 	margin: 0,

package/dist/tree-view.js

@@ -1,2 +1,2 @@
 'use client';
-export { t as TreeView } from "./tree-view-C2liIxqy.js";
+export { t as TreeView } from "./tree-view-j8qLqkb_.js";

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

@@ -19,7 +19,7 @@ export interface CheckboxProps extends Omit<ComponentPropsWithRef<'input'>, 'siz
         description?: CheckboxPartProps;
     };
 }
-export declare function Checkbox({ ref, label, description, indeterminate, size, onChange, onCheckedChange, slotProps, className, sx, 'aria-labelledby': ariaLabelledByProp, 'aria-describedby': ariaDescribedByProp, ...rest }: CheckboxProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare function Checkbox({ ref, label, description, indeterminate, size, onChange, onCheckedChange, slotProps, className, sx, dir, 'aria-labelledby': ariaLabelledByProp, 'aria-describedby': ariaDescribedByProp, ...rest }: CheckboxProps): import("@emotion/react/jsx-runtime").JSX.Element;
 export declare namespace Checkbox {
     var displayName: string;
 }

package/dist/types/components/command-palette/command-palette.d.ts

@@ -42,7 +42,7 @@ declare function CommandPaletteInput({ ref, onChange, onKeyDown, className, sx,
 declare function CommandPaletteList({ ref, onMouseDown, children, className, sx, ...rest }: CommandPaletteListProps): import("@emotion/react/jsx-runtime").JSX.Element;
 declare function CommandPaletteEmpty({ ref, children, className, sx, ...rest }: CommandPaletteEmptyProps): import("@emotion/react/jsx-runtime").JSX.Element | null;
 declare function CommandPaletteGroup({ ref, label, children, 'aria-labelledby': externalLabelledBy, className, sx, ...rest }: CommandPaletteGroupProps): import("@emotion/react/jsx-runtime").JSX.Element;
-declare function CommandPaletteItem({ ref, value, onSelect, keywords, onClick, children, className, sx, ...rest }: CommandPaletteItemProps): import("@emotion/react/jsx-runtime").JSX.Element;
+declare function CommandPaletteItem({ ref, value, onSelect, keywords, 'aria-disabled': ariaDisabled, onClick, children, className, sx, ...rest }: CommandPaletteItemProps): import("@emotion/react/jsx-runtime").JSX.Element;
 export declare const CommandPalette: typeof CommandPaletteRoot & {
     Trigger: typeof CommandPaletteTrigger;
     Content: typeof CommandPaletteContent;

package/dist/types/components/comment-thread/comment-thread.d.ts

@@ -0,0 +1,118 @@
+import { type ComponentPropsWithRef, type ReactNode } from 'react';
+import { type SxProps } from '../../styling/sx';
+import { type ThreadAuthor, type ThreadComment, type ThreadReaction } from './thread-core';
+import { type ThreadButtonProps, type ThreadPartProps, type ThreadReactionLabels, type ThreadSize, type ThreadTextareaProps } from './thread-parts';
+export type { ThreadComment } from './thread-core';
+export type CommentAuthor = ThreadAuthor;
+export type CommentReaction = ThreadReaction;
+export type CommentThreadSize = ThreadSize;
+export type CommentThreadHeadingLevel = 2 | 3 | 4 | 5 | 6;
+export type CommentThreadPartProps = ThreadPartProps;
+/** What a proposed tree changes; `parentId` is where a reply actually attached after `maxDepth`. */
+export type CommentThreadEvent = {
+    type: 'reply';
+    comment: ThreadComment;
+    parentId: string | null;
+} | {
+    type: 'edit';
+    id: string;
+    body: string;
+} | {
+    type: 'delete';
+    id: string;
+} | {
+    type: 'react';
+    id: string;
+    emoji: string;
+    added: boolean;
+};
+export interface CommentThreadLabels extends ThreadReactionLabels {
+    /** Region name when there is no `title`, `aria-label` or `aria-labelledby`. */
+    thread: string;
+    /** Accessible name of the new-comment field. */
+    composer: string;
+    placeholder: string;
+    resolve: string;
+    resolved: string;
+    reopen: string;
+    empty: string;
+    reply: string;
+    edit: string;
+    delete: string;
+    cancel: string;
+    send: string;
+    save: string;
+    edited: string;
+    /** Accessible name of the edit field. */
+    editComment: string;
+    /** Prompt that names the inline delete confirmation. */
+    deleteConfirm: string;
+    deletedText: string;
+    /** Name of a deleted comment's article. */
+    deletedComment: string;
+    hideReplies: string;
+    cancelReply: string;
+    /** Name of the mention suggestions list. */
+    mentions: string;
+    invalidTime: string;
+    /** Accessible name of a reply field. */
+    replyingTo: (name: string) => string;
+    showReplies: (count: number) => string;
+    commentCount: (count: number) => string;
+    peopleCount: (count: number) => string;
+    /** Announced when comments from others arrive. */
+    newComments: (count: number) => string;
+}
+type CommentThreadPart = 'header' | 'title' | 'list' | 'item' | 'article' | 'time' | 'body' | 'replies' | 'actions' | 'reaction' | 'composer' | 'resolved' | 'status';
+export type CommentThreadSlotProps = Partial<Record<CommentThreadPart, CommentThreadPartProps>> & {
+    /** Extra Textarea props for every composer and editor; handlers are composed with the thread's. */
+    textarea?: ThreadTextareaProps;
+    /** Extra Button props for every Send/Save button; `onClick` runs first and may `preventDefault()`. */
+    send?: ThreadButtonProps;
+};
+export interface CommentThreadProps extends Omit<ComponentPropsWithRef<'section'>, 'defaultValue' | 'onChange' | 'children' | 'title'>, SxProps {
+    /** Comment tree (controlled). Treated as immutable. */
+    value?: readonly ThreadComment[];
+    defaultValue?: readonly ThreadComment[];
+    /** The full proposed tree plus what changed. */
+    onValueChange?: (next: ThreadComment[], event: CommentThreadEvent) => void;
+    /** Whose comments are editable; authorization stays on the server. */
+    currentUser: CommentAuthor;
+    /** Mention candidates; defaults to every author plus `currentUser`. Deduped by id. */
+    people?: readonly CommentAuthor[];
+    resolvedValue?: boolean;
+    defaultResolvedValue?: boolean;
+    onResolvedValueChange?: (resolved: boolean) => void;
+    /** Ids whose replies are shown (controlled). */
+    expandedValue?: readonly string[];
+    /** Defaults to every comment that has replies at first render. */
+    defaultExpandedValue?: readonly string[];
+    onExpandedValueChange?: (ids: string[]) => void;
+    title?: ReactNode;
+    headingLevel?: CommentThreadHeadingLevel;
+    /** Emoji offered by the picker, deduped; `[]` removes the picker. */
+    reactions?: readonly string[];
+    /** Maximum reply edges below a root comment; deeper replies attach to the deepest allowed ancestor. */
+    maxDepth?: number;
+    /** Reference instant in epoch ms for relative times. Pass the same value on server and client. */
+    now: number;
+    locale?: Intl.LocalesArgument;
+    /** IANA zone for full dates. */
+    timeZone?: string;
+    /** Id for a newly submitted comment; called once per accepted submit interaction. */
+    getNewId?: () => string;
+    placeholder?: string;
+    /** Accessible name of the new-comment field; defaults to `labels.composer`. */
+    composerLabel?: string;
+    /** Blocks every mutation. */
+    disabled?: boolean;
+    /** Hides mutation controls; reply disclosure still works. */
+    readOnly?: boolean;
+    size?: CommentThreadSize;
+    labels?: Partial<CommentThreadLabels>;
+    slotProps?: CommentThreadSlotProps;
+}
+export declare function CommentThread({ ref, value, defaultValue, onValueChange, currentUser, people: peopleProp, resolvedValue, defaultResolvedValue, onResolvedValueChange, expandedValue, defaultExpandedValue, onExpandedValueChange, title, headingLevel, reactions: offeredProp, maxDepth: maxDepthProp, now, locale, timeZone, getNewId, placeholder, composerLabel, disabled, readOnly, size, labels: labelProps, slotProps, className, sx, onFocus, onBlur, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, 'aria-describedby': ariaDescribedBy, ...rest }: CommentThreadProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare namespace CommentThread {
+    var displayName: string;
+}

package/dist/types/components/comment-thread/index.d.ts

@@ -0,0 +1 @@
+export { CommentThread, type CommentAuthor, type CommentReaction, type CommentThreadEvent, type CommentThreadHeadingLevel, type CommentThreadLabels, type CommentThreadPartProps, type CommentThreadProps, type CommentThreadSize, type CommentThreadSlotProps, type ThreadComment, } from './comment-thread';

package/dist/types/components/comment-thread/thread-core.d.ts

@@ -0,0 +1,96 @@
+export interface ThreadAuthor {
+    /** Stable identity: ownership, reactions and mention candidates compare it. */
+    id: string;
+    name: string;
+    /** Portrait URL; initials are shown without it. */
+    avatar?: string;
+}
+export interface ThreadReaction {
+    emoji: string;
+    /** Ids of the people who reacted. */
+    users: readonly string[];
+}
+/** Epoch ms, a Date, or an ISO date-time with `Z` or an explicit offset. */
+export type ThreadTimestamp = Date | string | number;
+export interface ThreadMessage {
+    /** Unique, stable identity across updates. */
+    id: string;
+    author: ThreadAuthor;
+    /** Plain text, rendered as escaped text with its line breaks. */
+    body: string;
+    createdAt: ThreadTimestamp;
+    edited?: boolean;
+    deleted?: boolean;
+    reactions?: readonly ThreadReaction[];
+}
+export interface ThreadComment extends ThreadMessage {
+    replies?: readonly ThreadComment[];
+}
+export interface ThreadEntry {
+    comment: ThreadComment;
+    parentId: string | null;
+    /** Reply edges below a root comment; roots are 0. */
+    depth: number;
+}
+export interface ThreadIndex {
+    entries: ReadonlyMap<string, ThreadEntry>;
+    /** Ids in reading (depth-first) order. */
+    order: readonly string[];
+    duplicates: readonly string[];
+    /** True when a comment appears among its own replies; the repeat is skipped. */
+    cyclic: boolean;
+}
+export interface ThreadFormatters {
+    relative: Intl.RelativeTimeFormat;
+    full: Intl.DateTimeFormat;
+    number: Intl.NumberFormat;
+    plural: Intl.PluralRules;
+    /** Joins names ("Ada and Grace"). */
+    people: Intl.ListFormat;
+    /** Joins short facts ("4 comments, 2 people"). */
+    facts: Intl.ListFormat;
+}
+export declare const DEFAULT_TIME_ZONE = "UTC";
+export declare const validEpoch: (epoch: number) => boolean;
+export declare function toEpoch(value: ThreadTimestamp): number | null;
+/** Signed relative text ("5 minutes ago", "in 2 days", "now") from the caller-owned clock. */
+export declare function relativeTime(epoch: number, now: number, format: Intl.RelativeTimeFormat): string;
+/** Formatters for the requested locale and zone; unusable values fall back and are reported. */
+export declare function resolveFormatters(owner: string, locale: Intl.LocalesArgument, timeZone: string): {
+    formatters: ThreadFormatters;
+    problems: string[];
+};
+/** "1 reply" / "3 replies" through the locale's plural rules and digits. */
+export declare const formatCount: (format: ThreadFormatters, count: number, one: string, other: string) => string;
+/** Every comment by id with its parent and depth; repeated ids keep their first occurrence. */
+export declare function indexThread(roots: readonly ThreadComment[]): ThreadIndex;
+/**
+ * Replaces (or, for `null`, removes) the first comment with `id`, copying only the path to it.
+ * Returns the same array when nothing changed, so callers can skip no-op events.
+ */
+export declare function updateComment(comments: readonly ThreadComment[], id: string, update: (comment: ThreadComment) => ThreadComment | null, path?: ReadonlySet<ThreadComment>): readonly ThreadComment[];
+/**
+ * The comment a reply to `parentId` attaches to: the parent itself while the reply stays within
+ * `maxDepth` reply edges, otherwise its ancestor at depth `maxDepth - 1`; `null` adds a root
+ * comment (always for `maxDepth` 0). `undefined` when the parent is unknown.
+ */
+export declare function resolveReplyParent(index: ThreadIndex, parentId: string | null, maxDepth: number): string | null | undefined;
+export declare function appendComment(comments: readonly ThreadComment[], parentId: string | null, comment: ThreadComment): readonly ThreadComment[];
+/** New body for a live comment; unchanged or deleted comments are left alone. */
+export declare function editComment(comments: readonly ThreadComment[], id: string, body: string): readonly ThreadComment[];
+/**
+ * A leaf disappears; a comment with replies becomes a tombstone that keeps its id, author, time
+ * and replies but drops its body and reactions.
+ */
+export declare function deleteComment(comments: readonly ThreadComment[], id: string): readonly ThreadComment[];
+/** Adds or removes `userId` from the `emoji` reaction; empty reactions are dropped. */
+export declare function toggleReaction(reactions: readonly ThreadReaction[], emoji: string, userId: string): {
+    reactions: ThreadReaction[];
+    added: boolean;
+};
+export declare function reactToComment(comments: readonly ThreadComment[], id: string, emoji: string, userId: string): {
+    comments: readonly ThreadComment[];
+    added: boolean;
+};
+/** First occurrence of each value, keyed by `key`. */
+export declare function uniqueBy<T>(items: readonly T[], key: (item: T) => string): T[];

package/dist/types/components/comment-thread/thread-parts.d.ts

@@ -0,0 +1,114 @@
+import { type KeyboardEvent, type ReactNode } from 'react';
+import { type Interpolation, type SerializedStyles, type Theme } from '../../styling/css';
+import { type ButtonProps } from '../button';
+import { type TextareaProps } from '../textarea';
+import { type ThreadAuthor, type ThreadFormatters, type ThreadReaction } from './thread-core';
+export type ThreadSize = 'sm' | 'md';
+export interface ThreadPartProps {
+    className?: string;
+    css?: Interpolation<Theme>;
+}
+/** Textarea props a consumer may add; the thread owns value, change and mention wiring. */
+export type ThreadTextareaProps = Omit<TextareaProps, 'value' | 'defaultValue' | 'onValueChange' | 'label' | 'children'>;
+/** Button props a consumer may add to a submit button; the thread owns its label and state. */
+export type ThreadButtonProps = Omit<ButtonProps, 'children' | 'loading' | 'type' | 'render'>;
+export declare const isComposing: (event: KeyboardEvent<HTMLElement>) => boolean;
+export interface ThreadTimeProps {
+    epoch: number | null;
+    /** Caller-owned clock; `null` shows the full date instead of a relative one. */
+    now: number | null;
+    formatters: ThreadFormatters;
+    invalidLabel: string;
+    id: string;
+    /** Id of the hidden full date, for the message's `aria-describedby`. */
+    fullId: string;
+    ui: string;
+    part?: ThreadPartProps;
+}
+export declare function ThreadTime({ epoch, now, formatters, invalidLabel, id, fullId, ui: owner, part }: ThreadTimeProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export interface ThreadMessageViewProps {
+    ui: string;
+    author: ThreadAuthor;
+    /** Replaces the author/time name, e.g. for a deleted message. */
+    label?: string;
+    epoch: number | null;
+    now: number | null;
+    formatters: ThreadFormatters;
+    invalidTimeLabel: string;
+    /** Text after the time, e.g. "(edited)". */
+    meta?: ReactNode;
+    size: ThreadSize;
+    baseId: string;
+    messageId: string;
+    /** Body, editor and footer rows. */
+    children: ReactNode;
+    slots?: {
+        article?: ThreadPartProps;
+        time?: ThreadPartProps;
+    };
+}
+export declare function ThreadMessageView({ ui: owner, author, label, epoch, now, formatters, invalidTimeLabel, meta, size, baseId, messageId, children, slots, }: ThreadMessageViewProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export interface ThreadReactionLabels {
+    addReaction: string;
+    closeReactions: string;
+    reactions: string;
+    reactWith: (emoji: string) => string;
+    reactionCount: (emoji: string, count: number, mine: boolean) => string;
+}
+export interface ThreadReactionsProps {
+    ui: string;
+    reactions: readonly ThreadReaction[];
+    /** Emoji offered by the picker; empty hides the picker. */
+    offered: readonly string[];
+    currentUserId: string;
+    formatters: ThreadFormatters;
+    labels: ThreadReactionLabels;
+    /** Mutations hidden: chips render as text. */
+    readOnly: boolean;
+    disabled: boolean;
+    pickerOpen: boolean;
+    onPickerOpenChange: (open: boolean) => void;
+    onToggle: (emoji: string) => void;
+    pickerId: string;
+    part?: ThreadPartProps;
+}
+/**
+ * Picker keyboard: Left/Right (mirrored in RTL) wrap across the emoji, Home/End jump; Escape and
+ * a chosen emoji close it and return focus to the add button. Pressing outside leaves it open.
+ */
+export declare function ThreadReactions({ ui: owner, reactions, offered, currentUserId, formatters, labels, readOnly, disabled, pickerOpen, onPickerOpenChange, onToggle, pickerId, part, }: ThreadReactionsProps): import("@emotion/react/jsx-runtime").JSX.Element | null;
+export interface ThreadComposerProps {
+    ui: string;
+    draft: string;
+    onDraftChange: (draft: string) => void;
+    /** Called with the trimmed text for a non-empty, non-pending submit. */
+    onSubmit: (text: string, container: HTMLElement) => void;
+    /** The cancel button, and Escape (with no suggestions open) unless `cancelOnEscape` is false. */
+    onCancel?: (container: HTMLElement) => void;
+    cancelOnEscape?: boolean;
+    /** Shows the cancel button. */
+    cancelable: boolean;
+    label: string;
+    placeholder?: string;
+    submitLabel: string;
+    cancelLabel: string;
+    mentionsLabel: string;
+    people: readonly ThreadAuthor[];
+    locale: Intl.LocalesArgument;
+    disabled: boolean;
+    /** A submit is waiting for its parent to accept it; further submits are ignored. */
+    pending: boolean;
+    /** Focus the field on mount; only set when a user action opened this composer. */
+    autoFocus?: boolean;
+    size: ThreadSize;
+    /** Decorative portrait shown at inline-start. */
+    author?: ThreadAuthor;
+    textareaProps?: ThreadTextareaProps;
+    submitProps?: ThreadButtonProps;
+    part?: ThreadPartProps;
+    /** Distinguishes composers inside one thread (`data-composer`). */
+    kind: string;
+}
+/** Per-size layout variables read by the parts; the owning root applies them. */
+export declare const threadSizeStyles: Record<ThreadSize, SerializedStyles>;
+export declare function ThreadComposer({ ui: owner, draft, onDraftChange, onSubmit, onCancel, cancelOnEscape, cancelable, label, placeholder, submitLabel, cancelLabel, mentionsLabel, people, locale, disabled, pending, autoFocus, size, author, textareaProps, submitProps, part, kind, }: ThreadComposerProps): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/types/components/context-menu/context-menu.d.ts

@@ -0,0 +1,55 @@
+import { type ComponentPropsWithRef, type ReactNode } from 'react';
+import { type SxProps } from '../../styling/sx';
+import { type MenuItemTone } from '../menu/menu';
+export type ContextMenuItemTone = MenuItemTone;
+export interface ContextMenuProps {
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    children?: ReactNode;
+}
+export interface ContextMenuTargetProps extends ComponentPropsWithRef<'div'>, SxProps {
+    /** Also open on a plain click or tap (and Enter/Space on the Target). Only for inert objects:
+     * interactive children would lose their own click. */
+    openOnClick?: boolean;
+    /** Leave the browser's native context menu alone. */
+    disabled?: boolean;
+}
+export interface ContextMenuTriggerProps extends ComponentPropsWithRef<'button'>, SxProps {
+}
+export interface ContextMenuContentProps extends ComponentPropsWithRef<'div'>, SxProps {
+}
+export interface ContextMenuItemProps extends Omit<ComponentPropsWithRef<'button'>, 'onSelect'>, SxProps {
+    /** Called once when the item is activated. The menu then closes unless a click handler called
+     * `event.preventDefault()`. */
+    onSelect?: () => void;
+    disabled?: boolean;
+    tone?: ContextMenuItemTone;
+    /** Decorative icon before the label. */
+    icon?: ReactNode;
+}
+export interface ContextMenuCheckboxItemProps extends Omit<ContextMenuItemProps, 'value' | 'defaultValue'> {
+    value?: boolean;
+    defaultValue?: boolean;
+    onValueChange?: (checked: boolean) => void;
+    /** Close the menu after toggling. Off by default so several options can be toggled in a row. */
+    closeOnSelect?: boolean;
+}
+export interface ContextMenuSeparatorProps extends ComponentPropsWithRef<'div'>, SxProps {
+}
+declare function ContextMenuRoot({ open, defaultOpen, onOpenChange, children }: ContextMenuProps): import("@emotion/react/jsx-runtime").JSX.Element;
+declare function ContextMenuTarget({ ref, id, openOnClick, disabled, 'aria-labelledby': ariaLabelledBy, className, sx, ...rest }: ContextMenuTargetProps): import("@emotion/react/jsx-runtime").JSX.Element;
+declare function ContextMenuTrigger({ ref, id, className, sx, ...rest }: ContextMenuTriggerProps): import("@emotion/react/jsx-runtime").JSX.Element;
+declare function ContextMenuContent({ ref, style, dir, onKeyDown, ...props }: ContextMenuContentProps): import("@emotion/react/jsx-runtime").JSX.Element;
+declare function ContextMenuItem({ tone, icon, children, ...props }: ContextMenuItemProps): import("@emotion/react/jsx-runtime").JSX.Element;
+declare function ContextMenuCheckboxItem({ value, defaultValue, onValueChange, onSelect, closeOnSelect, tone, icon, children, ...props }: ContextMenuCheckboxItemProps): import("@emotion/react/jsx-runtime").JSX.Element;
+declare function ContextMenuSeparator(props: ContextMenuSeparatorProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const ContextMenu: typeof ContextMenuRoot & {
+    Target: typeof ContextMenuTarget;
+    Trigger: typeof ContextMenuTrigger;
+    Content: typeof ContextMenuContent;
+    Item: typeof ContextMenuItem;
+    CheckboxItem: typeof ContextMenuCheckboxItem;
+    Separator: typeof ContextMenuSeparator;
+};
+export {};

package/dist/types/components/context-menu/index.d.ts

@@ -0,0 +1,2 @@
+export { ContextMenu } from './context-menu';
+export type { ContextMenuCheckboxItemProps, ContextMenuContentProps, ContextMenuItemProps, ContextMenuItemTone, ContextMenuProps, ContextMenuSeparatorProps, ContextMenuTargetProps, ContextMenuTriggerProps, } from './context-menu';

package/dist/types/components/date-range-picker/date-range-picker.d.ts

@@ -94,7 +94,7 @@ export interface DateRangePickerContentProps extends Omit<ComponentPropsWithRef<
     };
 }
 declare function DateRangePickerRoot(props: DateRangePickerProps): import("@emotion/react/jsx-runtime").JSX.Element;
-declare function DateRangePickerTrigger({ ref, id: idProp, size, icon, placeholder, className, sx, onKeyDown, onKeyUp, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, 'aria-describedby': ariaDescribedBy, 'aria-invalid': ariaInvalidProp, ...rest }: DateRangePickerTriggerProps): import("@emotion/react/jsx-runtime").JSX.Element;
+declare function DateRangePickerTrigger({ ref, id: idProp, form, size, icon, placeholder, className, sx, onKeyDown, onKeyUp, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, 'aria-describedby': ariaDescribedBy, 'aria-invalid': ariaInvalidProp, ...rest }: DateRangePickerTriggerProps): import("@emotion/react/jsx-runtime").JSX.Element;
 declare function DateRangePickerContent(props: DateRangePickerContentProps): import("@emotion/react/jsx-runtime").JSX.Element | null;
 export declare const DateRangePicker: typeof DateRangePickerRoot & {
     Trigger: typeof DateRangePickerTrigger;