@motifx-community/ui 0.1.0-beta.1 → 0.1.0-beta.3

package/dist/components/daterangebox/DateRangeBox.d.ts

@@ -0,0 +1,121 @@
+import { Emitter, type Bind, type Event as MotifEvent, type IBaseProp } from "@motifx/core";
+import type { DateKind } from "../../parts/dates/date-kind";
+import type { DatePattern } from "../../parts/dates/date-pattern";
+import { Field } from "../../parts/field/Field";
+import { OptionList } from "../../parts/list/OptionList";
+import { InputMask } from "../../parts/mask/InputMask";
+import { Popup } from "../../parts/popup/Popup";
+import type { PopupCloseReason } from "../../parts/popup/popup-close-reason";
+import type { ValidationRule } from "../../parts/validation/validation-rule";
+import { Calendar } from "../calendar/Calendar";
+import type { DateRange } from "./date-range";
+import type { DateRangeBoxProps } from "./date-range-box-props";
+import type { DateRangePreset } from "./date-range-preset";
+interface Parts {
+    startInput: HTMLInputElement;
+    endInput: HTMLInputElement;
+    separator: HTMLSpanElement;
+    startMask: InputMask;
+    endMask: InputMask;
+    pattern: DatePattern;
+    unfinished: [boolean, boolean];
+    toggle: HTMLButtonElement | null;
+    popup: Popup | null;
+    calendars: Calendar[];
+    presetList: OptionList<DateRangePreset> | null;
+    stage: 0 | 1;
+    opened: Emitter<void>;
+    closed: Emitter<PopupCloseReason>;
+}
+/**
+ * A start and an end date in one field: typed in the locale's order through two masks, or picked on the popup from
+ * two months side by side (the first pick the start, the second the end), from ready-made ranges (`presets`), with
+ * `min`, `max`, `disabledDates`, and the least and the most days a range may span (`minDays`, `maxDays`). The
+ * value is a `[start, end]` pair; `x-model` binds it.
+ *
+ * @example
+ * <DateRangeBox label="Stay" x-model={() => this.booking.nights} minDays={1} maxDays={30} presets />
+ * <DateRangeBox label="Report" type="datetime" calendars={1} />
+ */
+export declare class DateRangeBox extends Field<DateRange, DateRangeBoxProps> {
+    constructor(props?: IBaseProp<DateRangeBoxProps>);
+    get type(): Exclude<DateKind, 'time'>;
+    set type(value: Bind<Exclude<DateKind, 'time'>>);
+    get min(): Date | null;
+    set min(value: Bind<Date | null>);
+    get max(): Date | null;
+    set max(value: Bind<Date | null>);
+    get disabledDates(): ((date: Date) => boolean) | null;
+    set disabledDates(value: Bind<((date: Date) => boolean) | null>);
+    get minDays(): number | null;
+    set minDays(value: Bind<number | null>);
+    get maxDays(): number | null;
+    set maxDays(value: Bind<number | null>);
+    get locale(): string;
+    set locale(value: Bind<string>);
+    get displayFormat(): Intl.DateTimeFormatOptions | null;
+    set displayFormat(value: Bind<Intl.DateTimeFormatOptions | null>);
+    get startPlaceholder(): string;
+    set startPlaceholder(value: Bind<string>);
+    get endPlaceholder(): string;
+    set endPlaceholder(value: Bind<string>);
+    get clearButton(): boolean;
+    set clearButton(value: Bind<boolean>);
+    get showSeconds(): boolean;
+    set showSeconds(value: Bind<boolean>);
+    get firstDayOfWeek(): number | null;
+    set firstDayOfWeek(value: Bind<number | null>);
+    get showWeekNumbers(): boolean;
+    set showWeekNumbers(value: Bind<boolean>);
+    get showPickerButton(): boolean;
+    set showPickerButton(value: Bind<boolean>);
+    get calendars(): 1 | 2;
+    set calendars(value: Bind<1 | 2>);
+    get presets(): readonly DateRangePreset[] | boolean;
+    set presets(value: Bind<readonly DateRangePreset[] | boolean>);
+    get closeOnComplete(): boolean;
+    set closeOnComplete(value: Bind<boolean>);
+    /** The start, and the end, as properties of their own. */
+    get startDate(): Date | null;
+    set startDate(value: Date | null);
+    get endDate(): Date | null;
+    set endDate(value: Date | null);
+    /** The start's input; the end's is `endInputElement`. */
+    get inputElement(): HTMLInputElement;
+    get endInputElement(): HTMLInputElement;
+    /** A side's text is not a whole, real date yet. */
+    get unfinished(): boolean;
+    /** Whether the popup is open. Reactive. */
+    get opened(): boolean;
+    set opened(value: boolean);
+    get onOpened(): MotifEvent<void>;
+    get onClosed(): MotifEvent<PopupCloseReason>;
+    /** Opens the calendars; `false` when disabled or read-only. */
+    open(): boolean;
+    close(): void;
+    clear(): void;
+    protected createControl(): HTMLElement;
+    protected emptyValue(): DateRange;
+    protected normalizeValue(value: DateRange): DateRange;
+    protected sameValue(a: DateRange, b: DateRange): boolean;
+    protected isEmptyValue(value: DateRange): boolean;
+    protected renderValue(value: DateRange): void;
+    protected builtInRules(): ValidationRule<DateRange>[];
+    written(date: Date | null | undefined): string;
+    get rangeParts(): Parts;
+    renderPattern(): void;
+    renderNames(): void;
+    listen(): void;
+    typed(side: 0 | 1, e: Event): void;
+    showDisplayText(): void;
+    renderToggle(): void;
+    renderClear(): void;
+    createPopup(): Popup;
+    fillPopup(): void;
+    presetsNow(): DateRangePreset[];
+    followMonths(calendar: Calendar, index: number): void;
+    picked(day: Date, event?: Event): void;
+    pointed(day: Date | null): void;
+    syncPicker(): void;
+}
+export {};

