@jfrader/ui 0.4.0 → 0.5.1

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

@@ -2,6 +2,16 @@ import { type ComponentPropsWithRef } from 'react';
 import { type SxProps } from '../../styling/sx';
 /** Day of the week as counted by `Date#getUTCDay`: 0 is Sunday, 6 is Saturday. */
 export type CalendarWeekday = 0 | 1 | 2 | 3 | 4 | 5 | 6;
+/** Inclusive interval of 'YYYY-MM-DD' dates, start ≤ end. */
+export interface CalendarRange {
+    start: string;
+    end: string;
+}
+/** Descriptions read on the first and last day of `selectionRange`. */
+export interface CalendarRangeLabels {
+    start: string;
+    end: string;
+}
 export interface CalendarProps extends Omit<ComponentPropsWithRef<'div'>, 'defaultValue' | 'onChange'>, SxProps {
     /** Selected date, 'YYYY-MM-DD'. */
     value?: string;
@@ -19,11 +29,25 @@ export interface CalendarProps extends Omit<ComponentPropsWithRef<'div'>, 'defau
     locale?: string;
     /** Defaults to the locale's week start. */
     firstDayOfWeek?: CalendarWeekday;
+    /** 'YYYY-MM-DD' marked as today. Defaults to the local civil date at render time. */
+    today?: string;
+    /** Range mode: the selected interval (null for none). Replaces `value` as the selection. */
+    selectionRange?: CalendarRange | null;
+    /** Tentative interval, decorated but not selected. */
+    previewRange?: CalendarRange | null;
+    /** Parent-owned roving tab stop; null or a date outside the shown month leaves no day tab stop. */
+    tabStopDate?: string | null;
+    /** Every native day activation (click, Enter, Space), including the selected day. */
+    onDayActivate?: (date: string) => void;
+    /** A day received focus, or a keyboard move chose its destination (possibly in another month). */
+    onFocusedDateChange?: (date: string) => void;
+    /** Range mode: endpoint descriptions for screen readers. */
+    rangeLabels?: CalendarRangeLabels;
 }
 /** The header renders its own month buttons and label. */
 export type CalendarHeaderProps = Omit<ComponentPropsWithRef<'div'>, 'children'> & SxProps;
 export type CalendarGridProps = ComponentPropsWithRef<'table'> & SxProps;
