@transcodes/ui-components 0.1.0

package/dist/index.d.ts

@@ -0,0 +1,902 @@
+import { CSSResult } from 'lit';
+import { LitElement } from 'lit';
+import { ReactiveController } from 'lit';
+import { ReactiveControllerHost } from 'lit';
+import { TemplateResult } from 'lit';
+
+export declare class AnimationController extends BaseController {
+    private _state;
+    private showDuration;
+    private hideDuration;
+    constructor(host: ReactiveControllerHost, options?: AnimationControllerOptions | number);
+    get state(): AnimationState;
+    get isVisible(): boolean;
+    get isHidden(): boolean;
+    show(): Promise<void>;
+    hide(): Promise<void>;
+    toggle(): Promise<void>;
+    private waitForTransition;
+}
+
+/**
+ * Controller for managing show/hide animation states.
+ * Provides a state machine for coordinating CSS transitions.
+ *
+ * @example
+ * ```ts
+ * class MyModal extends LitElement {
+ *   private animation = new AnimationController(this);
+ *
+ *   async open() {
+ *     await this.animation.show();
+ *   }
+ *
+ *   async close() {
+ *     await this.animation.hide();
+ *   }
+ *
+ *   render() {
+ *     return html`
+ *       <div class="modal modal--${this.animation.state}">
+ *         <slot></slot>
+ *       </div>
+ *     `;
+ *   }
+ * }
+ * ```
+ */
+export declare interface AnimationControllerOptions {
+    showDuration?: number;
+    hideDuration?: number;
+}
+
+export declare type AnimationState = 'hidden' | 'showing' | 'visible' | 'hiding';
+
+/**
+ * Base controller class that all reactive controllers extend from.
+ * Provides common functionality for registering with a host element.
+ */
+export declare abstract class BaseController implements ReactiveController {
+    protected host: ReactiveControllerHost;
+    constructor(host: ReactiveControllerHost);
+    hostConnected?(): void;
+    hostDisconnected?(): void;
+    hostUpdate?(): void;
+    hostUpdated?(): void;
+}
+
+/**
+ * Controller for form field validation.
+ * Manages validation rules and error states.
+ *
+ * @example
+ * ```ts
+ * class MyForm extends LitElement {
+ *   private validation = new FormValidationController(this);
+ *
+ *   private emailRules: ValidationRule[] = [
+ *     { type: 'required', message: 'Email is required' },
+ *     { type: 'email', message: 'Please enter a valid email' },
+ *   ];
+ *
+ *   handleBlur(e: Event) {
+ *     const input = e.target as HTMLInputElement;
+ *     this.validation.validate('email', input.value, this.emailRules);
+ *   }
+ *
+ *   render() {
+ *     const error = this.validation.getError('email');
+ *     return html`
+ *       <input @blur=${this.handleBlur} />
+ *       ${error ? html`<span class="error">${error}</span>` : ''}
+ *     `;
+ *   }
+ * }
+ * ```
+ */
+export declare class FormValidationController extends BaseController {
+    private errors;
+    get isValid(): boolean;
+    getError(field: string): string | undefined;
+    getAllErrors(): Map<string, string>;
+    validate(field: string, value: string, rules: ValidationRule[]): boolean;
+    clearError(field: string): void;
+    reset(): void;
+    private runRule;
+}
+
+/**
+ * Controller for managing browser history for modals and overlays.
+ * Adds a history entry when opened and handles back button navigation.
+ *
+ * @example
+ * ```ts
+ * class MyModal extends LitElement {
+ *   private history = new HistoryController(this);
+ *
+ *   open() {
+ *     this.history.push({ modal: 'my-modal' });
+ *     this.history.onPopState(() => this.close());
+ *     // show modal
+ *   }
+ *
+ *   close() {
+ *     this.history.pop();
+ *     // hide modal
+ *   }
+ * }
+ * ```
+ */
+export declare class HistoryController extends BaseController {
+    private hasAddedEntry;
+    private onPopCallback?;
+    push(state?: object): void;
+    pop(): void;
+    onPopState(callback: () => void): void;
+    private handlePopState;
+    hostConnected(): void;
+    hostDisconnected(): void;
+}
+
+export declare type IconName = 'arrow-left' | 'arrow-right' | 'check' | 'x' | 'close' | 'chevron-right' | 'chevron-left' | 'error' | 'alert-circle' | 'info' | 'warning' | 'loading' | 'loader' | 'biometric' | 'email' | 'passkey' | 'bell' | 'download' | 'wifi-off';
+
+/**
+ * Controller for managing loading states and progress.
+ *
+ * @example
+ * ```ts
+ * class MyComponent extends LitElement {
+ *   private loading = new LoadingController(this);
+ *
+ *   async handleSubmit() {
+ *     this.loading.start();
+ *     await doSomething();
+ *     this.loading.complete();
+ *   }
+ *
+ *   render() {
+ *     return html`
+ *       <button ?disabled=${this.loading.isLoading}>
+ *         ${this.loading.isLoading ? 'Loading...' : 'Submit'}
+ *       </button>
+ *     `;
+ *   }
+ * }
+ * ```
+ */
+export declare class LoadingController extends BaseController {
+    private _isLoading;
+    private _progress;
+    get isLoading(): boolean;
+    get progress(): number;
+    start(): void;
+    setProgress(value: number): void;
+    complete(): void;
+    reset(): void;
+}
+
+/**
+ * Controller for reactive media query matching.
+ * Automatically updates the host when the media query matches or unmatches.
+ *
+ * @example
+ * ```ts
+ * class MyComponent extends LitElement {
+ *   private mobile = new MatchMediaController(this, '(max-width: 768px)');
+ *   private darkMode = new MatchMediaController(this, '(prefers-color-scheme: dark)');
+ *
+ *   render() {
+ *     return html`
+ *       <div class=${this.mobile.matches ? 'mobile' : 'desktop'}>
+ *         ${this.darkMode.matches ? 'Dark mode' : 'Light mode'}
+ *       </div>
+ *     `;
+ *   }
+ * }
+ * ```
+ */
+export declare class MatchMediaController extends BaseController {
+    private mediaQuery;
+    private _matches;
+    constructor(host: ReactiveControllerHost, query: string);
+    get matches(): boolean;
+    private handleChange;
+    hostConnected(): void;
+    hostDisconnected(): void;
+}
+
+/**
+ * Controller for postMessage communication with iframes or other windows.
+ *
+ * @example
+ * ```ts
+ * class MyIframeHost extends LitElement {
+ *   private messageBus = new MessageBusController(this);
+ *
+ *   connectedCallback() {
+ *     super.connectedCallback();
+ *     this.messageBus.onMessage('READY', (payload) => {
+ *       console.log('Iframe is ready', payload);
+ *     });
+ *   }
+ *
+ *   sendToIframe() {
+ *     this.messageBus.send('COMMAND', { action: 'do-something' });
+ *   }
+ * }
+ * ```
+ */
+export declare class MessageBusController extends BaseController {
+    private handlers;
+    private wildcardHandlers;
+    private targetOrigin;
+    /**
+     * @param host - The reactive controller host
+     * @param targetOrigin - The origin to accept messages from and send messages to.
+     *   SECURITY NOTE: Using '*' accepts messages from any origin which can be dangerous.
+     *   Always specify an explicit origin in production environments.
+     */
+    constructor(host: ReactiveControllerHost, targetOrigin?: string);
+    send(type: string, payload: unknown, targetWindow?: Window): void;
+    sendToFrame(iframe: HTMLIFrameElement, type: string, payload: unknown): void;
+    onMessage(type: string, handler: MessageHandler): () => void;
+    onMessage(type: '*', handler: WildcardMessageHandler): () => void;
+    private handleMessage;
+    hostConnected(): void;
+    hostDisconnected(): void;
+}
+
+declare type MessageHandler = (payload: unknown) => void;
+
+/**
+ * Controller for syncing component state with localStorage/sessionStorage.
+ * Automatically updates when storage changes in other tabs.
+ *
+ * @example
+ * ```ts
+ * class MyBanner extends LitElement {
+ *   private dismissed = new StorageController<boolean>(this, 'banner-dismissed');
+ *
+ *   handleDismiss() {
+ *     this.dismissed.set(true);
+ *   }
+ *
+ *   render() {
+ *     if (this.dismissed.value) return null;
+ *     return html`
+ *       <div class="banner">
+ *         <button @click=${this.handleDismiss}>Dismiss</button>
+ *       </div>
+ *     `;
+ *   }
+ * }
+ * ```
+ */
+export declare class StorageController<T = unknown> extends BaseController {
+    private key;
+    private storage;
+    private _value;
+    constructor(host: ReactiveControllerHost, key: string, storage?: Storage);
+    get value(): T | null;
+    set(value: T): void;
+    remove(): void;
+    private load;
+    private handleStorageChange;
+    hostConnected(): void;
+    hostDisconnected(): void;
+}
+
+/**
+ * A simple container component without default flex layout.
+ * Use for wrapping content with custom styles.
+ *
+ * @slot - Content to display inside the box
+ * @csspart box - The container element
+ */
+export declare class TcBox extends LitElement {
+    sx: Record<string, string | number>;
+    static styles: CSSResult;
+    render(): TemplateResult<1>;
+}
+
+/**
+ * Primary button component with loading states.
+ * Uses design-tokens component classes (.button, .button-primary, etc.)
+ *
+ * @fires tc-click - Fired when button is clicked
+ * @slot - Button content
+ * @csspart button - The button element
+ * @csspart spinner - The loading spinner
+ */
+export declare class TcButton extends LitElement {
+    disabled: boolean;
+    loading: boolean;
+    variant: 'primary' | 'secondary' | 'success';
+    sx: Record<string, string | number>;
+    static styles: CSSResult[];
+    render(): TemplateResult<1>;
+    private handleClick;
+}
+
+/**
+ * A callout/alert component for messages and notices.
+ * Uses design-tokens notice classes (.notice, .notice-info, .notice-success, etc.)
+ *
+ * @slot - Callout content
+ * @csspart callout - The callout container
+ */
+export declare class TcCallout extends LitElement {
+    variant: 'info' | 'success' | 'warning' | 'error';
+    static styles: CSSResult[];
+    render(): TemplateResult<1>;
+}
+
+/**
+ * Card component with layered shadows and optional inner border effect.
+ * Uses design-tokens .card class.
+ *
+ * @slot - Card content
+ * @csspart card - The card container
+ */
+export declare class TcCard extends LitElement {
+    noBorder: boolean;
+    sx: Record<string, string | number>;
+    static styles: CSSResult[];
+    render(): TemplateResult<1>;
+}
+
+/**
+ * A chip/tag component for labels and badges.
+ *
+ * @slot - Chip content
+ * @csspart chip - The chip container
+ */
+export declare class TcChip extends LitElement {
+    variant: 'default' | 'success' | 'error' | 'info';
+    size: 'sm' | 'md';
+    static styles: CSSResult[];
+    render(): TemplateResult<1>;
+}
+
+/**
+ * A flex container component with column layout by default.
+ *
+ * @slot - Content to display inside the container
+ * @csspart container - The container element
+ */
+export declare class TcContainer extends LitElement {
+    wide: boolean;
+    sx: Record<string, string | number>;
+    private defaultStyles;
+    static styles: CSSResult;
+    render(): TemplateResult<1>;
+}
+
+/**
+ * A horizontal divider line.
+ *
+ * @csspart divider - The divider element
+ */
+export declare class TcDivider extends LitElement {
+    color: string;
+    spacing: string;
+    static styles: CSSResult;
+    render(): TemplateResult<1>;
+}
+
+/**
+ * A full-screen error state with icon, message, and retry action.
+ *
+ * @fires tc-retry - Fired when the retry button is clicked
+ * @csspart screen - The screen container
+ * @csspart content - The content wrapper
+ * @csspart icon - The error icon
+ * @csspart title - The error title
+ * @csspart message - The error message
+ * @csspart action - The action button container
+ */
+export declare class TcErrorScreen extends LitElement {
+    title: string;
+    message: string;
+    retryLabel: string;
+    showRetry: boolean;
+    static styles: CSSResult;
+    private handleRetry;
+    render(): TemplateResult<1>;
+}
+
+/**
+ * A floating action button positioned fixed on the screen.
+ *
+ * @slot - Button content (icon recommended)
+ * @fires tc-click - Fired when the button is clicked
+ * @csspart button - The button element
+ */
+export declare class TcFloatingButton extends LitElement {
+    position: 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left';
+    size: string;
+    disabled: boolean;
+    sx: Record<string, string | number>;
+    static styles: CSSResult[];
+    connectedCallback(): void;
+    updated(changedProperties: Map<string, unknown>): void;
+    private handleClick;
+    render(): TemplateResult<1>;
+}
+
+/**
+ * Form header component with animated title, subtitle, and optional notice.
+ * Uses design-tokens form classes (.form-title, .form-subtitle).
+ *
+ * @csspart header - The header container
+ * @csspart title - The title element
+ * @csspart subtitle - The subtitle element
+ * @csspart notice - The notice element
+ */
+export declare class TcFormHeader extends LitElement {
+    title: string;
+    subtitle: string;
+    notice: string;
+    noAnimation: boolean;
+    sx: Record<string, string | number>;
+    static styles: CSSResult[];
+    render(): TemplateResult<1>;
+}
+
+/**
+ * An icon component with built-in icon set.
+ *
+ * @csspart icon - The icon container
+ */
+export declare class TcIcon extends LitElement {
+    name: IconName;
+    size: string;
+    color: string;
+    static styles: CSSResult;
+    render(): TemplateResult<1>;
+}
+
+/**
+ * A modal that displays an iframe with loading states and message communication.
+ *
+ * @fires tc-close - Fired when the modal is closed
+ * @fires tc-message - Fired when a message is received from the iframe
+ * @fires tc-load - Fired when the iframe content is loaded
+ * @csspart overlay - The backdrop overlay
+ * @csspart modal - The modal container
+ * @csspart header - The modal header
+ * @csspart close - The close button
+ * @csspart content - The content area
+ * @csspart iframe - The iframe element
+ * @csspart loader - The loading overlay
+ */
+export declare class TcIframeModal extends LitElement {
+    src: string;
+    title: string;
+    closeOnEscape: boolean;
+    closeOnOverlay: boolean;
+    useHistory: boolean;
+    private isLoading;
+    private animation;
+    private history;
+    private messageBus;
+    static styles: CSSResult[];
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private handleKeyDown;
+    private updateDataState;
+    open(): Promise<void>;
+    close(): Promise<void>;
+    private handleOverlayClick;
+    private handleIframeLoad;
+    sendMessage(type: string, payload?: unknown): void;
+    render(): TemplateResult<1>;
+}
+
+/**
+ * Form input component with label and error states.
+ * Uses design-tokens classes (.input, .label, .field-group).
+ *
+ * @fires tc-input - Fired when input value changes
+ * @fires tc-blur - Fired when input loses focus
+ * @csspart wrapper - The input wrapper element
+ * @csspart input - The input element
+ * @csspart label - The label element
+ * @csspart ink-line - The animated ink line
+ * @csspart error - The error message element
+ */
+export declare class TcInput extends LitElement {
+    label: string;
+    type: string;
+    placeholder: string;
+    value: string;
+    error: string;
+    disabled: boolean;
+    required: boolean;
+    name: string;
+    autocomplete: string;
+    inputmode: string;
+    maxlength: number;
+    sx: Record<string, string | number>;
+    private inputId;
+    private isFocused;
+    static styles: CSSResult[];
+    render(): TemplateResult<1>;
+    private handleInput;
+    private handleFocus;
+    private handleBlur;
+    focus(): void;
+}
+
+/**
+ * A banner prompting users to install the PWA.
+ * Remembers dismissal state via localStorage.
+ *
+ * @fires tc-install - Fired when the install button is clicked
+ * @fires tc-dismiss - Fired when the banner is dismissed
+ * @csspart banner - The banner container
+ * @csspart content - The content area
+ * @csspart icon - The app icon
+ * @csspart text - The text container
+ * @csspart title - The banner title
+ * @csspart description - The banner description
+ * @csspart actions - The actions container
+ * @csspart install - The install button
+ * @csspart close - The close button
+ */
+export declare class TcInstallationBanner extends LitElement {
+    title: string;
+    description: string;
+    installLabel: string;
+    storageKey: string;
+    dismissDays: number;
+    private isDismissed;
+    private animation;
+    private storage;
+    static styles: CSSResult[];
+    connectedCallback(): void;
+    private checkDismissState;
+    private updateDataState;
+    show(): Promise<void>;
+    dismiss(): Promise<void>;
+    private handleInstall;
+    private handleClose;
+    render(): TemplateResult<1>;
+}
+
+/**
+ * A guide modal for iOS PWA installation steps.
+ *
+ * @fires tc-close - Fired when the guide is closed
+ * @csspart overlay - The backdrop overlay
+ * @csspart modal - The modal container
+ * @csspart header - The modal header
+ * @csspart close - The close button
+ * @csspart content - The content area
+ * @csspart steps - The steps container
+ * @csspart step - Individual step
+ * @csspart step-number - Step number indicator
+ * @csspart step-text - Step text
+ */
+export declare class TcIosInstallationGuide extends LitElement {
+    title: string;
+    steps: string[];
+    private animation;
+    static styles: CSSResult[];
+    connectedCallback(): void;
+    private updateDataState;
+    show(): Promise<void>;
+    close(): Promise<void>;
+    private handleOverlayClick;
+    private renderStep;
+    render(): TemplateResult<1>;
+}
+
+/**
+ * A non-clickable item container for displaying content.
+ *
+ * @slot - Item content
+ * @slot prefix - Left side content (icon, symbol)
+ * @slot suffix - Right side content (badge, action)
+ * @csspart item - The item container
+ * @csspart prefix - The prefix container
+ * @csspart content - The main content container
+ * @csspart suffix - The suffix container
+ */
+export declare class TcItem extends LitElement {
+    gap: string;
+    padding: string;
+    sx: Record<string, string | number>;
+    static styles: CSSResult;
+    render(): TemplateResult<1>;
+}
+
+/**
+ * A clickable item button with hover states and optional arrow indicator.
+ *
+ * @slot - Item content
+ * @slot prefix - Left side content (icon, symbol)
+ * @slot suffix - Right side content (replaces arrow if provided)
+ * @fires tc-click - Fired when the item is clicked
+ * @csspart button - The button element
+ * @csspart prefix - The prefix container
+ * @csspart content - The main content container
+ * @csspart suffix - The suffix container
+ * @csspart arrow - The arrow indicator
+ */
+export declare class TcItemButton extends LitElement {
+    gap: string;
+    padding: string;
+    disabled: boolean;
+    showArrow: boolean;
+    sx: Record<string, string | number>;
+    static styles: CSSResult;
+    private handleClick;
+    render(): TemplateResult<1>;
+}
+
+/**
+ * A full-screen loading state with spinner and optional message.
+ *
+ * @csspart screen - The screen container
+ * @csspart content - The content wrapper
+ * @csspart spinner - The spinner element
+ * @csspart message - The message text
+ */
+export declare class TcLoadingScreen extends LitElement {
+    message: string;
+    spinnerSize: string;
+    private loading;
+    static styles: CSSResult;
+    connectedCallback(): void;
+    render(): TemplateResult<1>;
+}
+
+/**
+ * A modal for requesting notification permission with storage-based dismissal tracking.
+ *
+ * @fires tc-allow - Fired when the user clicks allow
+ * @fires tc-deny - Fired when the user clicks deny
+ * @fires tc-close - Fired when the modal is closed
+ * @csspart overlay - The backdrop overlay
+ * @csspart modal - The modal container
+ * @csspart icon - The notification icon
+ * @csspart title - The modal title
+ * @csspart description - The modal description
+ * @csspart actions - The action buttons container
+ */
+export declare class TcNotificationModal extends LitElement {
+    title: string;
+    description: string;
+    allowLabel: string;
+    denyLabel: string;
+    storageKey: string;
+    private animation;
+    private storage;
+    static styles: CSSResult[];
+    connectedCallback(): void;
+    private updateDataState;
+    /**
+     * Check if the modal should be shown based on stored state.
+     */
+    shouldShow(): boolean;
+    show(): Promise<void>;
+    close(): Promise<void>;
+    private handleOverlayClick;
+    private handleAllow;
+    private handleDeny;
+    render(): TemplateResult<1>;
+}
+
+/**
+ * A modal displayed when the device goes offline.
+ * Automatically shows/hides based on network status.
+ *
+ * @fires tc-retry - Fired when the retry button is clicked
+ * @fires tc-online - Fired when the device comes back online
+ * @fires tc-offline - Fired when the device goes offline
+ * @csspart overlay - The backdrop overlay
+ * @csspart modal - The modal container
+ * @csspart icon - The offline icon
+ * @csspart title - The modal title
+ * @csspart description - The modal description
+ * @csspart action - The action button container
+ */
+export declare class TcOfflineModal extends LitElement {
+    title: string;
+    description: string;
+    retryLabel: string;
+    autoDetect: boolean;
+    private isOffline;
+    private animation;
+    static styles: CSSResult[];
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private handleOnline;
+    private handleOffline;
+    private updateDataState;
+    show(): Promise<void>;
+    hide(): Promise<void>;
+    private handleRetry;
+    render(): TemplateResult<1>;
+}
+
+/**
+ * OTP (One-Time Password) input component with individual cells and progress indicator.
+ * Uses shake animation from design-tokens.
+ *
+ * @fires tc-complete - Fired when all cells are filled
+ * @fires tc-change - Fired when the OTP value changes
+ * @csspart cells - The cells container
+ * @csspart cell - Individual cell input
+ * @csspart progress - The progress bar container
+ * @csspart progress-bar - The progress bar fill
+ */
+export declare class TcOtpInput extends LitElement {
+    length: number;
+    error: boolean;
+    disabled: boolean;
+    showProgress: boolean;
+    private values;
+    static styles: CSSResult[];
+    connectedCallback(): void;
+    render(): TemplateResult<1>;
+    private handleInput;
+    private handleKeydown;
+    private handlePaste;
+    private focusCell;
+    /** Focus the first empty cell or the last cell */
+    focus(): void;
+    /** Clear all values */
+    clear(): void;
+    /** Get the current OTP value */
+    getValue(): string;
+}
+
+/**
+ * Decorative floating blob background for pages.
+ * Uses CSS custom properties for color variants and inkFloat/inkDrift animations from design-tokens.
+ *
+ * @csspart decoration - The decoration container
+ * @csspart blob - Individual blob element
+ */
+export declare class TcPageDecoration extends LitElement {
+    variant: 'primary' | 'success' | 'error';
+    static styles: CSSResult[];
+    render(): TemplateResult<1>;
+}
+
+/**
+ * A section container with flex column layout.
+ *
+ * @slot - Section content
+ * @csspart section - The section element
+ */
+export declare class TcSection extends LitElement {
+    gap: string;
+    sx: Record<string, string | number>;
+    static styles: CSSResult;
+    render(): TemplateResult<1>;
+}
+
+/**
+ * A loading spinner with responsive sizing.
+ * Uses spin animation from design-tokens.
+ *
+ * @csspart spinner - The spinner element
+ */
+export declare class TcSpinner extends LitElement {
+    private mobile;
+    size: 'sm' | 'md' | 'lg' | 'auto';
+    color: string;
+    static styles: CSSResult[];
+    render(): TemplateResult<1>;
+}
+
+/**
+ * A full-screen success state with animated checkmark and message.
+ *
+ * @fires tc-action - Fired when the action button is clicked
+ * @csspart screen - The screen container
+ * @csspart content - The content wrapper
+ * @csspart icon - The success icon container
+ * @csspart title - The success title
+ * @csspart message - The success message
+ * @csspart action - The action button container
+ */
+export declare class TcSuccessScreen extends LitElement {
+    title: string;
+    message: string;
+    actionLabel: string;
+    autoAnimate: boolean;
+    private isAnimated;
+    private animation;
+    static styles: CSSResult;
+    connectedCallback(): void;
+    playAnimation(): Promise<void>;
+    private handleAction;
+    render(): TemplateResult<1>;
+}
+
+/**
+ * A circular symbol/avatar component.
+ *
+ * @slot - Symbol content (icon or text)
+ * @csspart symbol - The symbol container
+ */
+export declare class TcSymbol extends LitElement {
+    size: string;
+    background: string;
+    color: string;
+    static styles: CSSResult;
+    render(): TemplateResult<1>;
+}
+
+/**
+ * A text component with dynamic tag rendering.
+ * Supports semantic HTML tags for accessibility.
+ * Uses design-tokens for consistent theming across light/dark modes.
+ *
+ * @slot - Text content
+ * @csspart text - The text element
+ */
+export declare class TcText extends LitElement {
+    tag: TextTag;
+    size?: TextSize;
+    weight?: TextWeight;
+    color?: TextColor | string;
+    sx: Record<string, string | number>;
+    static styles: CSSResult[];
+    private getColorClass;
+    private getColorStyle;
+    render(): TemplateResult;
+}
+
+/**
+ * A toast notification component with auto-dismiss and animation.
+ *
+ * @slot - Toast message content
+ * @fires tc-dismiss - Fired when the toast is dismissed
+ * @csspart toast - The toast container
+ * @csspart content - The content container
+ * @csspart close - The close button
+ */
+export declare class TcToast extends LitElement {
+    variant: 'info' | 'success' | 'warning' | 'error';
+    duration: number;
+    autoDismiss: boolean;
+    dismissible: boolean;
+    private animation;
+    private dismissTimer?;
+    static styles: CSSResult[];
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private updateDataState;
+    private clearDismissTimer;
+    private startDismissTimer;
+    show(): Promise<void>;
+    hide(): Promise<void>;
+    private handleClose;
+    render(): TemplateResult<1>;
+}
+
+declare type TextColor = 'primary' | 'secondary' | 'tertiary' | 'muted' | 'accent' | 'success' | 'error' | 'warning' | 'info';
+
+declare type TextSize = 'sm' | 'base' | 'lg' | 'xl' | '2xl';
+
+declare type TextTag = 'p' | 'span' | 'div' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'label';
+
+declare type TextWeight = '400' | '500' | '600' | '700';
+
+export declare interface ValidationRule {
+    type: ValidationType;
+    value?: string | number | RegExp;
+    message: string;
+    validator?: (value: string) => boolean;
+}
+
+export declare type ValidationType = 'required' | 'email' | 'minLength' | 'maxLength' | 'pattern' | 'custom';
+
+declare type WildcardMessageHandler = (type: string, payload: unknown) => void;
+
+export { }