@tolle_/tolle-ui 18.2.29 → 18.3.0

package/lib/context.component.d.ts

@@ -0,0 +1,134 @@
+import { OnChanges, OnDestroy, OnInit } from '@angular/core';
+import { type VariantProps } from 'class-variance-authority';
+import * as i0 from "@angular/core";
+/** How close the context window is to being full. */
+export type ContextLevel = 'normal' | 'warning' | 'critical';
+/** Everything a `tolle-context` knows about the current window. */
+export interface ContextUsage {
+    used: number;
+    total: number;
+    inputTokens: number | null;
+    outputTokens: number | null;
+    cost: number | null;
+    /** Fraction of the window consumed, clamped to 0–1. */
+    ratio: number;
+    level: ContextLevel;
+}
+declare const contextTriggerVariants: (props?: ({
+    level?: "warning" | "normal" | "critical" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export type ContextProps = VariantProps<typeof contextTriggerVariants>;
+/** Formats a raw token count as a short, readable string. */
+export declare function formatTokens(value: number): string;
+/**
+ * Publishes the parent `tolle-context`'s numbers to its OnPush trigger and
+ * content children, which receive none of it as their own inputs.
+ */
+export declare class ContextService {
+    private readonly usageSource;
+    /** Emits the current context-window usage. */
+    readonly usage$: import("rxjs").Observable<ContextUsage>;
+    get usage(): ContextUsage;
+    setUsage(usage: ContextUsage): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ContextService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<ContextService>;
+}
+/**
+ * A token / context-window usage indicator: a compact percentage and bar that
+ * shifts to the warning and destructive tokens as the window fills, with a
+ * hover breakdown of input, output and cost.
+ *
+ * ```html
+ * <tolle-context [used]="82000" [total]="128000" [inputTokens]="61000" [outputTokens]="21000" [cost]="0.42"></tolle-context>
+ * ```
+ * @new
+ */
+export declare class ContextComponent implements OnInit, OnChanges, OnDestroy {
+    /** Tokens consumed so far. @default 0 */
+    used: number;
+    /** Size of the context window in tokens. @default 0 */
+    total: number;
+    /** Tokens spent on the prompt, shown in the breakdown. @default null */
+    inputTokens: number | null;
+    /** Tokens produced by the model, shown in the breakdown. @default null */
+    outputTokens: number | null;
+    /** Spend for this context, shown in the breakdown. @default null */
+    cost: number | null;
+    /** Ratio at or above which the indicator turns warning-coloured. @default 0.75 */
+    warningThreshold: number;
+    /** Ratio at or above which the indicator turns destructive-coloured. @default 0.9 */
+    criticalThreshold: number;
+    /** Side of the indicator the breakdown opens on. @default 'top' */
+    placement: 'top' | 'bottom' | 'left' | 'right';
+    /** Milliseconds to wait before opening the breakdown. @default 150 */
+    openDelay: number;
+    /** Milliseconds to wait before closing the breakdown. @default 200 */
+    closeDelay: number;
+    /** Extra Tailwind classes merged onto the indicator via `cn()` (last-wins). */
+    class: string;
+    private readonly service;
+    private readonly cdr;
+    private refreshTimer?;
+    ngOnInit(): void;
+    ngOnChanges(): void;
+    /** Fraction of the window consumed, clamped to 0–1. */
+    get ratio(): number;
+    /** Which colour band the current usage falls into. */
+    get level(): ContextLevel;
+    private push;
+    /**
+     * `tolle-hover-card` toggles its own visibility from a `setTimeout`, which
+     * never marks this OnPush view dirty — re-check once the delay has elapsed.
+     */
+    scheduleRefresh(delay: number): void;
+    ngOnDestroy(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ContextComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ContextComponent, "tolle-context", never, { "used": { "alias": "used"; "required": false; }; "total": { "alias": "total"; "required": false; }; "inputTokens": { "alias": "inputTokens"; "required": false; }; "outputTokens": { "alias": "outputTokens"; "required": false; }; "cost": { "alias": "cost"; "required": false; }; "warningThreshold": { "alias": "warningThreshold"; "required": false; }; "criticalThreshold": { "alias": "criticalThreshold"; "required": false; }; "placement": { "alias": "placement"; "required": false; }; "openDelay": { "alias": "openDelay"; "required": false; }; "closeDelay": { "alias": "closeDelay"; "required": false; }; "class": { "alias": "class"; "required": false; }; }, {}, never, never, true, never>;
+}
+/** The always-visible part of a `tolle-context`: percentage plus usage bar. */
+export declare class ContextTriggerComponent implements OnChanges, OnInit, OnDestroy {
+    /**
+     * Angular writes a bound `class` input through its styling path, which does
+     * not mark an OnPush component dirty — without this hook the component keeps
+     * rendering the class it was born with.
+     */
+    ngOnChanges(): void;
+    /** Extra Tailwind classes merged onto the trigger via `cn()` (last-wins). */
+    class: string;
+    private readonly service;
+    private readonly cdr;
+    private readonly sub;
+    usage: ContextUsage;
+    ngOnInit(): void;
+    ngOnDestroy(): void;
+    /** Usage as a whole percentage. */
+    get percent(): number;
+    get computedClass(): string;
+    get barClass(): string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ContextTriggerComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ContextTriggerComponent, "tolle-context-trigger", never, { "class": { "alias": "class"; "required": false; }; }, {}, never, ["*"], true, never>;
+}
+/** The hover breakdown of a `tolle-context`: used, total, input, output, cost. */
+export declare class ContextContentComponent implements OnChanges, OnInit, OnDestroy {
+    /**
+     * Angular writes a bound `class` input through its styling path, which does
+     * not mark an OnPush component dirty — without this hook the component keeps
+     * rendering the class it was born with.
+     */
+    ngOnChanges(): void;
+    /** Symbol prefixed to the cost figure. @default '$' */
+    currency: string;
+    /** Extra Tailwind classes merged onto the breakdown via `cn()` (last-wins). */
+    class: string;
+    private readonly service;
+    private readonly cdr;
+    private readonly sub;
+    usage: ContextUsage;
+    protected tokens: typeof formatTokens;
+    ngOnInit(): void;
+    ngOnDestroy(): void;
+    get computedClass(): string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ContextContentComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ContextContentComponent, "tolle-context-content", never, { "currency": { "alias": "currency"; "required": false; }; "class": { "alias": "class"; "required": false; }; }, {}, never, ["*"], true, never>;
+}
+export {};

package/lib/conversation.component.d.ts

@@ -0,0 +1,165 @@
+import { AfterViewInit, EventEmitter, OnChanges, OnDestroy, OnInit } from '@angular/core';
+import { type VariantProps } from 'class-variance-authority';
+import * as i0 from "@angular/core";
+/**
+ * Coordinates a `tolle-conversation` and its projected parts.
+ *
+ * The transcript owns the scroll position; the empty state and the
+ * "jump to latest" button are OnPush children that cannot read the parent's
+ * fields directly, so everything they need is published here as an observable.
+ *
+ * Provided on `ConversationComponent`, so each transcript gets its own instance.
+ */
+export declare class ConversationService {
+    private readonly atBottomSource;
+    /** Emits whether the transcript is scrolled to (or near) the newest message. */
+    readonly atBottom$: import("rxjs").Observable<boolean>;
+    private readonly emptySource;
+    /** Emits whether the transcript has no messages yet. */
+    readonly empty$: import("rxjs").Observable<boolean>;
+    private readonly scrollRequestSource;
+    /** Emits when a child asks the transcript to scroll to the newest message. */
+    readonly scrollRequest$: import("rxjs").Observable<ScrollBehavior>;
+    /** True while the transcript is pinned to the bottom. */
+    get atBottom(): boolean;
+    /** True while the transcript is empty. */
+    get empty(): boolean;
+    setAtBottom(value: boolean): void;
+    setEmpty(value: boolean): void;
+    /** Asks the transcript to scroll to the newest message. */
+    requestScrollToBottom(behavior?: ScrollBehavior): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ConversationService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<ConversationService>;
+}
+declare const conversationVariants: (props?: ({
+    size?: "default" | "sm" | "lg" | "full" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export type ConversationProps = VariantProps<typeof conversationVariants>;
+/**
+ * A scrollable chat transcript. Announces new messages politely, keeps itself
+ * pinned to the newest message while the reader is already at the bottom, and
+ * hosts the empty state plus the floating "jump to latest" button.
+ *
+ * Compose it from `tolle-conversation-content`,
+ * `tolle-conversation-empty-state` and `tolle-conversation-scroll-button`.
+ * @new
+ */
+export declare class ConversationComponent implements OnInit, OnChanges, AfterViewInit, OnDestroy {
+    private readonly cdr;
+    /** Height preset for the scroll region. @default 'default' */
+    size: ConversationProps['size'];
+    /** Keeps the newest message in view while the reader is already at the bottom. @default true */
+    autoScroll: boolean;
+    /** Set true before the first message so the empty state shows. @default false */
+    empty: boolean;
+    /** Distance from the bottom, in px, still counted as "at the bottom". @default 32 */
+    threshold: number;
+    /** Accessible name for the transcript. @default '' */
+    ariaLabel: string;
+    /** Extra Tailwind classes merged onto the transcript via `cn()` (last-wins). */
+    class: string;
+    /** Extra Tailwind classes merged onto the scrolling viewport via `cn()` (last-wins). */
+    viewportClass: string;
+    /** Emitted whenever the transcript becomes pinned to, or leaves, the bottom. */
+    atBottomChange: EventEmitter<boolean>;
+    private viewport?;
+    private readonly service;
+    private readonly subscriptions;
+    private observer?;
+    ngOnInit(): void;
+    ngOnChanges(): void;
+    ngAfterViewInit(): void;
+    ngOnDestroy(): void;
+    get computedClass(): string;
+    get viewportComputedClass(): string;
+    /** Scrolls the transcript to the newest message. */
+    scrollToBottom(behavior?: ScrollBehavior): void;
+    /** Recomputes whether the viewport is at the bottom and publishes the result. */
+    onScroll(): void;
+    private onContentChanged;
+    private measure;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ConversationComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ConversationComponent, "tolle-conversation", never, { "size": { "alias": "size"; "required": false; }; "autoScroll": { "alias": "autoScroll"; "required": false; }; "empty": { "alias": "empty"; "required": false; }; "threshold": { "alias": "threshold"; "required": false; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; }; "class": { "alias": "class"; "required": false; }; "viewportClass": { "alias": "viewportClass"; "required": false; }; }, { "atBottomChange": "atBottomChange"; }, never, ["*", "tolle-conversation-scroll-button"], true, never>;
+}
+/** Vertical stack of messages inside a `tolle-conversation`. */
+export declare class ConversationContentComponent implements OnChanges {
+    private readonly cdr;
+    /**
+     * Angular writes a bound `class` input through its styling path, which does
+     * not mark an OnPush component dirty — without this hook the component keeps
+     * rendering the class it was born with.
+     */
+    ngOnChanges(): void;
+    /** Extra Tailwind classes merged onto the stack via `cn()` (last-wins). */
+    class: string;
+    get computedClass(): string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ConversationContentComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ConversationContentComponent, "tolle-conversation-content", never, { "class": { "alias": "class"; "required": false; }; }, {}, never, ["*"], true, never>;
+}
+/**
+ * Placeholder shown while a `tolle-conversation` has no messages. Renders
+ * nothing once the transcript reports content, so it can stay in the template.
+ */
+export declare class ConversationEmptyStateComponent implements OnChanges, OnInit, OnDestroy {
+    /**
+     * Angular writes a bound `class` input through its styling path, which does
+     * not mark an OnPush component dirty — without this hook the component keeps
+     * rendering the class it was born with.
+     */
+    ngOnChanges(): void;
+    /** Remixicon class for the illustration. @default 'ri-chat-3-line' */
+    icon: string;
+    /** Headline shown above the description. @default 'No messages yet' */
+    title: string;
+    /** Supporting copy under the headline. @default 'Start the conversation by sending a message.' */
+    description: string;
+    /** Extra Tailwind classes merged onto the empty state via `cn()` (last-wins). */
+    class: string;
+    private readonly service;
+    private readonly cdr;
+    private readonly subscriptions;
+    visible: boolean;
+    ngOnInit(): void;
+    ngOnDestroy(): void;
+    get computedClass(): string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ConversationEmptyStateComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ConversationEmptyStateComponent, "tolle-conversation-empty-state", never, { "icon": { "alias": "icon"; "required": false; }; "title": { "alias": "title"; "required": false; }; "description": { "alias": "description"; "required": false; }; "class": { "alias": "class"; "required": false; }; }, {}, never, ["*"], true, never>;
+}
+declare const conversationScrollButtonVariants: (props?: ({
+    variant?: "default" | "outline" | "secondary" | null | undefined;
+    size?: "default" | "sm" | "icon" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export type ConversationScrollButtonProps = VariantProps<typeof conversationScrollButtonVariants>;
+/**
+ * Floating "jump to latest" control. Appears only while the transcript is
+ * scrolled away from the newest message, and scrolls it back on click.
+ */
+export declare class ConversationScrollButtonComponent implements OnChanges, OnInit, OnDestroy {
+    /**
+     * Angular writes a bound `class` input through its styling path, which does
+     * not mark an OnPush component dirty — without this hook the component keeps
+     * rendering the class it was born with.
+     */
+    ngOnChanges(): void;
+    /** Visual style of the button. @default 'outline' */
+    variant: ConversationScrollButtonProps['variant'];
+    /** Size of the button; 'icon' drops the text label. @default 'default' */
+    size: ConversationScrollButtonProps['size'];
+    /** Button text and accessible name. @default 'Jump to latest' */
+    label: string;
+    /** Extra Tailwind classes merged onto the button via `cn()` (last-wins). */
+    class: string;
+    /** Emitted when the reader jumps back to the newest message. */
+    jumped: EventEmitter<void>;
+    private readonly service;
+    private readonly cdr;
+    private readonly subscriptions;
+    visible: boolean;
+    ngOnInit(): void;
+    ngOnDestroy(): void;
+    get computedClass(): string;
+    onClick(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ConversationScrollButtonComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ConversationScrollButtonComponent, "tolle-conversation-scroll-button", never, { "variant": { "alias": "variant"; "required": false; }; "size": { "alias": "size"; "required": false; }; "label": { "alias": "label"; "required": false; }; "class": { "alias": "class"; "required": false; }; }, { "jumped": "jumped"; }, never, never, true, never>;
+}
+export {};

package/lib/data-table.component.d.ts

@@ -20,6 +20,31 @@ export declare class DataTableComponent implements OnInit, OnChanges {
     stickyHeader: boolean;
     maxHeight?: string;
     bordered: boolean;
+    /** Background for the table surface, behind both header and rows. */
+    tableBackground: string;
+    /**
+     * Background for the header row. Must be opaque when `stickyHeader` is on,
+     * otherwise rows scroll visibly through the header — hence the default
+     * `bg-background` rather than transparent.
+     */
+    headerBackground: string;
+    /** Alternating row backgrounds. Applied to odd rows only. */
+    striped: boolean;
+    /** Background applied to odd rows when `striped` is on. */
+    stripeBackground: string;
+    /**
+     * Per-row background, resolved against the row's own data — e.g.
+     * `[rowBackground]="r => r.overdue ? 'bg-destructive/10' : ''"`.
+     * Takes precedence over `striped`.
+     */
+    rowBackground?: (row: any, index: number) => string;
+    /**
+     * A sticky header with no background lets rows scroll visibly through it, so
+     * fall back to an opaque default if a consumer clears `headerBackground`.
+     */
+    get resolvedHeaderBackground(): string;
+    /** Resolves the background for a body row: per-row callback wins over striping. */
+    getRowBackground(row: any, index: number): string;
     allowColumnHiding: boolean;
     showSettings: boolean;
     columnVisibility: Record<string, boolean>;
@@ -53,5 +78,5 @@ export declare class DataTableComponent implements OnInit, OnChanges {
     toggleRow(index: number): void;
     getTemplate(key: string): TolleCellDirective | undefined;
     static ɵfac: i0.ɵɵFactoryDeclaration<DataTableComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DataTableComponent, "tolle-data-table", never, { "data": { "alias": "data"; "required": false; }; "columns": { "alias": "columns"; "required": false; }; "searchable": { "alias": "searchable"; "required": false; }; "paginate": { "alias": "paginate"; "required": false; }; "pageSizeOptions": { "alias": "pageSizeOptions"; "required": false; }; "pageSize": { "alias": "pageSize"; "required": false; }; "expandable": { "alias": "expandable"; "required": false; }; "size": { "alias": "size"; "required": false; }; "stickyHeader": { "alias": "stickyHeader"; "required": false; }; "maxHeight": { "alias": "maxHeight"; "required": false; }; "bordered": { "alias": "bordered"; "required": false; }; "allowColumnHiding": { "alias": "allowColumnHiding"; "required": false; }; "showSettings": { "alias": "showSettings"; "required": false; }; "expandedTemplate": { "alias": "expandedTemplate"; "required": false; }; }, {}, ["cellTemplates"], never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DataTableComponent, "tolle-data-table", never, { "data": { "alias": "data"; "required": false; }; "columns": { "alias": "columns"; "required": false; }; "searchable": { "alias": "searchable"; "required": false; }; "paginate": { "alias": "paginate"; "required": false; }; "pageSizeOptions": { "alias": "pageSizeOptions"; "required": false; }; "pageSize": { "alias": "pageSize"; "required": false; }; "expandable": { "alias": "expandable"; "required": false; }; "size": { "alias": "size"; "required": false; }; "stickyHeader": { "alias": "stickyHeader"; "required": false; }; "maxHeight": { "alias": "maxHeight"; "required": false; }; "bordered": { "alias": "bordered"; "required": false; }; "tableBackground": { "alias": "tableBackground"; "required": false; }; "headerBackground": { "alias": "headerBackground"; "required": false; }; "striped": { "alias": "striped"; "required": false; }; "stripeBackground": { "alias": "stripeBackground"; "required": false; }; "rowBackground": { "alias": "rowBackground"; "required": false; }; "allowColumnHiding": { "alias": "allowColumnHiding"; "required": false; }; "showSettings": { "alias": "showSettings"; "required": false; }; "expandedTemplate": { "alias": "expandedTemplate"; "required": false; }; }, {}, ["cellTemplates"], never, true, never>;
 }

package/lib/date-picker.component.d.ts

@@ -1,43 +1,103 @@
-import { ElementRef, ChangeDetectorRef, OnDestroy } from '@angular/core';
+import { EventEmitter, ElementRef, ChangeDetectorRef, OnDestroy, OnChanges } from '@angular/core';
 import { ControlValueAccessor } from '@angular/forms';
+import { type VariantProps } from 'class-variance-authority';
 import { cn } from './utils/cn';
 import { CalendarMode } from './calendar.component';
 import * as i0 from "@angular/core";
-export declare class DatePickerComponent implements ControlValueAccessor, OnDestroy {
+/**
+ * The trigger button — same shape as `tolle-date-time-picker`'s, so the two
+ * controls read as siblings: a bordered field that opens a floating panel,
+ * not a typeable text input.
+ */
+declare const datePickerTriggerVariants: (props?: ({
+    size?: "default" | "xs" | "sm" | "lg" | null | undefined;
+    invalid?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+/** Variant props for the date picker. */
+export type DatePickerProps = VariantProps<typeof datePickerTriggerVariants>;
+/**
+ * A button trigger paired with a `tolle-calendar` in a floating panel.
+ *
+ * The value is a `Date` normalised to the start of its day — a calendar date
+ * has no time, and carrying one would make two selections of the same day
+ * compare unequal. `mode` switches the whole control between picking a day, a
+ * month or a year, taking the calendar's own quick-actions row with it.
+ *
+ * Implements `ControlValueAccessor`, so it works with `ngModel` and reactive
+ * forms. Use `tolle-date-range-picker` for a span and `tolle-date-time-picker`
+ * when a time is needed alongside — this trigger is deliberately the same
+ * shape as that one, not a typeable masked field.
+ */
+export declare class DatePickerComponent implements OnChanges, ControlValueAccessor, OnDestroy {
     private cdr;
+    /**
+     * Angular writes a bound `class` input through its styling path, which does
+     * not mark an OnPush component dirty — without this hook the component keeps
+     * rendering the class it was born with.
+     */
+    ngOnChanges(): void;
+    /** Text shown on the trigger when no date is selected. @default 'Pick a date' */
     placeholder: string;
+    /** Disables the control. @default false */
     disabled: boolean;
+    /** Extra Tailwind classes merged onto the trigger via `cn()` (last-wins). @default '' */
     class: string;
+    /** Disables every day before today in the calendar. @default false */
     disablePastDates: boolean;
+    /** Shows the footer's Clear button. @default true */
     showClear: boolean;
+    /** Shows the panel's Clear / Done footer. @default true */
     showQuickActions: boolean;
+    /** Earliest selectable date; earlier days are disabled. */
     minDate?: Date;
+    /** Latest selectable date; later days are disabled. */
     maxDate?: Date;
+    /** Whether the control picks a day, a month or a year. @default 'date' */
     mode: CalendarMode;
+    /** Overrides how a month is labelled in the calendar header. */
     formatMonthFn?: (date: Date) => string;
+    /** Overrides how a year is labelled in the calendar header. */
     formatYearFn?: (date: Date) => string;
+    /** Overrides how the selected date is rendered on the trigger. */
     displayFormat?: (date: Date, mode: CalendarMode) => string;
+    /** Height and text size of the trigger. @default 'default' */
+    size: DatePickerProps['size'];
+    /** Applies the destructive border and focus ring. @default false */
+    invalid: boolean;
+    /** Accessible name when there is no associated visible label. @default '' */
+    ariaLabel: string;
+    /** Emitted with the chosen date, or `null` when the value is cleared. */
+    valueChange: EventEmitter<Date | null>;
+    /** Emitted when the calendar panel opens. */
+    opened: EventEmitter<void>;
+    /** Emitted when the calendar panel closes. */
+    closed: EventEmitter<void>;
     trigger: ElementRef;
     popover: ElementRef;
     value: Date | null;
-    inputValue: string;
     isOpen: boolean;
     cleanupAutoUpdate?: () => void;
+    /** Footer buttons, styled exactly as the date-time picker's. */
+    readonly footerButtonClass: string;
+    /** Footer Clear — empties the value and leaves the panel open, like the reference. */
+    clearFromFooter(): void;
+    /** Footer Done — commits what is already selected and closes. */
+    done(): void;
     private _outsideClickHandler;
     constructor(cdr: ChangeDetectorRef);
-    getMask(): string;
-    getPlaceholder(): string;
-    getFormatString(): string;
+    get computedTriggerClass(): string;
+    get displayValue(): string;
     formatDate(date: Date): string;
-    parseDate(str: string): Date | null;
-    onInputChange(str: string): void;
     onCalendarChange(date: Date | null): void;
-    togglePopover(event: MouseEvent): void;
+    toggle(): void;
+    onTriggerKeyDown(event: KeyboardEvent): void;
     onEscape(): void;
     open(): void;
     close(): void;
-    clear(event: MouseEvent): void;
+    /** Reports the current value to the form and to `valueChange`. */
+    private emit;
     private updatePosition;
+    private teardown;
     ngOnDestroy(): void;
     onChange: any;
     onTouched: any;
@@ -47,5 +107,6 @@ export declare class DatePickerComponent implements ControlValueAccessor, OnDest
     setDisabledState(isDisabled: boolean): void;
     protected cn: typeof cn;
     static ɵfac: i0.ɵɵFactoryDeclaration<DatePickerComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DatePickerComponent, "tolle-date-picker", never, { "placeholder": { "alias": "placeholder"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "class": { "alias": "class"; "required": false; }; "disablePastDates": { "alias": "disablePastDates"; "required": false; }; "showClear": { "alias": "showClear"; "required": false; }; "showQuickActions": { "alias": "showQuickActions"; "required": false; }; "minDate": { "alias": "minDate"; "required": false; }; "maxDate": { "alias": "maxDate"; "required": false; }; "mode": { "alias": "mode"; "required": false; }; "formatMonthFn": { "alias": "formatMonthFn"; "required": false; }; "formatYearFn": { "alias": "formatYearFn"; "required": false; }; "displayFormat": { "alias": "displayFormat"; "required": false; }; }, {}, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DatePickerComponent, "tolle-date-picker", never, { "placeholder": { "alias": "placeholder"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "class": { "alias": "class"; "required": false; }; "disablePastDates": { "alias": "disablePastDates"; "required": false; }; "showClear": { "alias": "showClear"; "required": false; }; "showQuickActions": { "alias": "showQuickActions"; "required": false; }; "minDate": { "alias": "minDate"; "required": false; }; "maxDate": { "alias": "maxDate"; "required": false; }; "mode": { "alias": "mode"; "required": false; }; "formatMonthFn": { "alias": "formatMonthFn"; "required": false; }; "formatYearFn": { "alias": "formatYearFn"; "required": false; }; "displayFormat": { "alias": "displayFormat"; "required": false; }; "size": { "alias": "size"; "required": false; }; "invalid": { "alias": "invalid"; "required": false; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; }; }, { "valueChange": "valueChange"; "opened": "opened"; "closed": "closed"; }, never, never, true, never>;
 }
+export {};

package/lib/date-range-picker.component.d.ts

@@ -1,32 +1,88 @@
-import { ElementRef, ChangeDetectorRef, OnDestroy } from '@angular/core';
+import { EventEmitter, ElementRef, ChangeDetectorRef, OnDestroy, OnChanges } from '@angular/core';
 import { ControlValueAccessor } from '@angular/forms';
+import { type VariantProps } from 'class-variance-authority';
 import { cn } from './utils/cn';
 import { DateRange } from './types/date-range';
 import * as i0 from "@angular/core";
-export declare class DateRangePickerComponent implements ControlValueAccessor, OnDestroy {
+/**
+ * The trigger button — same shape as `tolle-date-time-picker`'s and
+ * `tolle-date-picker`'s, so all three read as one family: a bordered field
+ * that opens a floating panel, not a typeable text input.
+ */
+declare const dateRangePickerTriggerVariants: (props?: ({
+    size?: "default" | "xs" | "sm" | "lg" | null | undefined;
+    invalid?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+/** Variant props for the date range picker. */
+export type DateRangePickerProps = VariantProps<typeof dateRangePickerTriggerVariants>;
+/**
+ * A button trigger paired with a `tolle-range-calendar` in a floating panel,
+ * for picking a start and an end date.
+ *
+ * The value is a `DateRange` — `{ start, end }` — and a half-made range is a
+ * legal intermediate state: picking a start emits `{ start, end: null }` and
+ * leaves the panel open, so a consumer can react to the first click. The panel
+ * only closes once both ends exist.
+ *
+ * Implements `ControlValueAccessor`, so it works with `ngModel` and reactive
+ * forms. Use `tolle-date-picker` for a single date — this trigger is
+ * deliberately the same shape as that one and as `tolle-date-time-picker`.
+ */
+export declare class DateRangePickerComponent implements OnChanges, ControlValueAccessor, OnDestroy {
     private cdr;
+    /**
+     * Angular writes a bound `class` input through its styling path, which does
+     * not mark an OnPush component dirty — without this hook the component keeps
+     * rendering the class it was born with.
+     */
+    ngOnChanges(): void;
+    /** Disables the control. @default false */
     disabled: boolean;
+    /** Text shown on the trigger when no range is selected. @default 'Pick a date range' */
     placeholder: string;
+    /** Extra Tailwind classes merged onto the trigger via `cn()` (last-wins). @default '' */
     class: string;
+    /** Disables every day before today in the calendar. @default false */
     disablePastDates: boolean;
-    size: 'xs' | 'sm' | 'default' | 'lg';
+    /** Height and text size of the trigger. @default 'default' */
+    size: DateRangePickerProps['size'];
     /** Consecutive months shown in the popover (e.g. `2` for a two-month picker). @default 1 */
     numberOfMonths: number;
+    /** Applies the destructive border and focus ring. @default false */
+    invalid: boolean;
+    /** Accessible name when there is no associated visible label. @default '' */
+    ariaLabel: string;
+    /** Emitted with the selected range, including the half-made `{ start, end: null }` state. */
+    valueChange: EventEmitter<DateRange>;
+    /** Emitted when the calendar panel opens. */
+    opened: EventEmitter<void>;
+    /** Emitted when the calendar panel closes. */
+    closed: EventEmitter<void>;
     trigger: ElementRef;
     popover: ElementRef;
     value: DateRange;
     isOpen: boolean;
     cleanupAutoUpdate?: () => void;
+    /** Footer buttons, styled exactly as the date-time picker's. */
+    readonly footerButtonClass: string;
+    /** Footer Clear — empties the range and leaves the panel open, like the reference. */
+    clearFromFooter(): void;
+    /** Footer Done — commits what is already selected and closes. */
+    done(): void;
     private _outsideClickHandler;
     constructor(cdr: ChangeDetectorRef);
+    get computedTriggerClass(): string;
     get displayValue(): string;
     onCalendarSelect(range: DateRange): void;
-    togglePopover(event: MouseEvent): void;
+    toggle(): void;
+    onTriggerKeyDown(event: KeyboardEvent): void;
     onEscape(): void;
     open(): void;
     close(): void;
-    clear(event: MouseEvent): void;
+    /** Reports the current range to the form and to `valueChange`. */
+    private emit;
     private updatePosition;
+    private teardown;
     ngOnDestroy(): void;
     onWindowResize(): void;
     onWindowScroll(): void;
@@ -38,5 +94,6 @@ export declare class DateRangePickerComponent implements ControlValueAccessor, O
     setDisabledState(isDisabled: boolean): void;
     protected cn: typeof cn;
     static ɵfac: i0.ɵɵFactoryDeclaration<DateRangePickerComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DateRangePickerComponent, "tolle-date-range-picker", never, { "disabled": { "alias": "disabled"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "class": { "alias": "class"; "required": false; }; "disablePastDates": { "alias": "disablePastDates"; "required": false; }; "size": { "alias": "size"; "required": false; }; "numberOfMonths": { "alias": "numberOfMonths"; "required": false; }; }, {}, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DateRangePickerComponent, "tolle-date-range-picker", never, { "disabled": { "alias": "disabled"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "class": { "alias": "class"; "required": false; }; "disablePastDates": { "alias": "disablePastDates"; "required": false; }; "size": { "alias": "size"; "required": false; }; "numberOfMonths": { "alias": "numberOfMonths"; "required": false; }; "invalid": { "alias": "invalid"; "required": false; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; }; }, { "valueChange": "valueChange"; "opened": "opened"; "closed": "closed"; }, never, never, true, never>;
 }
+export {};