@motifx-community/ui 0.0.0-stage → 0.1.0-beta.0

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

@@ -0,0 +1,70 @@
+import { type Bind, type Event as MotifEvent, type IBaseProp } from '@motifx/core';
+import { Control } from '../../core/control';
+import type { ValueChangedEventArgs } from '../../parts/field/value-changed-event-args';
+import type { CalendarProps } from './calendar-props';
+import type { CalendarView } from './calendar-view';
+/**
+ * A month of days to pick a date from (the APG date grid), with a year and a decade view to get
+ * far quickly. Names of months and days come from the locale.
+ *
+ * @example
+ * <Calendar x-model={() => this.form.day} min={new Date()} disabledDates={(d) => d.getDay() === 0} />
+ */
+export declare class Calendar extends Control<HTMLDivElement, CalendarProps> {
+    constructor(props?: IBaseProp<CalendarProps>);
+    get value(): Date | null;
+    set value(value: Bind<Date | null>);
+    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 firstDayOfWeek(): number;
+    set firstDayOfWeek(value: Bind<number | null>);
+    get locale(): string;
+    set locale(value: Bind<string>);
+    get showWeekNumbers(): boolean;
+    set showWeekNumbers(value: Bind<boolean>);
+    get showOtherMonths(): boolean;
+    set showOtherMonths(value: Bind<boolean>);
+    get showTodayButton(): boolean;
+    set showTodayButton(value: Bind<boolean>);
+    get minView(): CalendarView;
+    set minView(value: Bind<CalendarView>);
+    /** The view on screen. Reactive. Setting it shows that view. */
+    get currentView(): CalendarView;
+    set currentView(value: Bind<CalendarView>);
+    /** The date with the Tab stop; its month (or year) is the one on screen. */
+    get focusedDate(): Date;
+    get onValueChanged(): MotifEvent<ValueChangedEventArgs<Date | null>>;
+    /** Shows the month of `date` and puts the Tab stop on it. */
+    goTo(date: Date): void;
+    /** Focuses the cell with the Tab stop. */
+    focus(): boolean;
+    /** Whether `date` can be chosen: inside min and max, and not one of the disabled dates. */
+    canChoose(date: Date): boolean;
+    protected get focusElement(): HTMLElement;
+    private get parts();
+    private createParts;
+    private get firstDay();
+    private get currentLocale();
+    private get rtl();
+    private render;
+    /** The first and last day of what is on screen. */
+    private shownRange;
+    private renderMonth;
+    /** The year view (twelve months) and the decade view (twelve years, one on each side). */
+    private renderBlock;
+    /** A month or a year can be chosen when one of its days can. */
+    private canChooseIn;
+    private markCell;
+    private renderToday;
+    private page;
+    private zoomOut;
+    private clicked;
+    /** Enter or a press on a cell: a choice in the smallest view, else one view closer. */
+    private activate;
+    private choose;
+    private keyDown;
+}

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

@@ -0,0 +1,26 @@
+import type { Bind } from '@motifx/core';
+import type { ControlProps } from '../../core/control';
+import type { ValueChangedEventArgs } from '../../parts/field/value-changed-event-args';
+import type { CalendarView } from './calendar-view';
+/** Props of `Calendar`. Each one is also a settable, reactive property. */
+export interface CalendarProps extends ControlProps {
+    /** Two-way with `x-model`. */
+    value?: Bind<Date | null>;
+    min?: Bind<Date | null>;
+    max?: Bind<Date | null>;
+    /** Days that cannot be chosen, e.g. weekends. */
+    disabledDates?: Bind<((date: Date) => boolean) | null>;
+    /** 0 Sunday … 6 Saturday; by default the locale's. */
+    firstDayOfWeek?: Bind<number | null>;
+    /** Default: the page's language. */
+    locale?: Bind<string>;
+    showWeekNumbers?: Bind<boolean>;
+    /** Days of the months before and after. Default `true`. */
+    showOtherMonths?: Bind<boolean>;
+    showTodayButton?: Bind<boolean>;
+    /** The view on screen. Default `'month'`; the user moves between views too. */
+    currentView?: Bind<CalendarView>;
+    /** The view a choice is made in: `'year'` picks a month, `'decade'` a year. Default `'month'`. */
+    minView?: Bind<CalendarView>;
+    onValueChanged?: (e: ValueChangedEventArgs<Date | null>) => void;
+}

