@senka-ai/ui/dist/utils/rendering.d.ts

A modern, type-safe Svelte 5 UI component library with full theme support, accessibility standards, and robust state management patterns

/**
 * Component composition and rendering utilities
 *
 * These utilities simplify common rendering patterns and conditional logic
 * used throughout components, making templates cleaner and more readable.
 */
/**
 * Conditionally render content based on a boolean condition
 * Useful for complex conditional rendering logic
 */
export declare function renderIf<T>(condition: boolean, content: T): T | null;
/**
 * Render content with a fallback if the primary content is falsy
 * Useful for optional content with defaults
 */
export declare function renderWithFallback<T>(primary: T | null | undefined, fallback: T): T;
/**
 * Render content only if all conditions are true
 * Useful for complex conditional rendering
 */
export declare function renderIfAll(conditions: boolean[], content: any): any;
/**
 * Render content if any condition is true
 * Useful for OR-based conditional rendering
 */
export declare function renderIfAny(conditions: boolean[], content: any): any;
/**
 * Choose between multiple rendering options based on a value
 * Useful for switch-like rendering logic
 */
export declare function renderSwitch<T extends string | number, R>(value: T, options: Record<T, R>, fallback?: R): R | null;
/**
 * Utilities for icon rendering patterns
 */
export declare const IconRenderer: {
    /**
     * Check if an icon should be rendered
     */
    shouldRender(icon: any, showIcon?: boolean): boolean;
    /**
     * Determine if icon is a string (emoji) or component
     */
    isStringIcon(icon: any): icon is string;
    /**
     * Render an icon with fallback logic
     */
    render(icon: any, fallback?: any): any;
    /**
     * Get appropriate CSS classes for icon positioning
     */
    getPositionClasses(position: "left" | "right", hasIcon: boolean): string;
};
/**
 * Utilities for form field rendering patterns
 */
export declare const FormRenderer: {
    /**
     * Determine if a label should be shown
     */
    shouldShowLabel(label?: string, showLabel?: boolean): boolean;
    /**
     * Determine if helper text should be shown
     */
    shouldShowHelperText(helperText?: string, showHelperText?: boolean): boolean;
    /**
     * Determine if error should be shown
     */
    shouldShowError(error?: string): boolean;
    /**
     * Get the appropriate input state for styling
     */
    getInputState(focused: boolean, error?: string, disabled?: boolean): "default" | "focused" | "error" | "disabled";
};
/**
 * Utilities for avatar rendering patterns
 */
export declare const AvatarRenderer: {
    /**
     * Generate initials from a name
     * Updated to handle edge cases properly
     */
    getInitials(name?: string): string;
    /**
     * Determine what to render based on available props
     */
    getRenderType(src?: string, name?: string): "image" | "initials" | "placeholder";
    /**
     * Get status indicator classes
     * Updated to match Avatar component's original design
     */
    getStatusClasses(status?: "online" | "offline" | "away" | "busy", size?: "xs" | "small" | "medium" | "large"): string;
};
/**
 * Utilities for list rendering patterns
 */
export declare const ListRenderer: {
    /**
     * Determine if a divider should be shown
     */
    shouldShowDivider(index: number, total: number, showDividers?: boolean): boolean;
    /**
     * Get list item classes based on position
     */
    getItemClasses(index: number, total: number, variant?: "default" | "compact"): string;
};
/**
 * Utilities for badge rendering patterns
 */
export declare const BadgeRenderer: {
    /**
     * Format badge number with max value
     */
    formatNumber(value: number, max?: number): string;
    /**
     * Determine badge type from props
     */
    getBadgeType(number?: number, icon?: any, dot?: boolean): "number" | "icon" | "dot";
    /**
     * Get appropriate size classes for badge content
     * Supports xs, small, medium, and large sizes
     */
    getContentSize(size: "xs" | "small" | "medium" | "large", type: "number" | "icon" | "dot"): string;
};
/**
 * Utilities for dropdown/select rendering patterns
 */
export declare const DropdownRenderer: {
    /**
     * Find selected option from options array
     */
    findSelectedOption<T extends {
        value: string;
        label: string;
    }>(options: T[], selectedValue?: string): T | undefined;
    /**
     * Get display text for selected option
     */
    getDisplayText<T extends {
        value: string;
        label: string;
    }>(options: T[], selectedValue?: string, placeholder?: string): string;
    /**
     * Determine if dropdown should show as open
     */
    shouldShowOpen(isOpen: boolean, disabled?: boolean): boolean;
};
/**
 * Utilities for button rendering patterns
 */
export declare const ButtonRenderer: {
    /**
     * Determine if button should show loading state
     */
    shouldShowLoading(loading?: boolean, disabled?: boolean): boolean;
    /**
     * Get content to render based on loading state
     */
    getContent(loading: boolean, children: any, loadingText?: string): any;
    /**
     * Determine if button is effectively disabled
     */
    isEffectivelyDisabled(disabled?: boolean, loading?: boolean): boolean;
};
/**
 * Utilities for media rendering patterns
 */
export declare const MediaRenderer: {
    /**
     * Determine aspect ratio classes
     */
    getAspectRatioClasses(aspectRatio?: "1:1" | "16:9" | "4:3" | "3:2"): string;
    /**
     * Get rounded corner classes
     */
    getRoundedClasses(rounded?: boolean | "small" | "medium" | "large"): string;
};
/**
 * Generic utilities for common patterns
 */
export declare const GenericRenderer: {
    /**
     * Safely render children with null check
     */
    renderChildren(children?: any): any;
    /**
     * Get HTML attributes for spreading
     */
    getRestProps(allProps: Record<string, any>, excludeKeys: string[]): Record<string, any>;
    /**
     * Create accessibility attributes
     */
    getA11yProps(options: {
        role?: string;
        ariaLabel?: string;
        ariaDescribedBy?: string;
        ariaPressed?: boolean;
        ariaExpanded?: boolean;
    }): Record<string, any>;
};
//# sourceMappingURL=rendering.d.ts.map