@tachui/primitives
Version:
Basic UI components for tachUI framework
250 lines • 8.07 kB
TypeScript
/**
* Enhanced Button Component (Phase 5.2)
*
* SwiftUI-inspired Button component with press states, variants,
* and advanced interaction handling.
*/
import type { ModifiableComponent, ModifierBuilder, ComponentInstance, ComponentProps, Signal } from '@tachui/core';
import { ColorAsset } from '@tachui/core';
import type { Concatenatable, ComponentSegment } from '@tachui/core';
import { ConcatenatedComponent } from '@tachui/core';
import { ComponentWithCSSClasses, type CSSClassesProps } from '@tachui/core';
/**
* Button role types following SwiftUI patterns
*/
export type ButtonRole = 'destructive' | 'cancel' | 'none';
/**
* Button variants
*/
export type ButtonVariant = 'filled' | 'outlined' | 'plain' | 'bordered' | 'borderedProminent';
/**
* Button size presets
*/
export type ButtonSize = 'small' | 'medium' | 'large';
/**
* Button state
*/
export type ButtonState = 'normal' | 'pressed' | 'disabled' | 'focused';
/**
* Button component properties with CSS classes support
*/
export interface ButtonProps extends ComponentProps, CSSClassesProps {
title?: string | (() => string) | Signal<string>;
systemImage?: string;
action?: () => void | Promise<void>;
role?: ButtonRole;
isEnabled?: boolean | Signal<boolean>;
variant?: ButtonVariant;
size?: ButtonSize;
tint?: string | Signal<string> | ColorAsset;
backgroundColor?: string | Signal<string> | ColorAsset;
foregroundColor?: string | Signal<string> | ColorAsset;
isPressed?: Signal<boolean>;
isLoading?: boolean | Signal<boolean>;
accessibilityLabel?: string;
accessibilityHint?: string;
controlSize?: ButtonSize;
hapticFeedback?: boolean;
}
/**
* Button theme configuration
*/
export interface ButtonTheme {
colors: {
primary: string;
secondary: string;
destructive: string;
background: string;
surface: string;
onPrimary: string;
onSecondary: string;
onSurface: string;
border: string;
disabled: string;
};
spacing: {
small: number;
medium: number;
large: number;
};
borderRadius: {
small: number;
medium: number;
large: number;
};
typography: {
small: {
size: number;
weight: string;
};
medium: {
size: number;
weight: string;
};
large: {
size: number;
weight: string;
};
};
}
/**
* Default button theme
*/
export declare const defaultButtonTheme: ButtonTheme;
/**
* Enhanced Button component class with CSS classes support
*/
export declare class EnhancedButton extends ComponentWithCSSClasses implements ComponentInstance<ButtonProps>, Concatenatable<ButtonProps> {
props: ButtonProps;
readonly type: "component";
readonly id: string;
mounted: boolean;
cleanup: (() => void)[];
stateSignal: () => ButtonState;
private setState;
theme: ButtonTheme;
constructor(props: ButtonProps, theme?: ButtonTheme);
/**
* Set up DOM event listeners for button interactions
*/
private setupDOMEventListeners;
/**
* Set up reactive style updates based on state changes
*/
private setupReactiveStyles;
/**
* Apply computed styles to the button element, respecting modifier-applied styles
*/
private applyStylesToElement;
/**
* Convert camelCase to kebab-case for CSS properties
*/
private camelToKebabCase;
/**
* Resolve color value from string, signal, or asset
*/
private resolveColorValue;
/**
* Attach interaction event listeners to the button element
*/
private attachInteractionEvents;
/**
* Check if button is enabled
*/
isEnabled(): boolean | (() => boolean);
/**
* Render the button component
*/
render(): {
type: "element";
tag: string;
props: {
debugLabel?: string | undefined;
className: string | Signal<string>;
type: string;
disabled: boolean | (() => boolean);
onClick: (() => void) | undefined;
};
children: import("@tachui/core").DOMNode[];
componentMetadata: {
id: string;
type: string;
};
}[];
/**
* Check if button is in loading state
*/
isLoading(): boolean;
/**
* Check if the button has color-related modifiers applied
*/
private hasColorModifiers;
/**
* Check if the button has typography-related modifiers applied
*/
private hasTypographyModifiers;
/**
* Get computed button styles based on variant, size, role, and state
*/
getButtonStyles(): Record<string, any>;
/**
* Handle button press with proper state management
*/
handlePress(): Promise<void>;
/**
* Trigger haptic feedback (mobile Safari support)
*/
private triggerHapticFeedback;
/**
* Helper to darken a color for pressed states
*/
private darkenColor;
/**
* Concatenate this button with another concatenatable component
*/
concat<U extends Concatenatable<any>>(other: U): ConcatenatedComponent<ButtonProps | U>;
/**
* Convert this button to a segment for concatenation
*/
toSegment(): ComponentSegment;
/**
* Check if this component supports concatenation
*/
isConcatenatable(): boolean;
/**
* Determine accessibility role for concatenation
*/
private determineAccessibilityRole;
/**
* Merge accessibility roles when combining components
*/
private mergeAccessibilityRoles;
}
/**
* Create enhanced Button component with modifier support
*/
export declare function Button(title: string | (() => string) | Signal<string>, action?: () => void | Promise<void>, props?: Omit<ButtonProps, 'title' | 'action'>): ModifiableComponent<ButtonProps> & {
modifier: ModifierBuilder<ModifiableComponent<ButtonProps>>;
};
/**
* Button variant shortcuts
*/
export declare const ButtonStyles: {
/**
* Filled button (primary)
*/
Filled: (title: string | (() => string) | Signal<string>, action?: () => void | Promise<void>, props?: Omit<ButtonProps, "title" | "action" | "variant">) => ModifiableComponent<ButtonProps> & {
modifier: ModifierBuilder<ModifiableComponent<ButtonProps>>;
};
/**
* Outlined button
*/
Outlined: (title: string | (() => string) | Signal<string>, action?: () => void | Promise<void>, props?: Omit<ButtonProps, "title" | "action" | "variant">) => ModifiableComponent<ButtonProps> & {
modifier: ModifierBuilder<ModifiableComponent<ButtonProps>>;
};
/**
* Plain button (text only)
*/
Plain: (title: string | (() => string) | Signal<string>, action?: () => void | Promise<void>, props?: Omit<ButtonProps, "title" | "action" | "variant">) => ModifiableComponent<ButtonProps> & {
modifier: ModifierBuilder<ModifiableComponent<ButtonProps>>;
};
/**
* Bordered button
*/
Bordered: (title: string | (() => string) | Signal<string>, action?: () => void | Promise<void>, props?: Omit<ButtonProps, "title" | "action" | "variant">) => ModifiableComponent<ButtonProps> & {
modifier: ModifierBuilder<ModifiableComponent<ButtonProps>>;
};
/**
* Destructive button
*/
Destructive: (title: string | (() => string) | Signal<string>, action?: () => void | Promise<void>, props?: Omit<ButtonProps, "title" | "action" | "role">) => ModifiableComponent<ButtonProps> & {
modifier: ModifierBuilder<ModifiableComponent<ButtonProps>>;
};
/**
* Cancel button
*/
Cancel: (title: string | (() => string) | Signal<string>, action?: () => void | Promise<void>, props?: Omit<ButtonProps, "title" | "action" | "role">) => ModifiableComponent<ButtonProps> & {
modifier: ModifierBuilder<ModifiableComponent<ButtonProps>>;
};
};
//# sourceMappingURL=Button.d.ts.map