@tachui/primitives
Version:
Basic UI components for tachUI framework
365 lines • 18.5 kB
TypeScript
/**
* Enhanced Link Component
*
* A control for navigating to a URL that matches the SwiftUI Link API exactly.
* iOS 14.0+ equivalent for web applications.
*/
import type { Signal } from '@tachui/core';
import type { ComponentInstance, ComponentProps, DOMNode } from '@tachui/core';
import type { Concatenatable, ComponentSegment } from '@tachui/core';
import { ConcatenatedComponent } from '@tachui/core';
/**
* Link target types for different behaviors
*/
export type LinkTarget = '_self' | '_blank' | '_parent' | '_top';
/**
* Link routing behavior for internal vs external links
*/
export type LinkRoutingMode = 'auto' | 'external' | 'internal' | 'spa';
/**
* Enhanced Link Properties (combines SwiftUI API with web-specific features)
*/
export interface EnhancedLinkProps extends ComponentProps {
/** The destination URL - matches SwiftUI's destination parameter */
destination: string | URL | Signal<string | URL>;
/** Optional text content for simple links */
text?: string | Signal<string>;
/** Label content (for closure-style links) */
label?: () => ComponentInstance;
/** Complex children content (for backward compatibility) */
children?: string | ComponentInstance | (string | ComponentInstance)[];
/** Environment action override (matches SwiftUI's openURL environment) */
openURLAction?: (url: string) => 'handled' | 'systemAction';
/** Target window for navigation */
target?: LinkTarget | Signal<LinkTarget>;
/** Routing behavior mode */
routingMode?: LinkRoutingMode | Signal<LinkRoutingMode>;
/** Download file functionality */
download?: boolean | string | Signal<boolean | string>;
/** Custom rel attributes */
rel?: string | Signal<string>;
/** Click event handler */
onPress?: (event: Event) => void;
/** Pre-navigation hook with cancellation support */
onBeforeNavigation?: (url: string) => boolean | Promise<boolean>;
/** Custom internal routing handler */
onInternalNavigation?: (path: string) => boolean | Promise<boolean>;
/** Disabled state */
disabled?: boolean | Signal<boolean>;
/** Custom ARIA label */
accessibilityLabel?: string | Signal<string>;
/** ARIA description/hint */
accessibilityHint?: string | Signal<string>;
/** Custom ARIA role */
accessibilityRole?: string | Signal<string>;
}
/**
* Enhanced Link Component Implementation
*/
export declare class EnhancedLinkComponent implements ComponentInstance<EnhancedLinkProps>, Concatenatable<EnhancedLinkProps> {
readonly type: "component";
readonly id: string;
readonly props: EnhancedLinkProps;
constructor(props: EnhancedLinkProps);
private resolveValue;
private getDestination;
private getTarget;
private getRoutingMode;
private getRel;
private getDownload;
private isDisabled;
private getAccessibilityLabel;
private getAccessibilityHint;
private getAccessibilityRole;
private shouldUseInternalRouting;
private isSpecialScheme;
private handleClick;
private handleSPANavigation;
private isExternalURL;
private renderContent;
private renderChildren;
private renderChild;
render(): DOMNode;
concat<U extends Concatenatable<any>>(other: U): ConcatenatedComponent<EnhancedLinkProps | U>;
toSegment(): ComponentSegment;
isConcatenatable(): boolean;
}
/**
* Create enhanced Link component with modifier support
*
* Supports both SwiftUI-compatible API and object-based API for backward compatibility:
* - SwiftUI API: Link("text", "destination")
* - Object API: Link({ destination: "url", children: "text", ... })
*/
export declare function Link(textOrProps: string | Signal<string> | EnhancedLinkProps, destination?: string | URL | Signal<string | URL>): any;
/**
* Environment-style OpenURL Action (matches SwiftUI pattern)
*/
export type OpenURLAction = (url: string) => 'handled' | 'systemAction';
/**
* Enhanced Link Utilities (comprehensive web link patterns)
*/
export declare const LinkUtils: {
/**
* Create an external link that opens in a new tab
*/
external(url: string, label: string, options?: Partial<EnhancedLinkProps>): {
destination: string | URL | Signal<string | URL>;
text?: (string | Signal<string>) | undefined;
label?: (() => ComponentInstance) | undefined;
children: string | ComponentInstance | (string | ComponentInstance)[];
openURLAction?: ((url: string) => "handled" | "systemAction") | undefined;
target: LinkTarget | Signal<LinkTarget>;
routingMode: LinkRoutingMode | Signal<LinkRoutingMode>;
download?: (boolean | string | Signal<boolean | string>) | undefined;
rel: string | Signal<string>;
onPress?: ((event: Event) => void) | undefined;
onBeforeNavigation?: ((url: string) => boolean | Promise<boolean>) | undefined;
onInternalNavigation?: ((path: string) => boolean | Promise<boolean>) | undefined;
disabled?: (boolean | Signal<boolean>) | undefined;
accessibilityLabel?: (string | Signal<string>) | undefined;
accessibilityHint: string | Signal<string>;
accessibilityRole?: (string | Signal<string>) | undefined;
key?: string | number | undefined;
ref?: import("@tachui/core").ComponentRef | undefined;
debugLabel?: string | undefined;
};
/**
* Create an internal link for same-domain navigation
*/
internal(path: string, label: string, options?: Partial<EnhancedLinkProps>): {
destination: string | URL | Signal<string | URL>;
text?: (string | Signal<string>) | undefined;
label?: (() => ComponentInstance) | undefined;
children: string | ComponentInstance | (string | ComponentInstance)[];
openURLAction?: ((url: string) => "handled" | "systemAction") | undefined;
target: LinkTarget | Signal<LinkTarget>;
routingMode: LinkRoutingMode | Signal<LinkRoutingMode>;
download?: (boolean | string | Signal<boolean | string>) | undefined;
rel?: (string | Signal<string>) | undefined;
onPress?: ((event: Event) => void) | undefined;
onBeforeNavigation?: ((url: string) => boolean | Promise<boolean>) | undefined;
onInternalNavigation?: ((path: string) => boolean | Promise<boolean>) | undefined;
disabled?: (boolean | Signal<boolean>) | undefined;
accessibilityLabel?: (string | Signal<string>) | undefined;
accessibilityHint?: (string | Signal<string>) | undefined;
accessibilityRole?: (string | Signal<string>) | undefined;
key?: string | number | undefined;
ref?: import("@tachui/core").ComponentRef | undefined;
debugLabel?: string | undefined;
};
/**
* Create a SPA link using History API
*/
spa(path: string, label: string, options?: Partial<EnhancedLinkProps>): {
destination: string | URL | Signal<string | URL>;
text?: (string | Signal<string>) | undefined;
label?: (() => ComponentInstance) | undefined;
children: string | ComponentInstance | (string | ComponentInstance)[];
openURLAction?: ((url: string) => "handled" | "systemAction") | undefined;
target: LinkTarget | Signal<LinkTarget>;
routingMode: LinkRoutingMode | Signal<LinkRoutingMode>;
download?: (boolean | string | Signal<boolean | string>) | undefined;
rel?: (string | Signal<string>) | undefined;
onPress?: ((event: Event) => void) | undefined;
onBeforeNavigation?: ((url: string) => boolean | Promise<boolean>) | undefined;
onInternalNavigation?: ((path: string) => boolean | Promise<boolean>) | undefined;
disabled?: (boolean | Signal<boolean>) | undefined;
accessibilityLabel?: (string | Signal<string>) | undefined;
accessibilityHint: string | Signal<string>;
accessibilityRole?: (string | Signal<string>) | undefined;
key?: string | number | undefined;
ref?: import("@tachui/core").ComponentRef | undefined;
debugLabel?: string | undefined;
};
/**
* Create an email link with optional subject and body
*/
email(address: string, subject?: string, body?: string, label?: string): {
destination: string;
children: string;
accessibilityLabel: string;
accessibilityHint: string;
};
/**
* Create a phone link with formatted display
*/
phone(phoneNumber: string, label?: string): {
destination: string;
children: string;
accessibilityLabel: string;
accessibilityHint: string;
};
/**
* Create a download link
*/
download(url: string, filename?: string, label?: string): {
destination: string;
children: string;
download: string | boolean;
accessibilityLabel: string;
accessibilityHint: string;
};
/**
* Social media link utilities
*/
social: {
twitter(username: string, label?: string): {
destination: string | URL | Signal<string | URL>;
text?: (string | Signal<string>) | undefined;
label?: (() => ComponentInstance) | undefined;
children: string | ComponentInstance | (string | ComponentInstance)[];
openURLAction?: ((url: string) => "handled" | "systemAction") | undefined;
target: LinkTarget | Signal<LinkTarget>;
routingMode: LinkRoutingMode | Signal<LinkRoutingMode>;
download?: (boolean | string | Signal<boolean | string>) | undefined;
rel: string | Signal<string>;
onPress?: ((event: Event) => void) | undefined;
onBeforeNavigation?: ((url: string) => boolean | Promise<boolean>) | undefined;
onInternalNavigation?: ((path: string) => boolean | Promise<boolean>) | undefined;
disabled?: (boolean | Signal<boolean>) | undefined;
accessibilityLabel?: (string | Signal<string>) | undefined;
accessibilityHint: string | Signal<string>;
accessibilityRole?: (string | Signal<string>) | undefined;
key?: string | number | undefined;
ref?: import("@tachui/core").ComponentRef | undefined;
debugLabel?: string | undefined;
};
github(username: string, label?: string): {
destination: string | URL | Signal<string | URL>;
text?: (string | Signal<string>) | undefined;
label?: (() => ComponentInstance) | undefined;
children: string | ComponentInstance | (string | ComponentInstance)[];
openURLAction?: ((url: string) => "handled" | "systemAction") | undefined;
target: LinkTarget | Signal<LinkTarget>;
routingMode: LinkRoutingMode | Signal<LinkRoutingMode>;
download?: (boolean | string | Signal<boolean | string>) | undefined;
rel: string | Signal<string>;
onPress?: ((event: Event) => void) | undefined;
onBeforeNavigation?: ((url: string) => boolean | Promise<boolean>) | undefined;
onInternalNavigation?: ((path: string) => boolean | Promise<boolean>) | undefined;
disabled?: (boolean | Signal<boolean>) | undefined;
accessibilityLabel?: (string | Signal<string>) | undefined;
accessibilityHint: string | Signal<string>;
accessibilityRole?: (string | Signal<string>) | undefined;
key?: string | number | undefined;
ref?: import("@tachui/core").ComponentRef | undefined;
debugLabel?: string | undefined;
};
linkedin(profile: string, label?: string): {
destination: string | URL | Signal<string | URL>;
text?: (string | Signal<string>) | undefined;
label?: (() => ComponentInstance) | undefined;
children: string | ComponentInstance | (string | ComponentInstance)[];
openURLAction?: ((url: string) => "handled" | "systemAction") | undefined;
target: LinkTarget | Signal<LinkTarget>;
routingMode: LinkRoutingMode | Signal<LinkRoutingMode>;
download?: (boolean | string | Signal<boolean | string>) | undefined;
rel: string | Signal<string>;
onPress?: ((event: Event) => void) | undefined;
onBeforeNavigation?: ((url: string) => boolean | Promise<boolean>) | undefined;
onInternalNavigation?: ((path: string) => boolean | Promise<boolean>) | undefined;
disabled?: (boolean | Signal<boolean>) | undefined;
accessibilityLabel?: (string | Signal<string>) | undefined;
accessibilityHint: string | Signal<string>;
accessibilityRole?: (string | Signal<string>) | undefined;
key?: string | number | undefined;
ref?: import("@tachui/core").ComponentRef | undefined;
debugLabel?: string | undefined;
};
instagram(username: string, label?: string): {
destination: string | URL | Signal<string | URL>;
text?: (string | Signal<string>) | undefined;
label?: (() => ComponentInstance) | undefined;
children: string | ComponentInstance | (string | ComponentInstance)[];
openURLAction?: ((url: string) => "handled" | "systemAction") | undefined;
target: LinkTarget | Signal<LinkTarget>;
routingMode: LinkRoutingMode | Signal<LinkRoutingMode>;
download?: (boolean | string | Signal<boolean | string>) | undefined;
rel: string | Signal<string>;
onPress?: ((event: Event) => void) | undefined;
onBeforeNavigation?: ((url: string) => boolean | Promise<boolean>) | undefined;
onInternalNavigation?: ((path: string) => boolean | Promise<boolean>) | undefined;
disabled?: (boolean | Signal<boolean>) | undefined;
accessibilityLabel?: (string | Signal<string>) | undefined;
accessibilityHint: string | Signal<string>;
accessibilityRole?: (string | Signal<string>) | undefined;
key?: string | number | undefined;
ref?: import("@tachui/core").ComponentRef | undefined;
debugLabel?: string | undefined;
};
facebook(username: string, label?: string): {
destination: string | URL | Signal<string | URL>;
text?: (string | Signal<string>) | undefined;
label?: (() => ComponentInstance) | undefined;
children: string | ComponentInstance | (string | ComponentInstance)[];
openURLAction?: ((url: string) => "handled" | "systemAction") | undefined;
target: LinkTarget | Signal<LinkTarget>;
routingMode: LinkRoutingMode | Signal<LinkRoutingMode>;
download?: (boolean | string | Signal<boolean | string>) | undefined;
rel: string | Signal<string>;
onPress?: ((event: Event) => void) | undefined;
onBeforeNavigation?: ((url: string) => boolean | Promise<boolean>) | undefined;
onInternalNavigation?: ((path: string) => boolean | Promise<boolean>) | undefined;
disabled?: (boolean | Signal<boolean>) | undefined;
accessibilityLabel?: (string | Signal<string>) | undefined;
accessibilityHint: string | Signal<string>;
accessibilityRole?: (string | Signal<string>) | undefined;
key?: string | number | undefined;
ref?: import("@tachui/core").ComponentRef | undefined;
debugLabel?: string | undefined;
};
};
/**
* App store link utilities
*/
appStore: {
ios(appId: string, label?: string): {
destination: string | URL | Signal<string | URL>;
text?: (string | Signal<string>) | undefined;
label?: (() => ComponentInstance) | undefined;
children: string | ComponentInstance | (string | ComponentInstance)[];
openURLAction?: ((url: string) => "handled" | "systemAction") | undefined;
target: LinkTarget | Signal<LinkTarget>;
routingMode: LinkRoutingMode | Signal<LinkRoutingMode>;
download?: (boolean | string | Signal<boolean | string>) | undefined;
rel: string | Signal<string>;
onPress?: ((event: Event) => void) | undefined;
onBeforeNavigation?: ((url: string) => boolean | Promise<boolean>) | undefined;
onInternalNavigation?: ((path: string) => boolean | Promise<boolean>) | undefined;
disabled?: (boolean | Signal<boolean>) | undefined;
accessibilityLabel?: (string | Signal<string>) | undefined;
accessibilityHint: string | Signal<string>;
accessibilityRole?: (string | Signal<string>) | undefined;
key?: string | number | undefined;
ref?: import("@tachui/core").ComponentRef | undefined;
debugLabel?: string | undefined;
};
android(packageName: string, label?: string): {
destination: string | URL | Signal<string | URL>;
text?: (string | Signal<string>) | undefined;
label?: (() => ComponentInstance) | undefined;
children: string | ComponentInstance | (string | ComponentInstance)[];
openURLAction?: ((url: string) => "handled" | "systemAction") | undefined;
target: LinkTarget | Signal<LinkTarget>;
routingMode: LinkRoutingMode | Signal<LinkRoutingMode>;
download?: (boolean | string | Signal<boolean | string>) | undefined;
rel: string | Signal<string>;
onPress?: ((event: Event) => void) | undefined;
onBeforeNavigation?: ((url: string) => boolean | Promise<boolean>) | undefined;
onInternalNavigation?: ((path: string) => boolean | Promise<boolean>) | undefined;
disabled?: (boolean | Signal<boolean>) | undefined;
accessibilityLabel?: (string | Signal<string>) | undefined;
accessibilityHint: string | Signal<string>;
accessibilityRole?: (string | Signal<string>) | undefined;
key?: string | number | undefined;
ref?: import("@tachui/core").ComponentRef | undefined;
debugLabel?: string | undefined;
};
};
/**
* Create a custom OpenURL action
*/
openURLAction(handler: (url: string) => boolean): OpenURLAction;
};
//# sourceMappingURL=Link.d.ts.map