package/dist/components/calendar/calendar-view.d.ts

@@ -0,0 +1,2 @@
+/** What a calendar shows: the days of a month, the months of a year, or twelve years. */
+export type CalendarView = 'month' | 'year' | 'decade';

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

@@ -0,0 +1,3 @@
+export { Calendar } from './Calendar';
+export type { CalendarProps } from './calendar-props';
+export type { CalendarView } from './calendar-view';

package/dist/components/card/Card.d.ts

@@ -0,0 +1,92 @@
+import { type Bind, type Component, type ComponentBase, type Event as MotifEvent, type IBaseProp } from '@motifx/core';
+import { Control } from '../../core/control';
+import type { ControlSize } from '../../core/control-size';
+import type { IconSource } from '../../core/icon-source';
+import { Avatar } from '../avatar/Avatar';
+import type { AvatarProps } from '../avatar/avatar-props';
+import type { CardOrientation } from './card-orientation';
+import type { CardProps } from './card-props';
+import type { CardSelectedChangedEventArgs } from './card-selected-changed-event-args';
+import type { CardVariant } from './card-variant';
+/**
+ * A surface holding one thing: a picture running to its edges, a header (avatar, title, subtitle and an
+ * action), content (JSX children or `content`) and a row of actions (`footer`). Parts with nothing in them
+ * are left out. Its look defaults to the design language's; `clickable` makes the whole card pressable.
+ *
+ * @example
+ * <Card title="Ada Lovelace" subtitle="Mathematician" avatar={{ name: 'Ada Lovelace' }} footer={<Button text="Follow" />}>
+ *   First to publish an algorithm meant for a machine.
+ * </Card>
+ */
+export declare class Card extends Control<HTMLDivElement, CardProps> {
+    /** A look not given is the design language's. */
+    private readonly look;
+    private readonly mediaPart;
+    private readonly headerPart;
+    private readonly titlePart;
+    /** The title as text, or as the link of a link card. */
+    private readonly titleText;
+    private readonly titleLink;
+    private readonly subtitlePart;
+    private readonly selectPart;
+    private checkBox;
+    private readonly selectedChanged;
+    private byUser;
+    private ready;
+    private readonly slots;
+    private readonly placed;
+    private avatarPart;
+    /** The picture shown, a child of the media part. */
+    private mediaShown;
+    constructor(props?: IBaseProp<CardProps>);
+    get title(): string;
+    set title(value: Bind<string>);
+    get subtitle(): string;
+    set subtitle(value: Bind<string>);
+    get avatar(): AvatarProps | null;
+    set avatar(value: Bind<AvatarProps | null>);
+    get action(): ComponentBase | null;
+    set action(value: Bind<ComponentBase | null>);
+    get media(): IconSource | null;
+    set media(value: Bind<IconSource | null>);
+    get mediaAlt(): string;
+    set mediaAlt(value: Bind<string>);
+    get content(): ComponentBase | null;
+    set content(value: Bind<ComponentBase | null>);
+    get footer(): ComponentBase | null;
+    set footer(value: Bind<ComponentBase | null>);
+    get variant(): CardVariant;
+    set variant(value: Bind<CardVariant>);
+    get size(): ControlSize;
+    set size(value: Bind<ControlSize>);
+    get orientation(): CardOrientation;
+    set orientation(value: Bind<CardOrientation>);
+    get clickable(): boolean;
+    set clickable(value: Bind<boolean>);
+    get href(): string | null;
+    set href(value: Bind<string | null>);
+    get rel(): string;
+    set rel(value: Bind<string>);
+    get selectable(): boolean;
+    set selectable(value: Bind<boolean>);
+    get selected(): boolean;
+    set selected(value: Bind<boolean>);
+    /** It was selected or not any more, by the user or by code (`e.byUser`). */
+    get onSelectedChanged(): MotifEvent<CardSelectedChangedEventArgs>;
+    /** The part holding the content, for adding to it from code. */
+    get contentPart(): Component<HTMLDivElement>;
+    /** The avatar before the titles, when it has one. */
+    get avatarControl(): Avatar | null;
+    onMounted(): void;
+    private keyDown;
+    /** A component given in a prop goes into its part; the one it replaces leaves it (it stays yours). */
+    private place;
+    /** A press on a selectable card turns it on and off, unless it was on one of its own buttons, links or fields. */
+    private pressed;
+    private toggle;
+    private renderSelect;
+    private renderHeader;
+    private renderAvatar;
+    private renderMedia;
+    private renderLook;
+}