-declare function CalendarRoot({ ref, value: valueProp, defaultValue, onValueChange, visibleMonth: visibleMonthProp, defaultVisibleMonth, onVisibleMonthChange, min: minProp, max: maxProp, locale: localeProp, firstDayOfWeek: firstDayOfWeekProp, className, sx, ...rest }: CalendarProps): import("@emotion/react/jsx-runtime").JSX.Element;
+declare function CalendarRoot({ ref, value: valueProp, defaultValue, onValueChange, visibleMonth: visibleMonthProp, defaultVisibleMonth, onVisibleMonthChange, min: minProp, max: maxProp, locale: localeProp, firstDayOfWeek: firstDayOfWeekProp, today: todayProp, selectionRange, previewRange, tabStopDate, onDayActivate: onDayActivateProp, onFocusedDateChange: onFocusedDateChangeProp, rangeLabels, className, sx, children, ...rest }: CalendarProps): import("@emotion/react/jsx-runtime").JSX.Element;
 declare function CalendarHeader({ ref, className, sx, ...props }: CalendarHeaderProps): import("@emotion/react/jsx-runtime").JSX.Element;
 declare function CalendarGrid({ ref, onKeyDown, 'aria-labelledby': ariaLabelledByProp, 'aria-label': ariaLabelProp, className, sx, ...rest }: CalendarGridProps): import("@emotion/react/jsx-runtime").JSX.Element;
 export declare const Calendar: typeof CalendarRoot & {

package/dist/types/components/calendar/index.d.ts

@@ -1,2 +1,2 @@
 export { Calendar } from './calendar';
-export type { CalendarGridProps, CalendarHeaderProps, CalendarProps, CalendarWeekday } from './calendar';
+export type { CalendarGridProps, CalendarHeaderProps, CalendarProps, CalendarRange, CalendarRangeLabels, CalendarWeekday, } from './calendar';

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

@@ -0,0 +1,73 @@
+import { type ComponentPropsWithRef, type CSSProperties, type ReactNode } from 'react';
+import { type Interpolation, type Theme } from '../../styling/css';
+import { type SxProps } from '../../styling/sx';
+import { type ButtonProps } from '../button';
+export type CarouselActivation = 'auto' | 'manual';
+export interface CarouselLabels {
+    /** Name of the slide viewport. */
+    slides: string;
+    /** Name of the slide picker tablist. */
+    chooseSlide: string;
+    previous: string;
+    next: string;
+    startRotation: string;
+    stopRotation: string;
+    /** Shown when there are no slides. */
+    empty: string;
+    /** The root's aria-roledescription. */
+    carouselRole: string;
+    /** Default slide name; `index` is zero-based. */
+    slideCount: (index: number, count: number) => string;
+}
+type StyleSlot = {
+    css?: Interpolation<Theme>;
+};
+type PartSlot = Omit<ComponentPropsWithRef<'div'>, 'children' | 'role' | 'id' | 'tabIndex' | 'hidden' | 'inert'> & StyleSlot;
+type SlideSlot = Omit<PartSlot, 'ref' | 'aria-hidden'>;
+type IndicatorSlot = Omit<ComponentPropsWithRef<'button'>, 'ref' | 'children' | 'role' | 'id' | 'type' | 'tabIndex' | 'disabled' | 'aria-selected' | 'aria-controls' | 'aria-disabled' | 'aria-label'> & StyleSlot;
+type ButtonSlot = Omit<ButtonProps, 'children' | 'type' | 'disabled' | 'aria-disabled' | 'render' | 'sx'>;
+export interface CarouselSlotProps {
+    rotationButton?: ButtonSlot;
+    viewport?: PartSlot;
+    track?: PartSlot;
+    slide?: SlideSlot;
+    controls?: PartSlot;
+    tabList?: PartSlot;
+    indicator?: IndicatorSlot;
+    previousButton?: ButtonSlot;
+    nextButton?: ButtonSlot;
+    status?: PartSlot;
+    empty?: PartSlot;
+}
+export interface CarouselProps extends Omit<ComponentPropsWithRef<'section'>, 'defaultValue' | 'onChange'>, SxProps {
+    /** One renderable child per slide; give each a stable key. */
+    children: ReactNode;
+    /** Active slide index (controlled). */
+    value?: number;
+    defaultValue?: number;
+    onValueChange?: (index: number) => void;
+    /** Inline size of each slide, clamped to the carousel's width. */
+    slideSize?: CSSProperties['inlineSize'];
+    /** Accessible slide name; `index` is zero-based. Defaults to `labels.slideCount`. */
+    getSlideLabel?: (index: number, count: number) => string;
+    activation?: CarouselActivation;
+    /** Rotation delay in milliseconds. Without a positive finite value there is no rotation. */
+    interval?: number;
+    /** Seeds the uncontrolled playing state on mount. */
+    autoPlay?: boolean;
+    /** Requested rotation state (controlled). Safety pauses apply on top of it. */
+    playingValue?: boolean;
+    /** Seeds the uncontrolled playing state; takes precedence over `autoPlay`. */
+    defaultPlayingValue?: boolean;
+    onPlayingValueChange?: (playing: boolean) => void;
+    locale?: Intl.LocalesArgument;
+    labels?: Partial<CarouselLabels>;
+    /** Blocks navigation and rotation; the active slide's content stays operable. */
+    disabled?: boolean;
+    slotProps?: CarouselSlotProps;
+}
+export declare function Carousel({ ref, children, value: valueProp, defaultValue, onValueChange, slideSize, getSlideLabel: getSlideLabelProp, activation, interval, autoPlay, playingValue, defaultPlayingValue, onPlayingValueChange, locale, labels: labelProps, disabled, slotProps, className, sx, style, role, 'aria-roledescription': roleDescription, onFocus, onBlur, onPointerEnter, onPointerLeave, ...rest }: CarouselProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare namespace Carousel {
+    var displayName: string;
+}
+export {};

package/dist/types/components/carousel/index.d.ts

@@ -0,0 +1,2 @@
+export { Carousel } from './carousel';
+export type { CarouselActivation, CarouselLabels, CarouselProps, CarouselSlotProps } from './carousel';

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/chip-group/chip-group.d.ts

@@ -0,0 +1,54 @@
+import { type ComponentPropsWithRef, type ReactNode } from 'react';
+import { type Interpolation, type Theme } from '../../styling/css';
+import { type SxProps } from '../../styling/sx';
+export interface ChipGroupOption {
+    value: string;
+    label: ReactNode;
+    disabled?: boolean;
+}
+type StyledSlot<T extends 'div' | 'span' | 'button'> = Omit<ComponentPropsWithRef<T>, 'children' | 'role' | 'tabIndex' | 'disabled' | 'aria-disabled' | 'aria-pressed' | 'aria-expanded' | 'aria-controls'> & {
+    css?: Interpolation<Theme>;
+};
+export interface ChipGroupSlotProps {
+    frame?: StyledSlot<'div'>;
+    row?: StyledSlot<'div'>;
+    chip?: StyledSlot<'button'> | ((option: ChipGroupOption) => StyledSlot<'button'>);
+    label?: StyledSlot<'span'>;
+    check?: StyledSlot<'span'>;
+    overflow?: StyledSlot<'button'>;
+}
+interface ChipGroupBaseProps extends Omit<ComponentPropsWithRef<'div'>, 'defaultValue' | 'onChange' | 'children'>, SxProps {
+    options: readonly ChipGroupOption[];
+    label?: string;
+    allowEmpty?: boolean;
+    disabled?: boolean;
+    size?: 'sm' | 'md';
+    maxVisible?: number;
+    expanded?: boolean;
+    defaultExpanded?: boolean;
+    onExpandedChange?: (expanded: boolean) => void;
+    locale?: Intl.LocalesArgument;
+    moreLabel?: (formattedCount: string, count: number) => string;
+    lessLabel?: string;
+    slotProps?: ChipGroupSlotProps;
+}
+export interface ChipGroupSingleProps extends ChipGroupBaseProps {
+    type: 'single';
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+}
+export interface ChipGroupMultipleProps extends ChipGroupBaseProps {
+    type?: 'multiple';
+    value?: readonly string[];
+    defaultValue?: readonly string[];
+    onValueChange?: (value: string[]) => void;
+}
+export type ChipGroupProps = ChipGroupSingleProps | ChipGroupMultipleProps;
+/** Clearable pressed-button filters. Arrows (horizontal RTL-aware), Home/End move focus only;
+ * Enter/Space toggle. Multiple values are emitted in option order, not activation order. */
+export declare function ChipGroup({ ref, options, type, value: valueProp, defaultValue, onValueChange, label, allowEmpty, disabled, size, maxVisible, expanded: expandedProp, defaultExpanded, onExpandedChange, locale, moreLabel, lessLabel, slotProps, className, sx, onKeyDown, onBlur, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, ...rest }: ChipGroupProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare namespace ChipGroup {
+    var displayName: string;
+}
+export {};

package/dist/types/components/chip-group/index.d.ts

@@ -0,0 +1 @@
+export { ChipGroup, type ChipGroupProps, type ChipGroupOption, type ChipGroupSingleProps, type ChipGroupMultipleProps, type ChipGroupSlotProps, } from './chip-group';

package/dist/types/components/code-block/code-block.d.ts

@@ -0,0 +1,58 @@
+import { type ComponentPropsWithRef, type Ref } from 'react';
+import { type Interpolation, type Theme } from '../../styling/css';
+import { type SxProps } from '../../styling/sx';
+import { type CopyButtonProps } from '../copy-button';
+export interface CodeBlockSlotPartProps {
+    className?: string;
+    css?: Interpolation<Theme>;
+}
+export interface CodeBlockSlotProps {
+    header?: CodeBlockSlotPartProps;
+    label?: CodeBlockSlotPartProps;
+    language?: CodeBlockSlotPartProps;
+    sourceFrame?: CodeBlockSlotPartProps;
+    gutter?: CodeBlockSlotPartProps;
+    pre?: CodeBlockSlotPartProps;
+    code?: CodeBlockSlotPartProps;
+    toggle?: CodeBlockSlotPartProps;
+}
+export interface CodeHighlightToken {
+    content: string;
+    /** Any CSS color; token references (`vars.color.syntax*`) follow the theme. */
+    color?: string;
+    fontStyle?: 'normal' | 'italic';
+}
+/** One token list per source line, without line terminators. */
+export type CodeHighlightLines = readonly (readonly CodeHighlightToken[])[];
+export interface CodeHighlightRequest {
+    code: string;
+    language?: string;
+}
+/** Tokenizes `code`; `null` (e.g. an unsupported language) keeps plain text. */
+export type CodeHighlightLoader = (request: CodeHighlightRequest) => CodeHighlightLines | null | PromiseLike<CodeHighlightLines | null>;
+export interface CodeBlockProps extends Omit<ComponentPropsWithRef<'section'>, 'children' | 'onChange'>, SxProps {
+    code: string;
+    filename?: string;
+    language?: string;
+    label?: string;
+    sourceLabel?: string;
+    maxLines?: number;
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    lineNumbers?: boolean;
+    locale?: Intl.LocalesArgument;
+    getExpandLabel?: (count: number, formatted: string) => string;
+    collapseLabel?: string;
+    copyable?: boolean;
+    copyButtonProps?: Partial<Omit<CopyButtonProps, 'text' | 'ref'>>;
+    preRef?: Ref<HTMLPreElement>;
+    /** Syntax highlighting loader, read when `code` or `language` changes. */
+    highlight?: CodeHighlightLoader;
+    slotProps?: CodeBlockSlotProps;
+    css?: Interpolation<Theme>;
+}
+export declare function CodeBlock({ ref, code, filename, language, label, sourceLabel, maxLines, open, defaultOpen, onOpenChange, lineNumbers, locale, getExpandLabel, collapseLabel, copyable, copyButtonProps, preRef, highlight, slotProps, className, sx, 'aria-label': ariaLabel, 'aria-labelledby': labelledBy, ...rest }: CodeBlockProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare namespace CodeBlock {
+    var displayName: string;
+}

package/dist/types/components/code-block/index.d.ts

@@ -0,0 +1 @@
+export { CodeBlock, type CodeBlockProps, type CodeBlockSlotProps, type CodeBlockSlotPartProps, type CodeHighlightLines, type CodeHighlightLoader, type CodeHighlightRequest, type CodeHighlightToken, } from './code-block';

package/dist/types/components/code-block/shiki.d.ts

@@ -0,0 +1,3 @@
+import type { CodeHighlightLoader } from './code-block';
+/** Highlights js/ts/json/css/bash/html with shiki; any other language resolves to `null` (plain text). */
+export declare const loadShikiHighlight: CodeHighlightLoader;

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

@@ -35,7 +35,7 @@ export interface ComboboxItemProps extends ComponentPropsWithRef<'div'>, SxProps
 }
 export interface ComboboxEmptyProps extends ComponentPropsWithRef<'div'>, SxProps {
 }
-declare function ComboboxRoot({ value: valueProp, defaultValue, onValueChange, open: openProp, defaultOpen, onOpenChange, name, filter, onInputChange, children, }: ComboboxProps): import("@emotion/react/jsx-runtime").JSX.Element;
+declare function ComboboxRoot(props: ComboboxProps): import("@emotion/react/jsx-runtime").JSX.Element;
 declare function ComboboxInput({ ref, inputValue, defaultInputValue, label, description, error, size, slotProps, className, sx, id: idProp, onChange, onKeyDown, onBlur, disabled, ...rest }: ComboboxInputProps): import("@emotion/react/jsx-runtime").JSX.Element;
 declare function ComboboxList({ ref, id: idProp, style, onMouseDown, children, className, sx, ...rest }: ComboboxListProps): import("@emotion/react/jsx-runtime").JSX.Element;
 declare function ComboboxItem({ ref, value, disabled, onClick, children, className, sx, ...rest }: ComboboxItemProps): import("@emotion/react/jsx-runtime").JSX.Element;

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

@@ -35,14 +35,14 @@ export interface CommandPaletteItemProps extends Omit<ComponentPropsWithRef<'div
     /** Extra text the filter matches against (synonyms, aliases). */
     keywords?: string;
 }
-declare function CommandPaletteRoot({ open: openProp, defaultOpen, onOpenChange, label, filter, emptyMessage, formatResultCount, children, }: CommandPaletteProps): import("@emotion/react/jsx-runtime").JSX.Element;
+declare function CommandPaletteRoot(props: CommandPaletteProps): import("@emotion/react/jsx-runtime").JSX.Element;
 declare function CommandPaletteTrigger({ ref, onClick, className, sx, ...rest }: CommandPaletteTriggerProps): import("@emotion/react/jsx-runtime").JSX.Element;
 declare function CommandPaletteContent({ ref, className, sx, ...props }: CommandPaletteContentProps): import("@emotion/react/jsx-runtime").JSX.Element;
 declare function CommandPaletteInput({ ref, onChange, onKeyDown, className, sx, ...rest }: CommandPaletteInputProps): import("@emotion/react/jsx-runtime").JSX.Element;
 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;