@tachui/primitives
Version:
Basic UI components for tachUI framework
207 lines • 6.75 kB
TypeScript
/**
* Enhanced Toggle Component (Phase 6.4.5)
*
* SwiftUI-inspired Toggle component with switch-style boolean controls,
* smooth animations, and multiple style variants.
*/
import type { ModifiableComponent, ModifierBuilder } from '@tachui/core';
import type { Signal } from '@tachui/core';
import type { ComponentInstance, ComponentProps, DOMNode } from '@tachui/core';
/**
* Toggle component properties
*/
export interface ToggleProps extends ComponentProps {
isOn: boolean | Signal<boolean>;
onToggle?: (isOn: boolean) => void;
label?: string | (() => string) | Signal<string> | ComponentInstance;
variant?: 'switch' | 'checkbox' | 'button';
size?: 'small' | 'medium' | 'large';
color?: string;
offColor?: string;
thumbColor?: string;
disabled?: boolean | Signal<boolean>;
animated?: boolean;
labelPosition?: 'leading' | 'trailing';
spacing?: number;
accessibilityLabel?: string;
accessibilityHint?: string;
}
/**
* Enhanced Toggle component class
*/
export declare class EnhancedToggle implements ComponentInstance<ToggleProps> {
props: ToggleProps;
readonly type: "component";
readonly id: string;
mounted: boolean;
cleanup: (() => void)[];
private toggleElement;
private setIsAnimating;
constructor(props: ToggleProps);
/**
* Get current toggle state
*/
private getIsOn;
/**
* Check if toggle is disabled
*/
private isDisabled;
/**
* Resolve label content
*/
private resolveLabel;
/**
* Helper to render component content safely
*/
private renderComponentContent;
/**
* Handle toggle change
*/
private handleToggle;
/**
* Get toggle size styles
*/
private getSizeStyles;
/**
* Render switch variant
*/
private renderSwitch;
/**
* Render checkbox variant
*/
private renderCheckbox;
/**
* Render button variant
*/
private renderButton;
/**
* Render toggle control based on variant
*/
private renderToggleControl;
/**
* Render label content
*/
private renderLabel;
render(): DOMNode;
}
/**
* Toggle component function
*/
export declare function Toggle(isOn: boolean | Signal<boolean>, props?: Omit<ToggleProps, 'isOn'>): ModifiableComponent<ToggleProps> & {
modifier: ModifierBuilder<ModifiableComponent<ToggleProps>>;
};
/**
* Toggle with label
*/
export declare function ToggleWithLabel(label: string | (() => string) | Signal<string> | ComponentInstance, isOn: boolean | Signal<boolean>, props?: Omit<ToggleProps, 'isOn' | 'label'>): ModifiableComponent<ToggleProps> & {
modifier: ModifierBuilder<ModifiableComponent<ToggleProps>>;
};
/**
* Toggle style variants
*/
export declare const ToggleStyles: {
/**
* Switch toggle (default)
*/
Switch(isOn: boolean | Signal<boolean>, props?: Omit<ToggleProps, "isOn" | "variant">): ModifiableComponent<ToggleProps> & {
modifier: ModifierBuilder<ModifiableComponent<ToggleProps>>;
};
/**
* Checkbox toggle
*/
Checkbox(isOn: boolean | Signal<boolean>, props?: Omit<ToggleProps, "isOn" | "variant">): ModifiableComponent<ToggleProps> & {
modifier: ModifierBuilder<ModifiableComponent<ToggleProps>>;
};
/**
* Button toggle
*/
Button(isOn: boolean | Signal<boolean>, props?: Omit<ToggleProps, "isOn" | "variant">): ModifiableComponent<ToggleProps> & {
modifier: ModifierBuilder<ModifiableComponent<ToggleProps>>;
};
/**
* Small toggle
*/
Small(isOn: boolean | Signal<boolean>, props?: Omit<ToggleProps, "isOn" | "size">): ModifiableComponent<ToggleProps> & {
modifier: ModifierBuilder<ModifiableComponent<ToggleProps>>;
};
/**
* Large toggle
*/
Large(isOn: boolean | Signal<boolean>, props?: Omit<ToggleProps, "isOn" | "size">): ModifiableComponent<ToggleProps> & {
modifier: ModifierBuilder<ModifiableComponent<ToggleProps>>;
};
/**
* Custom color toggle
*/
CustomColor(isOn: boolean | Signal<boolean>, color: string, props?: Omit<ToggleProps, "isOn" | "color">): ModifiableComponent<ToggleProps> & {
modifier: ModifierBuilder<ModifiableComponent<ToggleProps>>;
};
/**
* Toggle with leading label
*/
WithLeadingLabel(label: string | (() => string) | Signal<string> | ComponentInstance, isOn: boolean | Signal<boolean>, props?: Omit<ToggleProps, "isOn" | "label" | "labelPosition">): ModifiableComponent<ToggleProps> & {
modifier: ModifierBuilder<ModifiableComponent<ToggleProps>>;
};
/**
* Toggle with trailing label (default)
*/
WithTrailingLabel(label: string | (() => string) | Signal<string> | ComponentInstance, isOn: boolean | Signal<boolean>, props?: Omit<ToggleProps, "isOn" | "label" | "labelPosition">): ModifiableComponent<ToggleProps> & {
modifier: ModifierBuilder<ModifiableComponent<ToggleProps>>;
};
};
/**
* Toggle utilities
*/
export declare const ToggleUtils: {
/**
* Create a toggle group with multiple options
*/
createGroup(options: Array<{
key: string;
label: string;
isOn: boolean | Signal<boolean>;
onToggle?: (isOn: boolean) => void;
}>, props?: Omit<ToggleProps, "isOn" | "label" | "onToggle">): (ModifiableComponent<ToggleProps> & {
modifier: ModifierBuilder<ModifiableComponent<ToggleProps>>;
})[];
/**
* Create exclusive toggle group (radio-like behavior)
*/
createExclusiveGroup(options: Array<{
key: string;
label: string;
}>, selectedKey: string | Signal<string>, onSelectionChange?: (key: string) => void, props?: Omit<ToggleProps, "isOn" | "label" | "onToggle">): (ModifiableComponent<ToggleProps> & {
modifier: ModifierBuilder<ModifiableComponent<ToggleProps>>;
})[];
/**
* Batch toggle operations
*/
batch: {
/**
* Toggle all items in a group
*/
toggleAll(toggles: Array<{
isOn: boolean | Signal<boolean>;
onToggle?: (isOn: boolean) => void;
}>, newState: boolean): void;
/**
* Get state of all toggles in a group
*/
getStates(toggles: Array<{
isOn: boolean | Signal<boolean>;
}>): boolean[];
/**
* Check if all toggles are on
*/
allOn(toggles: Array<{
isOn: boolean | Signal<boolean>;
}>): boolean;
/**
* Check if any toggle is on
*/
anyOn(toggles: Array<{
isOn: boolean | Signal<boolean>;
}>): boolean;
};
};
//# sourceMappingURL=Toggle.d.ts.map