package/dist/components/daterangebox/date-range-box-props.d.ts

@@ -0,0 +1,35 @@
+import type { Bind } from '@motifx/core';
+import type { DateKind } from '../../parts/dates/date-kind';
+import type { FieldProps } from '../../parts/field/field-props';
+import type { DateRange } from './date-range';
+import type { DateRangePreset } from './date-range-preset';
+/** Props of `DateRangeBox`: the field props (the value a `[start, end]` pair) plus its own. Each one is also a settable property. */
+export interface DateRangeBoxProps extends FieldProps<DateRange> {
+    /** `'date'` (the default) or `'datetime'`: the time is typed after the date, the calendars keep it. */
+    type?: Bind<Exclude<DateKind, 'time'>>;
+    min?: Bind<Date | null>;
+    max?: Bind<Date | null>;
+    disabledDates?: Bind<((date: Date) => boolean) | null>;
+    /** The least and the most days a range may span (the end counted from the start). */
+    minDays?: Bind<number | null>;
+    maxDays?: Bind<number | null>;
+    /** Default: the kit's language. It decides the order of the parts and the names of months and days. */
+    locale?: Bind<string>;
+    /** How the dates are shown while the field is not being edited, e.g. `{ dateStyle: 'medium' }`. */
+    displayFormat?: Bind<Intl.DateTimeFormatOptions | null>;
+    /** Shown in an empty box: the start's, and the end's. */
+    startPlaceholder?: Bind<string>;
+    endPlaceholder?: Bind<string>;
+    clearButton?: Bind<boolean>;
+    showSeconds?: Bind<boolean>;
+    firstDayOfWeek?: Bind<number | null>;
+    showWeekNumbers?: Bind<boolean>;
+    /** The button that opens the calendars. Default `true`. */
+    showPickerButton?: Bind<boolean>;
+    /** How many months the popup shows side by side. Default `2`. */
+    calendars?: Bind<1 | 2>;
+    /** Ready-made ranges beside the calendars: `true` for the kit's (today, yesterday, the last 7 and 30 days, this and last month), your own, or none. Default `false`. */
+    presets?: Bind<readonly DateRangePreset[] | boolean>;
+    /** Closes the popup once both ends are chosen. Default `true`. */
+    closeOnComplete?: Bind<boolean>;
+}

package/dist/components/daterangebox/date-range-preset.d.ts

