@transcodes/ui-components 0.3.0 → 0.3.2

package/dist/index.d.ts

@@ -1,8 +1,5 @@
-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;
@@ -138,8 +135,6 @@ export declare class HistoryController extends BaseController {
     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' | 'apple' | 'google' | 'windows' | 'samsung' | 'phone' | 'success' | 'lock' | 'person' | 'device' | 'totp' | 'email-otp' | 'qrcode' | 'key';
-
 /**
  * Controller for managing loading states and progress.
  *
@@ -286,697 +281,6 @@ export declare class StorageController<T = unknown> extends BaseController {
     hostDisconnected(): void;
 }
 
-/**
- * A card component for displaying authenticator information.
- * Commonly used for passkeys, TOTP, USB security keys, etc.
- *
- * @fires tc-delete - Fired when the delete button is clicked
- * @fires tc-toggle - Fired when the enable/disable toggle is clicked
- * @fires tc-click - Fired when the card is clicked
- * @csspart card - The card container
- * @csspart icon - The authenticator type icon container
- * @csspart content - The main content area
- * @csspart name - The authenticator name
- * @csspart meta - The metadata area (last used, etc.)
- * @csspart actions - The actions area
- * @csspart delete - The delete button
- */
-export declare class TcAuthenticatorCard extends LitElement {
-    name: string;
-    type: 'passkey' | 'totp' | 'usb' | 'phone' | 'email';
-    lastUsed: string;
-    enabled: boolean;
-    deletable: boolean;
-    clickable: boolean;
-    static styles: CSSResult;
-    private getIconName;
-    private handleCardClick;
-    private handleDelete;
-    render(): TemplateResult<1>;
-}
-
-/**
- * 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
- * @slot icon - Optional icon slot
- * @csspart callout - The callout container
- * @csspart icon - The icon container
- * @csspart content - The content 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 with optional text.
- *
- * @csspart divider - The divider element (simple mode)
- * @csspart container - The container element (text mode)
- * @csspart line - The line elements (text mode)
- * @csspart text - The text element (text mode)
- */
-export declare class TcDivider extends LitElement {
-    color: string;
-    spacing: string;
-    text: string;
-    static styles: CSSResult;
-    render(): TemplateResult<1>;
-}
-
-/**
- * A simplified error/warning/info message component.
- * Wraps tc-callout with appropriate icon and text styling.
- *
- * @csspart callout - The underlying callout container
- * @csspart icon - The icon element
- * @csspart message - The message text
- */
-export declare class TcErrorMessage extends LitElement {
-    variant: 'warning' | 'info' | 'error';
-    message: string;
-    static styles: CSSResult;
-    private getIconName;
-    private getIconColor;
-    render(): TemplateResult<1> | null;
-}
-
-/**
- * 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
- * @fires tc-keydown - Fired when a key is pressed
- * @fires tc-paste - Fired when content is pasted
- * @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;
-    private handleKeydown;
-    private handlePaste;
-    focus(): void;
-}
-
-/**
- * An input field with an attached chip indicator.
- * Useful for showing authentication method alongside email/username input.
- *
- * @fires tc-input - Fired when input value changes
- * @fires tc-blur - Fired when input loses focus
- * @fires tc-keydown - Fired on keydown
- * @csspart wrapper - The input wrapper container
- * @csspart input - The input element
- * @csspart chip - The chip element
- */
-export declare class TcInputWithChip extends LitElement {
-    label: string;
-    placeholder: string;
-    value: string;
-    error: string;
-    disabled: boolean;
-    readonly: boolean;
-    chipLabel: string;
-    chipIcon: string;
-    chipVariant: 'default' | 'success' | 'error' | 'info';
-    private inputId;
-    private isFocused;
-    static styles: CSSResult[];
-    render(): TemplateResult<1>;
-    private handleInput;
-    private handleFocus;
-    private handleBlur;
-    private handleKeydown;
-    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;