package/dist/components/card/card-orientation.d.ts

@@ -0,0 +1,2 @@
+/** Where a card's picture stands: above the rest, or at its start. */
+export type CardOrientation = 'vertical' | 'horizontal';

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

@@ -0,0 +1,44 @@
+import type { Bind, ComponentBase } from '@motifx/core';
+import type { ControlProps } from '../../core/control';
+import type { ControlSize } from '../../core/control-size';
+import type { IconSource } from '../../core/icon-source';
+import type { AvatarProps } from '../avatar/avatar-props';
+import type { CardOrientation } from './card-orientation';
+import type { CardSelectedChangedEventArgs } from './card-selected-changed-event-args';
+import type { CardVariant } from './card-variant';
+/** Props of `Card`. Each one is also a settable property; a function is followed. */
+export interface CardProps extends ControlProps {
+    /** The title; it names the card for screen readers. */
+    title?: Bind<string>;
+    /** The line under the title. */
+    subtitle?: Bind<string>;
+    /** An avatar before the titles (its props). */
+    avatar?: Bind<AvatarProps | null>;
+    /** Something at the end of the header: a menu button, a badge. */
+    action?: Bind<ComponentBase | null>;
+    /** A picture running to the card's edges: an image address, an element or a component. */
+    media?: Bind<IconSource | null>;
+    /** What the picture shows, for screen readers, when `media` is an image address. Default: none (it only adorns). */
+    mediaAlt?: Bind<string>;
+    /** What fills the content (besides JSX children). */
+    content?: Bind<ComponentBase | null>;
+    /** A row of actions under the content. */
+    footer?: Bind<ComponentBase | null>;
+    /** Default: the design language's (`elevated`). */
+    variant?: Bind<CardVariant>;
+    /** The space in and between its parts. Default `'md'`. */
+    size?: Bind<ControlSize>;
+    /** `horizontal` puts the picture at the start. Default `'vertical'`. */
+    orientation?: Bind<CardOrientation>;
+    /** The whole card can be pressed (`onclick`, Enter, Space). Default `false`. */
+    clickable?: Bind<boolean>;
+    /** The whole card is a link there: its title is the link, and a press anywhere on the card follows it. */
+    href?: Bind<string | null>;
+    /** The link's `rel`; `'router'` lets the MotifJS router take it. */
+    rel?: Bind<string>;
+    /** A check box on its top end corner, and a press on the card turns it on and off. Default `false`. */
+    selectable?: Bind<boolean>;
+    /** Whether it is selected. Default `false`. */
+    selected?: Bind<boolean>;
+    onSelectedChanged?: (e: CardSelectedChangedEventArgs) => void;
+}

package/dist/components/card/card-selected-changed-event-args.d.ts

@@ -0,0 +1,7 @@
+import type { Card } from './Card';
+export interface CardSelectedChangedEventArgs {
+    selected: boolean;
+    /** `true` when the user pressed it or its check box, `false` when code set it. */
+    byUser: boolean;
+    source: Card;
+}

package/dist/components/card/card-variant.d.ts

@@ -0,0 +1,2 @@
+/** The look of a card: raised with a shadow, filled, or only its outline. */
+export type CardVariant = 'elevated' | 'filled' | 'outline';

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

@@ -0,0 +1,5 @@
+export { Card } from './Card';
+export type { CardOrientation } from './card-orientation';
+export type { CardProps } from './card-props';
+export type { CardSelectedChangedEventArgs } from './card-selected-changed-event-args';
+export type { CardVariant } from './card-variant';

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