@@ -0,0 +1,6 @@
+import type { DateRange } from './date-range';
+/** A ready-made range offered on the popup, made when it is chosen (so "today" is today's). */
+export interface DateRangePreset {
+    text: string;
+    range: () => DateRange;
+}

package/dist/components/daterangebox/date-range.d.ts

@@ -0,0 +1,2 @@
+/** A range of dates: its start and its end, either one `null` while not chosen. */
+export type DateRange = [Date | null, Date | null];

package/dist/components/daterangebox/index.d.ts

@@ -0,0 +1,4 @@
+export { DateRangeBox } from './DateRangeBox';
+export type { DateRange } from './date-range';
+export type { DateRangePreset } from './date-range-preset';
+export type { DateRangeBoxProps } from './date-range-box-props';

package/dist/components/draggable/Draggable.d.ts

@@ -0,0 +1,99 @@
+import { Component, Emitter, type Bind, type Event as MotifEvent, type IBaseProp } from "@motifx/core";
+import { Control } from "../../core/control";
+import { DragGhost } from "../../parts/drag/DragGhost";
+import type { DraggableEventArgs } from "./draggable-event-args";
+import type { DragAxis, DraggableProps, DragPosition } from "./draggable-props";
+import { DropTarget } from "./DropTarget";
+interface Session {
+    pointerId: number;
+    touch: boolean;
+    startX: number;
+    startY: number;
+    x: number;
+    y: number;
+    from: DragPosition;
+    started: boolean;
+    target: DropTarget | null;
+    refused: boolean;
+    timer: ReturnType<typeof setTimeout> | null;
+    rect: DOMRect | null;
+    bound: DOMRect | null;
+}
+/**
+ * Anything the user moves with the pointer, a finger (a long press) or the arrow keys: the JSX children in a box
+ * that follows the drag. It moves along `axis`, stays inside `boundary`, is taken by a `handle` only, or sends a
+ * `clone` after the pointer and stays where it is. A `DropTarget` of the same `group` under the pointer is told
+ * when it comes over, leaves and drops, with its `data`; what a drop does to your data is yours.
+ *
+ * @example
+ * <Draggable boundary="parent" x-model={() => this.note.at}><Card>…</Card></Draggable>
+ * <Draggable clone group="cards" data={card} handle=".grip">…</Draggable>
+ */
+export declare class Draggable extends Control<HTMLDivElement, DraggableProps> {
+    starting: Emitter<DraggableEventArgs>;
+    dragging: Emitter<DraggableEventArgs>;
+    ending: Emitter<DraggableEventArgs>;
+    ended: Emitter<DraggableEventArgs>;
+    live: Component<HTMLSpanElement>;
+    ghost: DragGhost;
+    session: Session | null;
+    stops: (() => void)[];
+    pos: DragPosition;
+    handleEl: HTMLElement | null;
+    constructor(props?: IBaseProp<DraggableProps>);
+    get axis(): DragAxis;
+    set axis(value: Bind<DragAxis>);
+    get boundary(): 'parent' | HTMLElement | null;
+    set boundary(value: Bind<'parent' | HTMLElement | null>);
+    get handle(): string | null;
+    set handle(value: Bind<string | null>);
+    get clone(): boolean;
+    set clone(value: Bind<boolean>);
+    get group(): string | null;
+    set group(value: Bind<string | null>);
+    get data(): unknown;
+    set data(value: unknown);
+    get step(): number;
+    set step(value: Bind<number>);
+    get position(): DragPosition | null;
+    set position(value: Bind<DragPosition | null>);
+    /** `position`, for `x-model`. */
+    get value(): DragPosition | null;
+    set value(value: DragPosition | null);
+    /** A drag is about to begin; `cancel` keeps the draggable in place. */
+    get onDragStarting(): MotifEvent<DraggableEventArgs>;
+    /** It is being dragged (`x`, `y`, `target`). */
+    get onDragging(): MotifEvent<DraggableEventArgs>;
+    /** The pointer let go; `cancel` brings the draggable back where it started. */
+    get onDragEnding(): MotifEvent<DraggableEventArgs>;
+    /** The drag ended (`x`, `y`, `target`, `dropped`). */
+    get onDragEnded(): MotifEvent<DraggableEventArgs>;
+    /** Where it stands now, in pixels from where it was laid out. */
+    get currentPosition(): DragPosition;
+    /** Whether it is being dragged. */
+    get isDragging(): boolean;
+    /** The element that takes the press and the keys: the handle, else the draggable itself. */
+    get handleElement(): HTMLElement;
+    onBuilt(): void;
+    applyPosition(): void;
+    drawHandle(): void;
+    args(target: DropTarget | null, event?: Event): DraggableEventArgs;
+    dropArgs(target: DropTarget, event?: Event): {
+        draggable: Draggable;
+        data: unknown;
+        cancel: boolean;
+        source: DropTarget;
+        event?: Event;
+    };
+    boundRect(): DOMRect | null;
+    within(dx: number, dy: number, rect: DOMRect | null, bound: DOMRect | null): DragPosition;
+    pointerDown(e: PointerEvent): void;
+    pointerMove(e: PointerEvent): void;
+    pointerUp(e: PointerEvent): void;
+    start(e: PointerEvent): boolean;
+    track(e: PointerEvent): void;
+    end(e: Event | null, drop: boolean): void;
+    keyDown(e: KeyboardEvent): void;
+    announce(): void;
+}
+export {};

