@jfrader/ui 0.3.0 → 0.5.0

package/dist/types/components/file-dropzone/file-dropzone.d.ts

@@ -0,0 +1,93 @@
+import { type ComponentPropsWithRef, type ReactNode, type Ref } from 'react';
+import { type Interpolation, type Theme } from '../../styling/css';
+import { type SxProps } from '../../styling/sx';
+export type FileDropzoneSize = 'sm' | 'md' | 'lg';
+export type FileDropzoneUploadStatus = 'idle' | 'uploading' | 'uploaded' | 'failed';
+export interface FileDropzoneItem {
+    id: string;
+    name: string;
+    size: number;
+    file?: File;
+    preview?: string;
+    uploaded?: boolean;
+}
+export interface FileRejection {
+    file: File;
+    code: 'type' | 'size' | 'count' | 'custom';
+    message: string;
+}
+export type FileDropzoneUpload = (item: FileDropzoneItem, context: {
+    signal: AbortSignal;
+    onProgress: (percent: number) => void;
+}) => Promise<void>;
+export interface FileDropzoneMessages {
+    browse: string;
+    files: string;
+    remove: (name: string) => string;
+    retry: (name: string) => string;
+    rejection: (code: Exclude<FileRejection['code'], 'custom'>, file: File) => string;
+    status: (status: FileDropzoneUploadStatus, name: string) => string;
+    added: (count: number) => string;
+    removed: (name: string) => string;
+    count: (count: number) => string;
+    uploadError: string;
+}
+type Slot<E extends keyof React.JSX.IntrinsicElements> = Omit<ComponentPropsWithRef<E>, 'ref' | 'children'> & {
+    css?: Interpolation<Theme>;
+};
+export interface FileDropzoneSlotProps {
+    root?: Slot<'div'>;
+    input?: Slot<'input'>;
+    target?: Slot<'div'>;
+    /** The native label: the clickable drop surface that names and opens the input. */
+    label?: Slot<'label'>;
+    browse?: Slot<'span'>;
+    description?: Slot<'div'>;
+    note?: Slot<'div'>;
+    list?: Slot<'ul'>;
+    item?: Slot<'li'>;
+    preview?: Slot<'img'>;
+    progress?: Slot<'div'>;
+    action?: Slot<'button'>;
+    error?: Slot<'div'>;
+    status?: Slot<'div'>;
+}
+export interface FileDropzoneProps extends Omit<ComponentPropsWithRef<'div'>, 'defaultValue' | 'onChange' | 'children'>, SxProps {
+    value?: FileDropzoneItem[];
+    defaultValue?: FileDropzoneItem[];
+    onValueChange?: (items: FileDropzoneItem[]) => void;
+    onReject?: (rejections: FileRejection[]) => void;
+    accept?: string;
+    multiple?: boolean;
+    maxFiles?: number;
+    maxSize?: number;
+    validate?: (file: File) => string | null;
+    onUpload?: FileDropzoneUpload;
+    listPlacement?: 'below' | 'inside';
+    compactAt?: number;
+    label?: ReactNode;
+    description?: ReactNode;
+    note?: ReactNode;
+    dropLabel?: ReactNode;
+    error?: ReactNode;
+    messages: FileDropzoneMessages;
+    locale?: string;
+    disabled?: boolean;
+    readOnly?: boolean;
+    required?: boolean;
+    size?: FileDropzoneSize;
+    paste?: boolean;
+    renderFileIcon?: (item: FileDropzoneItem) => ReactNode;
+    name?: string;
+    inputRef?: Ref<HTMLInputElement>;
+    slotProps?: FileDropzoneSlotProps;
+}
+/** The visible surface is the native label of an operable file input; no custom dropzone role.
+ * Submit canonical value items, not input.files: drops and accumulated batches are not
+ * reflected in native FormData/required. Client validation is a convenience; validate uploads
+ * independently on the server. */
+export declare function FileDropzone({ ref, value, defaultValue, onValueChange, onReject, accept, multiple, maxFiles, maxSize, validate, onUpload, listPlacement, compactAt, label, description, note, dropLabel, error, messages, locale, disabled, readOnly, required, size, paste, renderFileIcon, name, inputRef, slotProps, className, sx, onDragEnter, onDragOver, onDragLeave, onDrop, onPaste, ...rest }: FileDropzoneProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare namespace FileDropzone {
+    var displayName: string;
+}
+export {};

package/dist/types/components/file-dropzone/index.d.ts

@@ -0,0 +1,2 @@
+export { FileDropzone } from './file-dropzone';
+export type { FileDropzoneProps, FileDropzoneItem, FileDropzoneUploadStatus, FileDropzoneUpload, FileRejection, FileDropzoneMessages, FileDropzoneSize, FileDropzoneSlotProps, } from './file-dropzone';

package/dist/types/components/filter-toolbar/filter-toolbar.d.ts

@@ -0,0 +1,70 @@
+import { type ComponentPropsWithRef, type MouseEventHandler, type ReactNode } from 'react';
+import { type Interpolation, type Theme } from '../../styling/css';
+import { type SxProps } from '../../styling/sx';
+import { type ButtonProps } from '../button';
+export interface FilterValue {
+    id: string;
+    label: string;
+    value: string;
+    valueLabel?: string;
+}
+export interface FilterToolbarMessages {
+    remove: (filter: FilterValue) => string;
+    clear: string;
+}
+export interface FilterControlsState {
+    value: readonly FilterValue[];
+    disabled: boolean;
+    onValueChange: (next: readonly FilterValue[]) => void;
+}
+export interface FilterToolbarProps extends Omit<ComponentPropsWithRef<'div'>, 'defaultValue' | 'onChange'>, SxProps {
+    value?: readonly FilterValue[];
+    defaultValue?: readonly FilterValue[];
+    onValueChange?: (filters: readonly FilterValue[]) => void;
+    disabled?: boolean;
+    label?: string;
+    messages?: Partial<FilterToolbarMessages>;
+}
+export interface FilterToolbarControlsProps extends Omit<ComponentPropsWithRef<'div'>, 'children'>, SxProps {
+    children?: ReactNode | ((state: FilterControlsState) => ReactNode);
+}
+type StyleSlot = {
+    className?: string;
+    css?: Interpolation<Theme>;
+};
+export interface FilterToolbarActiveFiltersSlotProps {
+    list?: StyleSlot;
+    chip?: StyleSlot;
+    label?: StyleSlot;
+    remove?: StyleSlot;
+}
+export interface FilterToolbarActiveFiltersProps extends Omit<ComponentPropsWithRef<'div'>, 'children'>, SxProps {
+    empty?: ReactNode;
+    slotProps?: FilterToolbarActiveFiltersSlotProps;
+}
+export interface FilterToolbarClearProps extends Omit<ButtonProps, 'children' | 'onClick' | 'render'> {
+    children?: ReactNode;
+    onClick?: MouseEventHandler<HTMLButtonElement>;
+}
+export interface FilterToolbarResultCountProps extends Omit<ComponentPropsWithRef<'p'>, 'children'>, SxProps {
+    count: number | null;
+    locale?: Intl.LocalesArgument;
+    formatCount?: (count: number, formatted: string) => string;
+    loading?: boolean;
+    loadingLabel?: string;
+    unknownLabel?: string;
+}
+/** A named group with native Tab order. Enter/Space activate remove and clear buttons;
+ * the shell does not intercept editing keys or promise roving toolbar navigation. */
+declare function FilterToolbarRoot({ ref, value: valueProp, defaultValue, onValueChange, disabled, label, messages: messagesProp, className, sx, children, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, tabIndex, ...rest }: FilterToolbarProps): import("@emotion/react/jsx-runtime").JSX.Element;
+declare function Controls({ children, className, sx, ...rest }: FilterToolbarControlsProps): import("@emotion/react/jsx-runtime").JSX.Element;
+declare function ActiveFilters({ empty, slotProps, className, sx, ...rest }: FilterToolbarActiveFiltersProps): import("@emotion/react/jsx-runtime").JSX.Element;
+declare function Clear({ children, onClick, disabled: disabledProp, css: cssProp, ...rest }: FilterToolbarClearProps): import("@emotion/react/jsx-runtime").JSX.Element | null;
+declare function ResultCount({ count, locale, formatCount, loading, loadingLabel, unknownLabel, className, sx, ...rest }: FilterToolbarResultCountProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const FilterToolbar: typeof FilterToolbarRoot & {
+    Controls: typeof Controls;
+    ActiveFilters: typeof ActiveFilters;
+    Clear: typeof Clear;
+    ResultCount: typeof ResultCount;
+};
+export {};

package/dist/types/components/filter-toolbar/index.d.ts

@@ -0,0 +1 @@
+export { FilterToolbar, type FilterValue, type FilterControlsState, type FilterToolbarMessages, type FilterToolbarProps, type FilterToolbarControlsProps, type FilterToolbarActiveFiltersProps, type FilterToolbarActiveFiltersSlotProps, type FilterToolbarClearProps, type FilterToolbarResultCountProps, } from './filter-toolbar';

package/dist/types/components/hold-to-confirm/hold-to-confirm.d.ts

@@ -0,0 +1,32 @@
+import { type ComponentPropsWithRef, type ReactNode } from 'react';
+import { type Interpolation, type Theme } from '../../styling/css';
+import { type SxProps } from '../../styling/sx';
+export type HoldToConfirmTone = 'neutral' | 'accent' | 'danger';
+export type HoldToConfirmSize = 'sm' | 'md' | 'lg';
+export interface HoldToConfirmPartProps {
+    className?: string;
+    css?: Interpolation<Theme>;
+}
+export interface HoldToConfirmProps extends Omit<ComponentPropsWithRef<'button'>, 'children' | 'value' | 'defaultValue'>, SxProps {
+    label: ReactNode;
+    confirmedLabel: ReactNode;
+    confirmationAnnouncement: string;
+    getHoldDescription: (formattedDuration: string) => string;
+    locale?: Intl.LocalesArgument;
+    duration?: number;
+    value?: boolean;
+    defaultValue?: boolean;
+    onValueChange?: (confirmed: boolean) => void;
+    onConfirm: () => void;
+    onHoldChange?: (holding: boolean) => void;
+    tone?: HoldToConfirmTone;
+    size?: HoldToConfirmSize;
+    icon?: ReactNode;
+    confirmedIcon?: ReactNode;
+    slotProps?: Partial<Record<'face' | 'icon' | 'label' | 'fill' | 'hint' | 'status', HoldToConfirmPartProps>>;
+}
+/** Native button with timed Space/Enter activation. Provide an untimed Dialog alternative in the application. */
+export declare function HoldToConfirm({ ref, label, confirmedLabel, confirmationAnnouncement, getHoldDescription, locale, duration, value, defaultValue, onValueChange, onConfirm, onHoldChange, tone, size, icon, confirmedIcon, disabled, slotProps, className, sx, onPointerDown, onPointerMove, onPointerUp, onPointerCancel, onLostPointerCapture, onKeyDown, onKeyUp, onBlur, onClick, onContextMenu, 'aria-describedby': describedBy, ...rest }: HoldToConfirmProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare namespace HoldToConfirm {
+    var displayName: string;
+}

package/dist/types/components/hold-to-confirm/index.d.ts

@@ -0,0 +1,2 @@
+export { HoldToConfirm } from './hold-to-confirm';
+export type { HoldToConfirmProps, HoldToConfirmPartProps, HoldToConfirmSize, HoldToConfirmTone, } from './hold-to-confirm';

package/dist/types/components/hover-card/hover-card.d.ts

@@ -0,0 +1,97 @@
+import { type ComponentPropsWithRef, type ReactNode, type HTMLAttributes, type RefCallback } from 'react';
+import { type Placement } from '@floating-ui/react';
+import { type Interpolation, type Theme } from '../../styling/css';
+import { type SxProps } from '../../styling/sx';
+export interface HoverCardProps {
+    /** Standalone only: controlled open state. Not allowed inside `HoverCard.Group`. */
+    open?: boolean;
+    /** Standalone only: initial open state when uncontrolled. Not allowed inside `HoverCard.Group`. */
+    defaultOpen?: boolean;
+    /** Standalone only: open/close requests. Not allowed inside `HoverCard.Group`. */
+    onOpenChange?: (open: boolean) => void;
+    /** Required inside `HoverCard.Group`: this member's unique id. Ignored when standalone. */
+    value?: string;
+    placement?: Placement;
+    /** Hover delay before opening, in ms. Keyboard focus and activation open immediately. */
+    openDelay?: number;
+    /** Delay before closing after the pointer leaves trigger and card, in ms. */
+    closeDelay?: number;
+    children?: ReactNode;
+}
+export interface HoverCardGroupProps {
+    /** The open member's `value`, or `null` when none is open. */
+    value?: string | null;
+    defaultValue?: string | null;
+    onValueChange?: (value: string | null) => void;
+    /** How long the group stays warm after its last card closes, in ms. */
+    skipDelay?: number;
+    /** Hover delay before opening while the group is warm, in ms. */
+    intentDelay?: number;
+    children?: ReactNode;
+}
+/** Props a Trigger `render` callback spreads onto the element it returns (e.g. a link). */
+export interface HoverCardTriggerRenderProps extends HTMLAttributes<HTMLElement> {
+    ref: RefCallback<HTMLElement>;
+    'data-ui': string;
+}
+export interface HoverCardTriggerProps extends ComponentPropsWithRef<'button'>, SxProps {
+    /**
+     * Replaces the default button, e.g. with a profile link. Spread ALL supplied props onto the
+     * operative element and attach the supplied ref. The ref refers to the rendered element, which
+     * need not be a button; its public type remains HTMLButtonElement for compatibility.
+     * Native activation is never prevented: a rendered link still navigates on click, Enter or tap.
+     * Compact inline links rely on the WCAG 2.5.8 inline exception for target size.
+     */
+    render?: (props: HoverCardTriggerRenderProps) => ReactNode;
+}
+export interface HoverCardContentProps extends Omit<ComponentPropsWithRef<'div'>, 'tabIndex'>, SxProps {
+}
+export interface HoverCardStat {
+    /** Stable key for the stat. */
+    id: string;
+    label: ReactNode;
+    /** Numbers are formatted with `Intl.NumberFormat`; strings render as given (preformatted). */
+    value: string | number;
+}
+/**
+ * Native attributes for an internal Profile slot element (e.g. `id`, `aria-describedby`,
+ * `title`), plus `css` applied after the slot's own styles.
+ */
+export type HoverCardProfilePartProps<Element extends 'div' | 'dl' | 'span' = 'div'> = Omit<ComponentPropsWithRef<Element>, 'children'> & {
+    css?: Interpolation<Theme>;
+};
+export interface HoverCardProfileProps extends Omit<ComponentPropsWithRef<'div'>, 'children'>, SxProps {
+    /** Visible full identity; also the avatar's initials source. */
+    name: string;
+    subtitle?: ReactNode;
+    bio?: ReactNode;
+    /** Image URL for the default Avatar. */
+    src?: string;
+    /** Custom decorative avatar; replaces the default Avatar when it renders content. */
+    avatar?: ReactNode;
+    stats?: readonly HoverCardStat[];
+    /** Footer line, e.g. a consumer-formatted join date. */
+    meta?: ReactNode;
+    /** Locale for numeric stats; defaults to the runtime locale. */
+    locale?: Intl.LocalesArgument;
+    slotProps?: {
+        /** The avatar stays decorative: `aria-hidden` is not configurable. */
+        avatar?: Omit<HoverCardProfilePartProps<'span'>, 'aria-hidden'>;
+        identity?: HoverCardProfilePartProps;
+        bio?: HoverCardProfilePartProps;
+        stats?: HoverCardProfilePartProps<'dl'>;
+        meta?: HoverCardProfilePartProps;
+    };
+}
+declare function HoverCardGroup({ value: valueProp, defaultValue, onValueChange, skipDelay, intentDelay, children, }: HoverCardGroupProps): import("@emotion/react/jsx-runtime").JSX.Element;
+declare function HoverCardRoot(props: HoverCardProps): import("@emotion/react/jsx-runtime").JSX.Element;
+declare function HoverCardTrigger({ ref, render, 'aria-describedby': ariaDescribedByProp, className, sx, ...rest }: HoverCardTriggerProps): import("@emotion/react/jsx-runtime").JSX.Element;
+declare function HoverCardContent(props: HoverCardContentProps): import("@emotion/react/jsx-runtime").JSX.Element | null;
+declare function HoverCardProfile({ ref, name, subtitle, bio, src, avatar, stats, meta, locale, slotProps, className, sx, ...rest }: HoverCardProfileProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const HoverCard: typeof HoverCardRoot & {
+    Trigger: typeof HoverCardTrigger;
+    Content: typeof HoverCardContent;
+    Profile: typeof HoverCardProfile;
+    Group: typeof HoverCardGroup;
+};
+export {};

package/dist/types/components/hover-card/index.d.ts

@@ -0,0 +1,2 @@
+export { HoverCard } from './hover-card';
+export type { HoverCardContentProps, HoverCardGroupProps, HoverCardProfilePartProps, HoverCardProfileProps, HoverCardProps, HoverCardStat, HoverCardTriggerProps, HoverCardTriggerRenderProps, } from './hover-card';

package/dist/types/components/image-compare/image-compare.d.ts

@@ -0,0 +1,54 @@
+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 ImageCompareOrientation = 'horizontal' | 'vertical';
+type StyleSlot = {
+    css?: Interpolation<Theme>;
+};
+type PartSlot = Omit<ComponentPropsWithRef<'div'>, 'children'> & StyleSlot;
+type CaptionSlot = Omit<ComponentPropsWithRef<'span'>, 'children' | 'id' | 'aria-hidden'> & StyleSlot;
+type HandleSlot = Omit<ComponentPropsWithRef<'div'>, 'children' | 'role' | 'tabIndex' | 'aria-orientation' | 'aria-disabled' | 'aria-valuemin' | 'aria-valuemax' | 'aria-valuenow' | 'aria-valuetext'> & StyleSlot;
+type ButtonSlot = Omit<ButtonProps, 'children' | 'type' | 'disabled' | 'aria-disabled' | 'render' | 'sx'>;
+export interface ImageCompareSlotProps {
+    frame?: PartSlot;
+    before?: PartSlot;
+    after?: PartSlot;
+    beforeLabel?: CaptionSlot;
+    afterLabel?: CaptionSlot;
+    divider?: Omit<PartSlot, 'aria-hidden'>;
+    /** The `role="slider"` element. Slider naming and descriptions (`aria-label`, `aria-labelledby`, `aria-describedby`) go here. */
+    handle?: HandleSlot;
+    resetButton?: ButtonSlot;
+}
+export interface ImageCompareProps extends Omit<ComponentPropsWithRef<'div'>, 'defaultValue' | 'onChange' | 'children'>, SxProps {
+    /** Image shown at inline-start (horizontal) or top (vertical). Give it meaningful alt text. */
+    before: ReactNode;
+    /** Image shown at inline-end (horizontal) or bottom (vertical). Give it meaningful alt text. */
+    after: ReactNode;
+    /** Percentage of Before visible (controlled). */
+    value?: number;
+    defaultValue?: number;
+    onValueChange?: (value: number) => void;
+    /** Completed interaction: pointer release, key press, tap, reset. Reports the request, not acceptance. */
+    onValueCommit?: (value: number) => void;
+    orientation?: ImageCompareOrientation;
+    step?: number;
+    largeStep?: number;
+    /** Visible captions for Before and After; `false` hides both. */
+    labels?: readonly [string, string] | false;
+    /** Accessible name of the slider. */
+    label?: string;
+    valueText?: (value: number, formattedPercent: string) => string;
+    locale?: Intl.LocalesArgument;
+    aspectRatio?: CSSProperties['aspectRatio'];
+    disabled?: boolean;
+    showReset?: boolean;
+    resetLabel?: string;
+    slotProps?: ImageCompareSlotProps;
+}
+export declare function ImageCompare({ ref, before, after, value: valueProp, defaultValue, onValueChange, onValueCommit, orientation, step: stepProp, largeStep: largeStepProp, labels, label, valueText, locale, aspectRatio, disabled, showReset, resetLabel, slotProps, className, sx, onKeyDown, ...rest }: ImageCompareProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare namespace ImageCompare {
+    var displayName: string;
+}
+export {};

package/dist/types/components/image-compare/index.d.ts

@@ -0,0 +1 @@
+export { ImageCompare, type ImageCompareProps, type ImageCompareOrientation, type ImageCompareSlotProps, } from './image-compare';

package/dist/types/components/inline-edit/index.d.ts

@@ -0,0 +1,2 @@
+export { InlineEdit } from './inline-edit';
+export type { InlineEditControlProps, InlineEditMessages, InlineEditPartProps, InlineEditPhase, InlineEditProps, InlineEditSize, InlineEditSlotProps, InlineEditVariant, } from './inline-edit';

package/dist/types/components/inline-edit/inline-edit.d.ts

@@ -0,0 +1,93 @@
+import { type ComponentPropsWithRef, type ReactNode, type Ref, type TextareaHTMLAttributes } from 'react';
+import { type Interpolation, type Theme } from '../../styling/css';
+import { type SxProps } from '../../styling/sx';
+export type InlineEditVariant = 'title' | 'body';
+export type InlineEditSize = 'sm' | 'md' | 'lg';
+export type InlineEditPhase = 'idle' | 'saving' | 'saved' | 'failed';
+type ControlElement = HTMLInputElement | HTMLTextAreaElement;
+export interface InlineEditMessages {
+    /**
+     * Accessible name of the resting trigger; `value` is the persisted value. While it is empty,
+     * the visible placeholder follows this text in the name.
+     */
+    edit: (context: {
+        label: string;
+        value: string;
+    }) => string;
+    save: string;
+    cancel: string;
+    retry: string;
+    /** Keyboard instructions read with the editor. */
+    instructions: (context: {
+        multiline: boolean;
+    }) => string;
+    saving: string;
+    saved: string;
+    failed: string;
+}
+export interface InlineEditPartProps {
+    className?: string;
+    css?: Interpolation<Theme>;
+}
+export interface InlineEditSlotProps {
+    root?: InlineEditPartProps;
+    trigger?: InlineEditPartProps;
+    control?: InlineEditPartProps;
+    actions?: InlineEditPartProps;
+    save?: InlineEditPartProps;
+    cancel?: InlineEditPartProps;
+    retry?: InlineEditPartProps;
+    description?: InlineEditPartProps;
+    error?: InlineEditPartProps;
+    status?: InlineEditPartProps;
+}
+/** Native attributes and handlers for the editor; value, editability and placeholder stay owned. */
+export interface InlineEditControlProps extends Omit<TextareaHTMLAttributes<ControlElement>, 'value' | 'defaultValue' | 'children' | 'disabled' | 'readOnly' | 'placeholder' | 'cols' | 'dangerouslySetInnerHTML'> {
+}
+export interface InlineEditProps extends Omit<ComponentPropsWithRef<'div'>, 'children' | 'defaultValue' | 'onChange'>, SxProps {
+    /** Persisted value shown by the trigger; never the draft. */
+    value?: string;
+    defaultValue?: string;
+    /** Requested once per resolved save, before the close request. */
+    onValueChange?: (value: string) => void;
+    /** Editing mode, independent from the value. */
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    /** Persists a changed value; a throw or rejection is a failed save. */
+    onSave: (next: string) => void | Promise<unknown>;
+    /** Accessible name of the editor and part of the trigger's name. */
+    label: string;
+    /** Returns a nonempty message to block the save and keep the editor open. */
+    validate?: (next: string) => string | null | undefined;
+    /** Turns the draft into the saved value. Defaults to the draft as typed. */
+    normalize?: (draft: string) => string;
+    /** Edits in a textarea; Shift+Enter inserts a newline. */
+    multiline?: boolean;
+    variant?: InlineEditVariant;
+    size?: InlineEditSize;
+    disabled?: boolean;
+    readOnly?: boolean;
+    /** Saves when focus leaves the whole widget. */
+    saveOnBlur?: boolean;
+    /** Resting content while the persisted value is empty. */
+    placeholder?: ReactNode;
+    /** Native placeholder of the editor. */
+    inputPlaceholder?: string;
+    description?: ReactNode;
+    /** External error; while present it marks the editor invalid and blocks saving. */
+    error?: ReactNode;
+    controlProps?: InlineEditControlProps;
+    /** The mounted editor element, or null while resting. */
+    controlRef?: Ref<ControlElement>;
+    messages?: Partial<InlineEditMessages>;
+    editIcon?: ReactNode;
+    saveIcon?: ReactNode;
+    cancelIcon?: ReactNode;
+    slotProps?: InlineEditSlotProps;
+}
+export declare function InlineEdit({ ref, value, defaultValue, onValueChange, open, defaultOpen, onOpenChange, onSave, label, validate, normalize, multiline, variant, size, disabled, readOnly, saveOnBlur, placeholder, inputPlaceholder, description, error, controlProps, controlRef, messages: messagesProp, editIcon, saveIcon, cancelIcon, slotProps, className, sx, onBlur, ...rest }: InlineEditProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare namespace InlineEdit {
+    var displayName: string;
+}
+export {};

package/dist/types/components/json-viewer/index.d.ts

@@ -0,0 +1,2 @@
+export { JsonViewer } from './json-viewer';
+export type { JsonValue, JsonValueType, JsonViewerLabels, JsonViewerPartProps, JsonViewerProps, JsonViewerSlotProps, } from './json-viewer';

package/dist/types/components/json-viewer/json-viewer.d.ts

@@ -0,0 +1,82 @@
+import { type ComponentPropsWithRef, type CSSProperties } from 'react';
+import { type Interpolation, type Theme } from '../../styling/css';
+import { type SxProps } from '../../styling/sx';
+export type JsonValue = null | boolean | number | string | JsonValue[] | {
+    [key: string]: JsonValue;
+};
+export type JsonValueType = 'object' | 'array' | 'string' | 'number' | 'boolean' | 'null';
+export interface JsonViewerLabels {
+    tree: string;
+    search: string;
+    expandAll: string;
+    collapseAll: string;
+    previousMatch: string;
+    nextMatch: string;
+    copyValue: string;
+    copyPath: string;
+    copied: string;
+    copyFailed: string;
+    invalidData: string;
+    /** Child count chip; `type` tells objects (keys) from arrays (items). */
+    count: (count: number, type: 'object' | 'array') => string;
+    match: (current: number, total: number, truncated: boolean) => string;
+    showMore: (remaining: number) => string;
+}
+export interface JsonViewerPartProps {
+    className?: string;
+    css?: Interpolation<Theme>;
+}
+export type JsonViewerSlotProps = Partial<Record<'toolbar' | 'search' | 'tree' | 'row' | 'group' | 'value' | 'pathBar' | 'status' | 'action', JsonViewerPartProps>>;
+export interface JsonViewerProps extends Omit<ComponentPropsWithRef<'div'>, 'onSelect' | 'onCopy' | 'defaultValue' | 'children'>, SxProps {
+    data: JsonValue;
+    rootName?: string;
+    expandedValue?: readonly string[];
+    defaultExpandedValue?: readonly string[];
+    onExpandedValueChange?: (paths: string[]) => void;
+    defaultExpandDepth?: number;
+    query?: string;
+    defaultQuery?: string;
+    onQueryChange?: (query: string) => void;
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (path: string) => void;
+    onNodeActivate?: (detail: {
+        path: string;
+        value: JsonValue;
+        type: JsonValueType;
+    }) => void;
+    searchable?: boolean;
+    copyable?: boolean;
+    showPath?: boolean;
+    pageSize?: number;
+    maxMatches?: number;
+    maxHeight?: CSSProperties['maxHeight'];
+    size?: 'sm' | 'md';
+    locale?: Intl.LocalesArgument;
+    labels?: Partial<JsonViewerLabels>;
+    onCopy?: (detail: {
+        kind: 'value' | 'path';
+        path: string;
+        text: string;
+    }) => void;
+    onCopyError?: (detail: {
+        kind: 'value' | 'path';
+        path: string;
+        error: unknown;
+    }) => void;
+    slotProps?: JsonViewerSlotProps;
+}
+/** Read-only JSON tree. Search overlays expansion/pages; clearing restores base state.
+ * Each expanded treeitem OWNS its child role=group via aria-owns; the group is a DOM sibling
+ * (flattened out of the treeitem) so the author name stays scoped to the label — nesting it in
+ * the DOM would fold the whole subtree into the treeitem's visible text and break the
+ * label-content-name-mismatch axe gate. Roving DOM focus follows the TreeView
+ * navigation contract. Right opens, Left closes/moves to parent even in RTL. Up/Down clamp;
+ * Home/End move; Enter/Space activate; 500ms typeahead; / searches; Ctrl/Cmd+C copies JSON
+ * (+Shift copies path).
+ * Strict JSON only, no getters/cycles/nonfinite numbers. Paged, not virtualized.
+ */
+export declare function JsonViewer({ data, rootName, expandedValue, defaultExpandedValue, onExpandedValueChange, defaultExpandDepth, query: queryProp, defaultQuery, onQueryChange, value: valueProp, defaultValue, onValueChange, onNodeActivate, searchable, copyable, showPath, pageSize: pageSizeProp, maxMatches: maxMatchesProp, maxHeight, size, locale, labels: labelProps, onCopy, onCopyError, slotProps, ref, className, sx, style, onKeyDown, onClick, 'aria-label': ariaLabel, 'aria-labelledby': labelledBy, 'aria-describedby': describedBy, ...rest }: JsonViewerProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare namespace JsonViewer {
+    var displayName: string;
+}

package/dist/types/components/mention-input/index.d.ts

@@ -0,0 +1,2 @@
+export { MentionInput, mentionText, serializeMentions } from './mention-input';
+export type { Mention, MentionKind, MentionValue, MentionPerson, MentionChannel, MentionSuggestion, MentionInputProps, MentionInputActions, MentionInputMessages, } from './mention-input';

package/dist/types/components/mention-input/mention-input.d.ts

@@ -0,0 +1,87 @@
+import { type ComponentPropsWithRef, type ReactNode, type Ref } from 'react';
+import type { SxProps } from '../../styling/sx';
+import { type FieldPartProps } from '../field/field-anatomy';
+export type MentionKind = 'person' | 'channel';
+export interface Mention {
+    readonly kind: MentionKind;
+    readonly id: string;
+    readonly label: string;
+    readonly start: number;
+    readonly end: number;
+}
+/** Ranges are immutable UTF-16 half-open offsets, matching native textarea selection. */
+export interface MentionValue {
+    readonly text: string;
+    readonly mentions: readonly Mention[];
+}
+export interface MentionPerson {
+    id: string;
+    name: string;
+    role?: string;
+    avatar?: ReactNode;
+}
+export interface MentionChannel {
+    id: string;
+    name: string;
+    description?: string;
+    members?: number;
+}
+export type MentionSuggestion = (MentionPerson & {
+    kind: 'person';
+}) | (MentionChannel & {
+    kind: 'channel';
+});
+export interface MentionInputActions {
+    insert(text: string): void;
+    openSuggestions(kind: MentionKind): void;
+    clear(): void;
+}
+export interface MentionInputMessages {
+    peopleLabel: string;
+    channelsLabel: string;
+    results(count: number, kind: MentionKind): string;
+    empty(kind: MentionKind, query: string): string;
+    added(mention: Mention): string;
+    removed(mention: Mention): string;
+    invalidValue: string;
+}
+type Part = 'root' | 'label' | 'control' | 'input' | 'mirror' | 'token' | 'panel' | 'list' | 'option' | 'empty' | 'description' | 'error' | 'status';
+export interface MentionInputProps extends Omit<ComponentPropsWithRef<'textarea'>, 'value' | 'defaultValue' | 'onSubmit'>, SxProps {
+    value?: MentionValue;
+    defaultValue?: MentionValue;
+    onValueChange?: (value: MentionValue) => void;
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    people?: readonly MentionPerson[];
+    channels?: readonly MentionChannel[];
+    onMentionAdd?: (mention: Mention) => void;
+    onSubmit?: (value: MentionValue) => void;
+    submitOnEnter?: boolean;
+    label?: ReactNode;
+    description?: ReactNode;
+    error?: ReactNode;
+    size?: 'sm' | 'md' | 'lg';
+    minRows?: number;
+    maxRows?: number;
+    maxSuggestions?: number;
+    placement?: 'auto' | 'top' | 'bottom';
+    locale?: Intl.LocalesArgument;
+    messages?: Partial<MentionInputMessages>;
+    renderSuggestion?: (item: MentionSuggestion, query: string) => ReactNode;
+    actionsRef?: Ref<MentionInputActions>;
+    slotProps?: Partial<Record<Part, FieldPartProps>>;
+}
+export declare function mentionText(kind: MentionKind, label: string): string;
+/** Invalid metadata is omitted; plain text is always preserved. The caller owns storage escaping. */
+export declare function serializeMentions(value: MentionValue, format?: (mention: Mention) => string): string;
+/** Native multiline textbox in a combobox semantic wrapper with virtual focus.
+ * Enter/Tab commit; Space edits;
+ * Shift+Tab leaves, Home/End edit, Escape dismisses. Pair input/mirror metric overrides.
+ * Native text undo is best-effort across engines; stale metadata is deliberately dropped.
+ * Intended for message-sized documents, not rich-text editing. */
+export declare function MentionInput({ ref, actionsRef, value: valueProp, defaultValue, onValueChange, open: openProp, defaultOpen, onOpenChange, people, channels, onMentionAdd, onSubmit, submitOnEnter, label, description, error, size, minRows, maxRows, maxSuggestions, placement, locale, messages, renderSuggestion, slotProps, className, sx, id, dir, required, disabled, readOnly, onChange, onInput, onKeyDown, onSelect, onFocus, onBlur, onScroll, onCompositionStart, onCompositionEnd, 'aria-labelledby': labelledBy, 'aria-describedby': describedBy, 'aria-invalid': invalid, ...rest }: MentionInputProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare namespace MentionInput {
+    var displayName: string;
+}
+export {};