@@ -0,0 +1,34 @@
+import type { Bind, Event as MotifEvent, IBaseProp } from '@motifx/core';
+import type { ValueChangedEventArgs } from '../../parts/field/value-changed-event-args';
+import type { CheckBoxProps } from './check-box-props';
+import { ToggleField } from './ToggleField';
+/**
+ * A native checkbox with its caption: checked (`true`), unchecked (`false`) or indeterminate
+ * (`null`). `required` means it must be checked.
+ *
+ * @example
+ * <CheckBox label="&Remember me" x-model={() => this.form.remember} />
+ * <CheckBox label="All" threeState value={() => this.allState} />
+ *
+ * const terms = new CheckBox({ label: 'I accept the terms', required: true });
+ * this.panel.controls.add(terms);
+ * terms.value = true;
+ */
+export declare class CheckBox extends ToggleField<boolean | null, CheckBoxProps> {
+    /** Where the design language puts the focus ring: around the box, or around the box and its caption. */
+    private readonly focusLook;
+    constructor(props?: IBaseProp<CheckBoxProps>);
+    get value(): boolean | null;
+    set value(value: Bind<boolean | null>);
+    get threeState(): boolean;
+    set threeState(value: Bind<boolean>);
+    get onValueChanged(): MotifEvent<ValueChangedEventArgs<boolean | null>>;
+    onMounted(): void;
+    protected emptyValue(): boolean | null;
+    protected normalizeValue(value: boolean | null): boolean | null;
+    protected peekValue(): boolean | null;
+    protected isEmptyValue(value: boolean | null): boolean;
+    protected renderValue(): void;
+    protected nextValue(): boolean | null;
+    private get drawn();
+}

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

@@ -0,0 +1,26 @@
+import type { Bind, IBaseProp } from '@motifx/core';
+import { Field } from '../../parts/field/Field';
+import type { LabelPosition } from './label-position';
+import type { ToggleFieldProps } from './toggle-field-props';
+/**
+ * The base of the fields drawn as a native checkbox (`CheckBox`, `Switch`): the caption sits next
+ * to the box, a click, Space or the access key asks the subclass for the next value, and
+ * read-only keeps the value as it is.
+ */
+export declare abstract class ToggleField<T, TProps extends ToggleFieldProps<T> = ToggleFieldProps<T>> extends Field<T, TProps> {
+    constructor(props?: IBaseProp<TProps>);
+    get labelPosition(): LabelPosition;
+    set labelPosition(value: Bind<LabelPosition>);
+    get name(): string;
+    set name(value: Bind<string>);
+    get inputElement(): HTMLInputElement;
+    /** Changes the value as a click does. */
+    toggle(): void;
+    /** The access key focuses the box and clicks it, as a press on its caption does. */
+    onAccessKey(): boolean;
+    /** A checkbox has no native read-only state: it is said with ARIA, and a click is blocked. */
+    protected renderReadOnly(on: boolean): void;
+    protected createControl(): HTMLElement;
+    /** The value a click makes of the current one. */
+    protected abstract nextValue(): T;
+}

package/dist/components/checkbox/check-box-props.d.ts

@@ -0,0 +1,7 @@
+import type { Bind } from '@motifx/core';
+import type { ToggleFieldProps } from './toggle-field-props';
+/** Props of `CheckBox`. Each one is also a settable, reactive property. */
+export interface CheckBoxProps extends ToggleFieldProps<boolean | null> {
+    /** A click goes unchecked → checked → indeterminate (`null`) → unchecked. Default `false`: checked and unchecked only. */
+    threeState?: Bind<boolean>;
+}

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

@@ -0,0 +1,5 @@
+export { CheckBox } from './CheckBox';
+export type { CheckBoxProps } from './check-box-props';
+export { ToggleField } from './ToggleField';
+export type { ToggleFieldProps } from './toggle-field-props';
+export type { LabelPosition } from './label-position';

package/dist/components/checkbox/label-position.d.ts

@@ -0,0 +1,2 @@
+/** Where a caption sits next to its control: after it (`end`) or before it (`start`), in the reading direction. */
+export type LabelPosition = 'start' | 'end';

package/dist/components/checkbox/toggle-field-props.d.ts