package/dist/components/draggable/DropTarget.d.ts

@@ -0,0 +1,38 @@
+import { Emitter, type Bind, type Event as MotifEvent, type IBaseProp } from "@motifx/core";
+import { Control } from "../../core/control";
+import type { DropEventArgs } from "./drop-event-args";
+import type { DropTargetProps } from "./drop-target-props";
+/** Every drop target on the page, for the draggables to find the one under the pointer. */
+export declare const TARGETS: Set<DropTarget>;
+/**
+ * A place a `Draggable` of its group can be dropped on: marked while a drag of the group is under way and while
+ * the draggable is over it; `onDragEntering` may refuse it, `onDropped` tells what was dropped, with its `data`. The JSX
+ * children are its content; what a drop does to your data is yours.
+ *
+ * @example
+ * <DropTarget group="cards" onDropped={e => this.board.move(e.data as Card, 'done')}>…</DropTarget>
+ */
+export declare class DropTarget extends Control<HTMLDivElement, DropTargetProps> {
+    entered: Emitter<DropEventArgs>;
+    left: Emitter<DropEventArgs>;
+    dropped: Emitter<DropEventArgs>;
+    constructor(props?: IBaseProp<DropTargetProps>);
+    get group(): string | null;
+    set group(value: Bind<string | null>);
+    /** A draggable came over it (`draggable`, `data`); `cancel` refuses it. */
+    get onDragEntering(): MotifEvent<DropEventArgs>;
+    /** A draggable left it. */
+    get onDragLeaving(): MotifEvent<DropEventArgs>;
+    /** A draggable was dropped on it. */
+    get onDropped(): MotifEvent<DropEventArgs>;
+    /** Whether it takes the draggables of `group`. */
+    takes(group: string | null): boolean;
+    /** @internal A drag of its group began or ended. */
+    markActive(on: boolean): void;
+    /** @internal The draggable came over it; `false` when it is refused. */
+    enter(args: DropEventArgs): boolean;
+    /** @internal The draggable left it. */
+    leave(args: DropEventArgs): void;
+    /** @internal The draggable was dropped on it. */
+    drop(args: DropEventArgs): void;
+}

package/dist/components/draggable/draggable-event-args.d.ts

@@ -0,0 +1,17 @@
+import type { EventArgs } from '@motifx/core';
+import type { Draggable } from './Draggable';
+import type { DropTarget } from './DropTarget';
+/** A drag begins (`cancel = true` keeps it in place), goes on, is about to end (`cancel` brings it back), or ended. */
+export interface DraggableEventArgs extends EventArgs {
+    /** Where the draggable stands, in pixels from where it was laid out. */
+    x: number;
+    y: number;
+    /** The drop target under the pointer that takes it, `null` for none. */
+    target: DropTarget | null;
+    /** By the pointer or a key, else from the props. */
+    byUser: boolean;
+    /** At the end: a target took it. */
+    dropped?: boolean;
+    source: Draggable;
+    event?: Event;
+}

package/dist/components/draggable/draggable-props.d.ts

