@tachui/primitives/dist/layout/Divider.d.ts

Basic UI components for tachUI framework

/**
 * Divider Component
 *
 * SwiftUI-inspired Divider component for visual separation between content.
 * Simple, clean line separator with customizable styling.
 */
import type { ModifiableComponent, ModifierBuilder } from '@tachui/core';
import type { Signal } from '@tachui/core';
import type { ComponentInstance, ComponentProps, DOMNode } from '@tachui/core';
/**
 * Divider component properties
 */
export interface DividerProps extends ComponentProps {
    color?: string | Signal<string>;
    thickness?: number | Signal<number>;
    length?: number | string | Signal<number | string>;
    orientation?: 'horizontal' | 'vertical';
    margin?: number | Signal<number>;
    style?: 'solid' | 'dashed' | 'dotted';
    opacity?: number | Signal<number>;
}
/**
 * Default divider theme
 */
export interface DividerTheme {
    colors: {
        default: string;
        light: string;
        medium: string;
        heavy: string;
        primary: string;
        secondary: string;
        subtle: string;
        prominent: string;
    };
    thickness: {
        thin: number;
        medium: number;
        thick: number;
    };
    spacing: {
        small: number;
        medium: number;
        large: number;
    };
}
export declare const defaultDividerTheme: DividerTheme;
/**
 * Divider component implementation
 */
export declare class DividerComponent implements ComponentInstance<DividerProps> {
    readonly type: "component";
    readonly id: string;
    readonly props: DividerProps;
    cleanup: (() => void)[];
    private theme;
    constructor(props: DividerProps);
    private resolveValue;
    private getBaseStyles;
    render(): DOMNode;
    /**
     * Cleanup resources
     */
    dispose(): void;
}
/**
 * Create a Divider component
 */
export declare function Divider(props?: DividerProps): ModifiableComponent<DividerProps> & {
    modifier: ModifierBuilder<ModifiableComponent<DividerProps>>;
};
/**
 * Divider utility functions
 */
export declare const DividerUtils: {
    /**
     * Create a horizontal divider
     */
    horizontal(props?: Omit<DividerProps, "orientation">): ModifiableComponent<DividerProps> & {
        modifier: ModifierBuilder<ModifiableComponent<DividerProps>>;
    };
    /**
     * Create a vertical divider
     */
    vertical(lengthOrProps?: number | string | Omit<DividerProps, "orientation">, thickness?: number): ModifiableComponent<DividerProps> & {
        modifier: ModifierBuilder<ModifiableComponent<DividerProps>>;
    };
    /**
     * Create a thin divider
     */
    thin(color?: string): ModifiableComponent<DividerProps> & {
        modifier: ModifierBuilder<ModifiableComponent<DividerProps>>;
    };
    /**
     * Create a medium divider
     */
    medium(color?: string): ModifiableComponent<DividerProps> & {
        modifier: ModifierBuilder<ModifiableComponent<DividerProps>>;
    };
    /**
     * Create a thick divider
     */
    thick(color?: string): ModifiableComponent<DividerProps> & {
        modifier: ModifierBuilder<ModifiableComponent<DividerProps>>;
    };
    /**
     * Create a dashed divider
     */
    dashed(color?: string, thickness?: number): ModifiableComponent<DividerProps> & {
        modifier: ModifierBuilder<ModifiableComponent<DividerProps>>;
    };
    /**
     * Create a dotted divider
     */
    dotted(color?: string, thickness?: number): ModifiableComponent<DividerProps> & {
        modifier: ModifierBuilder<ModifiableComponent<DividerProps>>;
    };
    /**
     * Create a subtle divider
     */
    subtle(color?: string): ModifiableComponent<DividerProps> & {
        modifier: ModifierBuilder<ModifiableComponent<DividerProps>>;
    };
    /**
     * Create a prominent divider
     */
    prominent(color?: string): ModifiableComponent<DividerProps> & {
        modifier: ModifierBuilder<ModifiableComponent<DividerProps>>;
    };
};
/**
 * Divider styles utility
 */
export declare const DividerStyles: {
    theme: DividerTheme;
    colors: {
        primary: string;
        success: string;
        warning: string;
        danger: string;
    };
    thin: (color?: string) => {
        thickness: number;
        color: string | undefined;
    };
    medium: (color?: string) => {
        thickness: number;
        color: string | undefined;
    };
    thick: (color?: string) => {
        thickness: number;
        color: string | undefined;
    };
    createTheme: (overrides: Partial<DividerTheme>) => DividerTheme;
    primary: (color?: string) => ModifiableComponent<DividerProps> & {
        modifier: ModifierBuilder<ModifiableComponent<DividerProps>>;
    };
    secondary: (color?: string) => ModifiableComponent<DividerProps> & {
        modifier: ModifierBuilder<ModifiableComponent<DividerProps>>;
    };
    subtle: (color?: string) => ModifiableComponent<DividerProps> & {
        modifier: ModifierBuilder<ModifiableComponent<DividerProps>>;
    };
    prominent: (color?: string) => ModifiableComponent<DividerProps> & {
        modifier: ModifierBuilder<ModifiableComponent<DividerProps>>;
    };
};
//# sourceMappingURL=Divider.d.ts.map