@@ -0,0 +1,10 @@
+import type { Bind } from '@motifx/core';
+import type { FieldProps } from '../../parts/field/field-props';
+import type { LabelPosition } from './label-position';
+/** Props of a field drawn as a native checkbox (`CheckBox`, `Switch`). Each one is also a settable, reactive property. */
+export interface ToggleFieldProps<T> extends FieldProps<T> {
+    /** Where the caption sits. Default `'end'`. */
+    labelPosition?: Bind<LabelPosition>;
+    /** The name it is sent with in a form. */
+    name?: Bind<string>;
+}

package/dist/components/chip/Chip.d.ts

@@ -0,0 +1,86 @@
+import { type Bind, type Event as MotifEvent, type IBaseProp } from '@motifx/core';
+import { Control } from '../../core/control';
+import type { ControlSize } from '../../core/control-size';
+import type { IconSource } from '../../core/icon-source';
+import { Avatar } from '../avatar/Avatar';
+import type { AvatarProps } from '../avatar/avatar-props';
+import type { ChipProps } from './chip-props';
+import type { ChipRemoveEventArgs } from './chip-remove-event-args';
+import type { ChipSelectedChangedEventArgs } from './chip-selected-changed-event-args';
+import type { ChipTone } from './chip-tone';
+import type { ChipVariant } from './chip-variant';
+/**
+ * A short text with an icon or an avatar before it and a remove button after it. It can be pressed
+ * (`clickable`), turned on and off (`selectable`, a filter) or removed (`removable`: its button and
+ * Delete / Backspace raise `onRemove`, removing it is yours to do). Its look defaults to the design
+ * language's. In a `ChipGroup` that selects, the group decides which chips are selected.
+ *
+ * @example
+ * <Chip text="Vegan" selectable selected={() => this.filters.vegan} onSelectedChanged={(e) => (this.filters.vegan = e.selected)} />
+ * <Chip text={() => this.user.name} avatar={{ name: this.user.name }} removable onRemove={() => this.removeUser()} />
+ */
+export declare class Chip extends Control<HTMLSpanElement, ChipProps> {
+    /** A look not given is the design language's. */
+    private readonly look;
+    private readonly removed;
+    private readonly selectedChanged;
+    private readonly checkPart;
+    private readonly iconPart;
+    private readonly textPart;
+    private readonly removePart;
+    private avatarPart;
+    /** The icon shown, a child of the icon part. */
+    private iconShown;
+    private byUser;
+    private ready;
+    constructor(props?: IBaseProp<ChipProps>);
+    get value(): unknown;
+    set value(value: Bind<unknown>);
+    get icon(): IconSource | null;
+    set icon(value: Bind<IconSource | null>);
+    get avatar(): AvatarProps | null;
+    set avatar(value: Bind<AvatarProps | null>);
+    get selectable(): boolean;
+    set selectable(value: Bind<boolean>);
+    get selected(): boolean;
+    set selected(value: Bind<boolean>);
+    get clickable(): boolean;
+    set clickable(value: Bind<boolean>);
+    get removable(): boolean;
+    set removable(value: Bind<boolean>);
+    get variant(): ChipVariant;
+    set variant(value: Bind<ChipVariant>);
+    get tone(): ChipTone;
+    set tone(value: Bind<ChipTone>);
+    get size(): ControlSize;
+    set size(value: Bind<ControlSize>);
+    /** The user asked to remove it (its button, or Delete / Backspace). */
+    get onRemove(): MotifEvent<ChipRemoveEventArgs>;
+    /** It was turned on or off, by the user or by code (`e.byUser`). */
+    get onSelectedChanged(): MotifEvent<ChipSelectedChangedEventArgs>;
+    /** The avatar before the text, when it has one. */
+    get avatarControl(): Avatar | null;
+    /** Asks for it to be removed, as its remove button does. */
+    remove(): void;
+    onMounted(): void;
+    /** @internal Draws again what a group took over or gave back (selection, role, Tab stop). */
+    drawState(): void;
+    /** In a group, the group owns the Tab stop (arrow keys move between chips). */
+    private get inGroup();
+    /** In a group that selects, the group owns the selection and the role. */
+    private get asOption();
+    private get pressable();
+    /** @internal Whether it takes focus: it can be pressed or removed. */
+    get focusable(): boolean;
+    /** Turns it on or off as the user did. */
+    private toggle;
+    private pressed;
+    private keyDown;
+    private renderText;
+    private renderIcon;
+    private renderAvatar;
+    /** What stands before the text: the check mark when it shows, else the icon or the avatar. */
+    private renderLead;
+    private renderState;
+    private renderLook;
+}