@@ -0,0 +1,37 @@
+import type { Bind } from '@motifx/core';
+import type { ControlProps } from '../../core/control';
+import type { DraggableEventArgs } from './draggable-event-args';
+/** The way a draggable may move. */
+export type DragAxis = 'both' | 'x' | 'y';
+/** Where a draggable stands, in pixels from where it was laid out. */
+export interface DragPosition {
+    x: number;
+    y: number;
+}
+/** Props of `Draggable`. Each one is also a settable property; a function is followed. */
+export interface DraggableProps extends ControlProps {
+    /** Default `'both'`. */
+    axis?: Bind<DragAxis>;
+    /** The draggable stays inside this: its parent, or an element it lies in. Default `null`, no limit. */
+    boundary?: Bind<'parent' | HTMLElement | null>;
+    /** A selector inside the draggable: only a press there drags it, and it takes the keys. Default `null`, the whole draggable. */
+    handle?: Bind<string | null>;
+    /** A copy follows the pointer and the draggable stays where it is; for a drop target to take. Default `false`. */
+    clone?: Bind<boolean>;
+    /** Drop targets of the same group take it. Default `null`. */
+    group?: Bind<string | null>;
+    /** Anything of your own, given to the drop target. */
+    data?: unknown;
+    /** Pixels an arrow key moves it by. Default `10`. */
+    step?: Bind<number>;
+    /** Where it stands: given, it is applied; after every drag or key the new place is written to `x-model`. */
+    position?: Bind<DragPosition | null>;
+    /** A drag is about to begin; cancelable. */
+    onDragStarting?: (e: DraggableEventArgs) => void;
+    /** It is being dragged (`x`, `y`, the `target` under the pointer). */
+    onDragging?: (e: DraggableEventArgs) => void;
+    /** The pointer let go; `cancel = true` brings it back where it started. */
+    onDragEnding?: (e: DraggableEventArgs) => void;
+    /** The drag ended: where it stands, and whether a target took it (`dropped`). */
+    onDragEnded?: (e: DraggableEventArgs) => void;
+}

package/dist/components/draggable/drop-event-args.d.ts

@@ -0,0 +1,11 @@
+import type { EventArgs } from '@motifx/core';
+import type { Draggable } from './Draggable';
+import type { DropTarget } from './DropTarget';
+/** A draggable came over a target (`cancel = true` refuses it), left it, or was dropped on it. */
+export interface DropEventArgs extends EventArgs {
+    draggable: Draggable;
+    /** The draggable's `data`, as given. */
+    data: unknown;
+    source: DropTarget;
+    event?: Event;
+}

package/dist/components/draggable/drop-target-props.d.ts

@@ -0,0 +1,13 @@
+import type { Bind } from '@motifx/core';
+import type { ControlProps } from '../../core/control';
+import type { DropEventArgs } from './drop-event-args';
+/** Props of `DropTarget`. Each one is also a settable property; a function is followed. */
+export interface DropTargetProps extends ControlProps {
+    /** Takes the draggables of this group; `null` takes those without one. Default `null`. */
+    group?: Bind<string | null>;
+    /** A draggable came over it; `cancel = true` refuses it. */
+    onDragEntering?: (e: DropEventArgs) => void;
+    onDragLeaving?: (e: DropEventArgs) => void;
+    /** A draggable was dropped on it: your data is yours to move. */
+    onDropped?: (e: DropEventArgs) => void;
+}

package/dist/components/draggable/index.d.ts

@@ -0,0 +1,6 @@
+export { Draggable } from './Draggable';
+export { DropTarget } from './DropTarget';
+export type { DraggableProps, DragAxis, DragPosition } from './draggable-props';
+export type { DropTargetProps } from './drop-target-props';
+export type { DraggableEventArgs } from './draggable-event-args';
+export type { DropEventArgs } from './drop-event-args';

package/dist/components/fileuploader/FileUploader.d.ts

@@ -0,0 +1,133 @@
+import { Component, Emitter, type Bind, type Event as MotifEvent, type IBaseProp } from "@motifx/core";
+import { Field } from "../../parts/field/Field";
+import type { ValidationRule } from "../../parts/validation/validation-rule";
+import { Button } from "../button/Button";
+import { ProgressBar } from "../progress/ProgressBar";
+import type { FileUploaderProps } from "./file-uploader-props";
+import type { FilesAddedEventArgs } from "./files-added-event-args";
+import type { UploadEventArgs } from "./upload-event-args";
+import type { UploadItem } from "./upload-item";
+import type { UploadMode } from "./upload-mode";
+import type { UploadStatus } from "./upload-status";
+interface Parts {
+    select: HTMLButtonElement;
+    selectText: HTMLSpanElement;
+    input: HTMLInputElement;
+    drop: HTMLSpanElement;
+    uploadButton: HTMLButtonElement;
+    list: Component<HTMLUListElement> | null;
+    rows: Map<UploadItem, Row>;
+    items: UploadItem[];
+    jobs: Map<UploadItem, AbortController>;
+    dragDepth: number;
+}
+interface Row {
+    li: Component<HTMLLIElement>;
+    name: Component<HTMLSpanElement>;
+    size: Component<HTMLSpanElement>;
+    state: Component<HTMLSpanElement>;
+    bar: ProgressBar;
+    abort: Button;
+    retry: Button;
+    remove: Button;
+}
+/**
+ * Files chosen with a button or dropped on the box, listed with their size and what happens to them: uploaded as
+ * they come (`uploadUrl`, in one piece or in chunks, or your own `upload`), on an Upload button, or programmatically;
+ * progress, cancel, retry and remove on each. `accept`, `maxFileSize`, `minFileSize` and `maxFiles` turn files
+ * away, each listed with the reason. The value is the files taken; `x-model` binds it.
+ *
+ * @example
+ * <FileUploader label="Attachments" accept=".pdf,image/*" maxFileSize={5_000_000} uploadUrl="/api/files" x-model={() => this.form.files} />
+ * <FileUploader label="Photo" multiple={false} upload={(file, report, signal) => this.api.send(file, report, signal)} />
+ */
+export declare class FileUploader extends Field<readonly File[], FileUploaderProps> {
+    filesAdded: Emitter<FilesAddedEventArgs>;
+    fileRemoved: Emitter<UploadEventArgs>;
+    uploadStarted: Emitter<UploadEventArgs>;
+    progressed: Emitter<UploadEventArgs>;
+    uploaded: Emitter<UploadEventArgs>;
+    uploadFailed: Emitter<UploadEventArgs>;
+    uploadAborted: Emitter<UploadEventArgs>;
+    uploadWith: ((file: File, report: (fraction: number) => void, signal: AbortSignal) => Promise<unknown>) | null;
+    constructor(props?: IBaseProp<FileUploaderProps>);
+    get multiple(): boolean;
+    set multiple(value: Bind<boolean>);
+    get accept(): string;
+    set accept(value: Bind<string>);
+    get maxFileSize(): number | null;
+    set maxFileSize(value: Bind<number | null>);
+    get minFileSize(): number | null;
+    set minFileSize(value: Bind<number | null>);
+    get maxFiles(): number | null;
+    set maxFiles(value: Bind<number | null>);
+    get allowDrop(): boolean;
+    set allowDrop(value: Bind<boolean>);
+    get uploadMode(): UploadMode;
+    set uploadMode(value: Bind<UploadMode>);
+    get uploadUrl(): string | null;
+    set uploadUrl(value: Bind<string | null>);
+    get uploadMethod(): string;
+    set uploadMethod(value: Bind<string>);
+    get uploadHeaders(): Record<string, string> | null;
+    set uploadHeaders(value: Bind<Record<string, string> | null>);
+    get uploadField(): string;
+    set uploadField(value: Bind<string>);
+    get chunkSize(): number | null;
+    set chunkSize(value: Bind<number | null>);
+    get selectText(): string;
+    set selectText(value: Bind<string>);
+    get dropText(): string;
+    set dropText(value: Bind<string>);
+    get uploadText(): string;
+    set uploadText(value: Bind<string>);
+    get showFileList(): boolean;
+    set showFileList(value: Bind<boolean>);
+    /** Every file in the list, the refused ones too, with what happened to each. */
+    get items(): readonly UploadItem[];
+    /** An upload is running. */
+    get isUploading(): boolean;
+    get onFilesAdded(): MotifEvent<FilesAddedEventArgs>;
+    get onFileRemoved(): MotifEvent<UploadEventArgs>;
+    get onUploadStarted(): MotifEvent<UploadEventArgs>;
+    get onProgress(): MotifEvent<UploadEventArgs>;
+    get onUploaded(): MotifEvent<UploadEventArgs>;
+    get onUploadError(): MotifEvent<UploadEventArgs>;
+    get onUploadAborted(): MotifEvent<UploadEventArgs>;
+    /** Opens the browser's file dialog, as the button does. */
+    openDialog(): void;
+    /** Takes files as if chosen: the limits apply, `onFilesAdded` is asked, uploads start as the mode says. */
+    addFiles(files: Iterable<File>, event?: Event): void;
+    /** Uploads the files waiting (or one of them); `manual` mode calls this. */
+    upload(item?: UploadItem): Promise<void>;
+    /** Stops the upload of a file (or of every one); the file stays, listed as cancelled. */
+    abort(item?: UploadItem): void;
+    /** Takes a file out of the list and the value; a running upload is stopped. */
+    remove(item: UploadItem, event?: Event): void;
+    /** Takes every file out. */
+    clear(): void;
+    protected createControl(): HTMLElement;
+    protected emptyValue(): readonly File[];
+    protected normalizeValue(value: readonly File[]): readonly File[];
+    protected sameValue(a: readonly File[], b: readonly File[]): boolean;
+    protected isEmptyValue(value: readonly File[]): boolean;
+    protected renderValue(value: readonly File[]): void;
+    protected builtInRules(): ValidationRule<readonly File[]>[];
+    get uploadParts(): Parts;
+    listen(): void;
+    drawTexts(): void;
+    drawList(): void;
+    makeRow(item: UploadItem): Row;
+    drawRow(item: UploadItem, row: Row): void;
+    setStatus(item: UploadItem, status: UploadStatus, progress?: number, message?: string): void;
+    stop(item: UploadItem): void;
+    uploadItem(item: UploadItem): Promise<void>;
+    send(file: File, url: string, report: (fraction: number) => void, signal: AbortSignal): Promise<unknown>;
+    request(url: string, blob: Blob, file: File, piece: {
+        index: number;
+        count: number;
+        start: number;
+        end: number;
+    } | null, loaded: (bytes: number) => void, signal: AbortSignal): Promise<unknown>;
+}
+export {};