package/dist/components/chip/ChipGroup.d.ts

@@ -0,0 +1,45 @@
+import { type Bind, type Event as MotifEvent, type IBaseProp } from '@motifx/core';
+import { Control } from '../../core/control';
+import { Chip } from './Chip';
+import type { ChipGroupProps } from './chip-group-props';
+import type { ChipGroupSelection } from './chip-group-selection';
+import type { ChipGroupValueChangedEventArgs } from './chip-group-value-changed-event-args';
+/**
+ * Chips in a row that wraps. With `selection`, pressing a chip selects it (`single`: that one,
+ * `multiple`: on and off) and `value` (or `x-model`) holds the chips' values; Tab stops once and the arrow keys,
+ * Home and End move between the chips. Chips from a JSX list are counted as the list changes.
+ *
+ * @example
+ * <ChipGroup selection="multiple" value={() => this.filters.diets} onValueChanged={(e) => (this.filters.diets = e.value as string[])} label="Diet">
+ *   <Chip text="Vegan" />
+ *   <Chip text="Gluten free" />
+ * </ChipGroup>
+ */
+export declare class ChipGroup extends Control<HTMLDivElement, ChipGroupProps> {
+    private readonly valueChanged;
+    /** The chip focused last: Tab comes back to it. */
+    private current;
+    private byUser;
+    private ready;
+    constructor(props?: IBaseProp<ChipGroupProps>);
+    get selection(): ChipGroupSelection;
+    set selection(value: Bind<ChipGroupSelection>);
+    get value(): unknown;
+    set value(value: Bind<unknown>);
+    get wrap(): boolean;
+    set wrap(value: Bind<boolean>);
+    get label(): string;
+    set label(value: Bind<string>);
+    /** The value changed, by the user or by code (`e.byUser`). */
+    get onValueChanged(): MotifEvent<ChipGroupValueChangedEventArgs>;
+    /** The chips in it, in order, from JSX lists too. */
+    get chips(): Chip[];
+    /** Whether the chip of `value` is selected. */
+    isSelected(value: unknown): boolean;
+    private chipAt;
+    private pressed;
+    private keyDown;
+    private renderChips;
+    /** One Tab stop: the chip focused last, else the first selected, else the first that takes focus. */
+    private renderStops;
+}

package/dist/components/chip/chip-group-props.d.ts

@@ -0,0 +1,16 @@
+import type { Bind } from '@motifx/core';
+import type { ControlProps } from '../../core/control';
+import type { ChipGroupSelection } from './chip-group-selection';
+import type { ChipGroupValueChangedEventArgs } from './chip-group-value-changed-event-args';
+/** Props of `ChipGroup`. Each one is also a settable property; a function is followed. */
+export interface ChipGroupProps extends ControlProps {
+    /** Default `'none'`. */
+    selection?: Bind<ChipGroupSelection>;
+    /** The selected chip's value (`single`), or an array of the selected ones' values (`multiple`). */
+    value?: Bind<unknown>;
+    /** `false` keeps the chips on one line that scrolls. Default `true`. */
+    wrap?: Bind<boolean>;
+    /** What screen readers call the group ("Filters"). */
+    label?: Bind<string>;
+    onValueChanged?: (e: ChipGroupValueChangedEventArgs) => void;
+}

package/dist/components/chip/chip-group-selection.d.ts

@@ -0,0 +1,2 @@
+/** What a chip group lets the user select: nothing, one chip, or several. */
+export type ChipGroupSelection = 'none' | 'single' | 'multiple';

package/dist/components/chip/chip-group-value-changed-event-args.d.ts