package/dist/components/fileuploader/file-uploader-props.d.ts

@@ -0,0 +1,46 @@
+import type { Bind } from '@motifx/core';
+import type { FieldProps } from '../../parts/field/field-props';
+import type { FilesAddedEventArgs } from './files-added-event-args';
+import type { UploadEventArgs } from './upload-event-args';
+import type { UploadMode } from './upload-mode';
+/** Props of `FileUploader`: the field props (the value the files taken) plus its own. Each one is also a settable property. */
+export interface FileUploaderProps extends FieldProps<readonly File[]> {
+    /** Several files at once. Default `true`. */
+    multiple?: Bind<boolean>;
+    /** What may be chosen, as for an `<input type="file">`: `.png,.jpg`, `image/*`, `application/pdf`. */
+    accept?: Bind<string>;
+    /** Bytes. A file outside is listed as refused, with the reason. */
+    maxFileSize?: Bind<number | null>;
+    minFileSize?: Bind<number | null>;
+    /** How many files may be taken in all. */
+    maxFiles?: Bind<number | null>;
+    /** Files may be dropped on the box. Default `true`. */
+    allowDrop?: Bind<boolean>;
+    /** When files are uploaded: `instant` (as chosen), `button` (an Upload button), `manual` (`upload()` programmatically). Default `instant` with `uploadUrl` or `upload`, else `manual`. */
+    uploadMode?: Bind<UploadMode>;
+    /** Where files are sent, by the uploader itself (XMLHttpRequest, with progress). */
+    uploadUrl?: Bind<string | null>;
+    /** Default `'POST'`. */
+    uploadMethod?: Bind<string>;
+    uploadHeaders?: Bind<Record<string, string> | null>;
+    /** The form field the file is sent in. Default `'file'`. */
+    uploadField?: Bind<string>;
+    /** Bytes per request; the file goes in pieces, each with its `Content-Range`. Default: the whole file at once. */
+    chunkSize?: Bind<number | null>;
+    /** Your own upload instead of `uploadUrl`: report progress (0 to 1) and stop on the signal; what it resolves to is the response. */
+    upload?: (file: File, report: (fraction: number) => void, signal: AbortSignal) => Promise<unknown>;
+    /** The texts: the select button, the drop hint, the Upload button; the kit's when not given. */
+    selectText?: Bind<string>;
+    dropText?: Bind<string>;
+    uploadText?: Bind<string>;
+    /** The list of files under the box. Default `true`. */
+    showFileList?: Bind<boolean>;
+    /** Files were chosen or dropped; cancelable. */
+    onFilesAdded?: (e: FilesAddedEventArgs) => void;
+    onFileRemoved?: (e: UploadEventArgs) => void;
+    onUploadStarted?: (e: UploadEventArgs) => void;
+    onProgress?: (e: UploadEventArgs) => void;
+    onUploaded?: (e: UploadEventArgs) => void;
+    onUploadError?: (e: UploadEventArgs) => void;
+    onUploadAborted?: (e: UploadEventArgs) => void;
+}