@@ -0,0 +1,8 @@
+import type { ChipGroup } from './ChipGroup';
+export interface ChipGroupValueChangedEventArgs {
+    /** The value of the selected chip (`single`, `null` for none) or of each selected chip (`multiple`). */
+    value: unknown;
+    /** `true` when the user pressed a chip, `false` when code set the value. */
+    byUser: boolean;
+    source: ChipGroup;
+}

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

@@ -0,0 +1,34 @@
+import type { Bind } from '@motifx/core';
+import type { ControlProps } from '../../core/control';
+import type { ControlSize } from '../../core/control-size';
+import type { IconSource } from '../../core/icon-source';
+import type { AvatarProps } from '../avatar/avatar-props';
+import type { ChipRemoveEventArgs } from './chip-remove-event-args';
+import type { ChipSelectedChangedEventArgs } from './chip-selected-changed-event-args';
+import type { ChipTone } from './chip-tone';
+import type { ChipVariant } from './chip-variant';
+/** Props of `Chip`. Each one is also a settable property; a function is followed. */
+export interface ChipProps extends ControlProps {
+    /** What it stands for in a group's value. Default: its text. */
+    value?: Bind<unknown>;
+    /** An icon before the text: an image address, an element or a component. */
+    icon?: Bind<IconSource | null>;
+    /** An avatar before the text (its props; the chip sets its size). */
+    avatar?: Bind<AvatarProps | null>;
+    /** Pressed, it turns on and off (a filter). In a group that selects, the group decides. Default `false`. */
+    selectable?: Bind<boolean>;
+    /** Whether it is on. Default `false`. */
+    selected?: Bind<boolean>;
+    /** It can be pressed like a button (`onclick`). Default `false`. */
+    clickable?: Bind<boolean>;
+    /** A remove button after the text; it and Delete / Backspace raise `onRemove`. Default `false`. */
+    removable?: Bind<boolean>;
+    /** Default: the design language's (`filled`, or `outline` where the language draws chips that way). */
+    variant?: Bind<ChipVariant>;
+    /** Default `'standard'`. */
+    tone?: Bind<ChipTone>;
+    /** Default `'md'`. */
+    size?: Bind<ControlSize>;
+    onRemove?: (e: ChipRemoveEventArgs) => void;
+    onSelectedChanged?: (e: ChipSelectedChangedEventArgs) => void;
+}

package/dist/components/chip/chip-remove-event-args.d.ts

@@ -0,0 +1,7 @@
+import type { Chip } from './Chip';
+/** The user asked to remove a chip (its remove button, or Delete / Backspace); removing it is yours to do. */
+export interface ChipRemoveEventArgs {
+    /** `true` when asked with the keyboard. */
+    byKeyboard: boolean;
+    source: Chip;
+}

package/dist/components/chip/chip-selected-changed-event-args.d.ts

@@ -0,0 +1,7 @@
+import type { Chip } from './Chip';
+export interface ChipSelectedChangedEventArgs {
+    selected: boolean;
+    /** `true` when the user pressed it, `false` when code set it. */
+    byUser: boolean;
+    source: Chip;
+}

package/dist/components/chip/chip-tone.d.ts

@@ -0,0 +1,2 @@
+/** The colour a chip says something with. */
+export type ChipTone = 'standard' | 'accent' | 'info' | 'success' | 'caution' | 'danger';

package/dist/components/chip/chip-variant.d.ts

@@ -0,0 +1,2 @@
+/** The look of a chip: filled, or only its outline. */
+export type ChipVariant = 'filled' | 'outline';

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

@@ -0,0 +1,10 @@
+export { Chip } from './Chip';
+export { ChipGroup } from './ChipGroup';
+export type { ChipGroupProps } from './chip-group-props';
+export type { ChipGroupSelection } from './chip-group-selection';
+export type { ChipGroupValueChangedEventArgs } from './chip-group-value-changed-event-args';
+export type { ChipProps } from './chip-props';
+export type { ChipRemoveEventArgs } from './chip-remove-event-args';
+export type { ChipSelectedChangedEventArgs } from './chip-selected-changed-event-args';
+export type { ChipTone } from './chip-tone';
+export type { ChipVariant } from './chip-variant';