package/dist/components/fileuploader/files-added-event-args.d.ts

@@ -0,0 +1,9 @@
+import type { EventArgs } from '@motifx/core';
+import type { FileUploader } from './FileUploader';
+import type { UploadItem } from './upload-item';
+/** Files were chosen or dropped. `cancel = true` takes none of them; `refused` lists those the limits turned away. */
+export interface FilesAddedEventArgs extends EventArgs {
+    files: File[];
+    refused: UploadItem[];
+    source: FileUploader;
+}

package/dist/components/fileuploader/index.d.ts

@@ -0,0 +1,7 @@
+export { FileUploader } from './FileUploader';
+export type { FileUploaderProps } from './file-uploader-props';
+export type { UploadItem } from './upload-item';
+export type { UploadStatus } from './upload-status';
+export type { UploadMode } from './upload-mode';
+export type { UploadEventArgs } from './upload-event-args';
+export type { FilesAddedEventArgs } from './files-added-event-args';

package/dist/components/fileuploader/upload-event-args.d.ts

@@ -0,0 +1,10 @@
+import type { FileUploader } from './FileUploader';
+import type { UploadItem } from './upload-item';
+/** Something happened to one file of the uploader. */
+export interface UploadEventArgs {
+    item: UploadItem;
+    file: File;
+    /** What went wrong, when it did. */
+    error?: unknown;
+    source: FileUploader;
+}

package/dist/components/fileuploader/upload-item.d.ts

@@ -0,0 +1,12 @@
+import type { UploadStatus } from './upload-status';
+/** A file in the uploader's list, with what happened to it. */
+export interface UploadItem {
+    file: File;
+    status: UploadStatus;
+    /** 0 to 1 while uploading. */
+    progress: number;
+    /** What the upload answered (the response, or what your `upload` returned). */
+    response: unknown;
+    /** Why it failed or was refused, in the kit's language or the server's words. */
+    message: string;
+}

package/dist/components/fileuploader/upload-mode.d.ts

@@ -0,0 +1,2 @@
+/** When files are uploaded: as soon as they are chosen, when the Upload button is pressed, or never by the uploader (`upload()` programmatically). */
+export type UploadMode = 'instant' | 'button' | 'manual';

package/dist/components/fileuploader/upload-status.d.ts

@@ -0,0 +1,2 @@
+/** Where a file stands: chosen and waiting, being uploaded, uploaded, failed, cancelled, or refused (its type, size or count). */
+export type UploadStatus = 'ready' | 'uploading' | 'done' | 'error' | 'aborted' | 'invalid';

package/dist/components/filterbuilder/FilterBuilder.d.ts

@@ -124,7 +124,7 @@ export declare class FilterBuilder extends Control<HTMLDivElement, FilterBuilder
     private fitToField;
     /** The tree changed: the value follows (when it is another filter) and the rows are drawn again. */
     private changed;
-    /** A value from the prop or from code: the tree is built again, unless it is the value the tree stands for already. */
+    /** A value from the prop or programmatically: the tree is built again, unless it is the value the tree stands for already. */
     private takeValue;
     private inTree;
     /** Reads what the rows show, so the drawing effect follows it. */