@capitol.ai/ui/dist/index.d.ts

Library of React components from Capitol AI

import { default as default_2 } from 'react';
import { JSX } from 'react/jsx-runtime';

/** Interface for the CircleLoadingAnimation component props */
export declare interface CircleLoadingAnimationProps {
    /** Additional CSS classes */
    className?: string;
}

export declare const ContactCard: default_2.FC<{
    item: ContactItem;
    isLast?: boolean;
}>;

export declare interface ContactItem {
    name: string;
    address: string;
    phone: string;
    contact: string;
    email?: string;
    twitter?: string;
    facebook?: string;
}

export declare interface ContactTab {
    id: string;
    label: string;
    items: ContactItem[];
}

export declare const ContactTabs: default_2.FC<ContactTabsProps>;

declare interface ContactTabsProps {
    tabs: ContactTab[];
    defaultTab?: string;
    className?: string;
    onTabChange?: (tabId: string) => void;
}

export declare const CreateSummary: React.FC<CreateSummaryProps>;

declare interface CreateSummaryProps {
    promptSuggestions?: string[];
    prompt?: string;
    summary?: string | null;
    sources?: Source[];
    onSubmitPrompt?: (prompt: string, formatPrompt?: string) => void;
    sourcesLayout?: 'default' | 'masonry' | 'compact';
    accentColor?: string;
    layout?: 'quoted' | 'clean';
    placeholderText?: string;
    isLoading?: boolean;
    format?: string;
    output?: any;
    useMarkdown?: boolean;
    enableFormatPrompt?: boolean;
    defaultFormatPrompt?: string;
    minHeight?: number;
    itemsPerPage?: number;
}

export declare const darkTheme: Theme;

declare interface ExtendedPaginationConfig extends Partial<PaginationProps> {
    /**
     * Whether to use Pagination v2 component instead of v1 (default: false)
     */
    useV2?: boolean;
}

/**
 * GenerationLog component displays a list of generation steps with loading animations
 */
export declare const GenerationLog: default_2.FC<GenerationLogProps>;

/**
 * Types and interfaces for the GenerationLog component
 */
/** Interface for the GenerationLog component props */
export declare interface GenerationLogProps {
    /** Title of the generation log */
    title?: string;
    /** Array of log messages to display */
    logs?: string[];
    /** Additional CSS classes */
    className?: string;
}

export declare const lightTheme: Theme;

/** Interface for individual log step */
export declare interface LogStep {
    /** The message content for this step */
    message: string;
    /** Whether this step is completed */
    completed?: boolean;
    /** Unique identifier for the step */
    id?: string;
}

export declare const Metric: default_2.FC<MetricProps>;

export declare const MetricGrid: default_2.FC<MetricGridProps>;

export declare interface MetricGridProps {
    data: Array<Array<Record<string, string>>>;
    className?: string;
    style?: default_2.CSSProperties;
    containerStyle?: default_2.CSSProperties;
    containerClassName?: string;
    borderRadius?: string;
    background?: string;
    boxShadow?: string;
    valueColor?: string;
    labelColor?: string;
    outerBorderColor?: string;
    outerBorderWidth?: number;
    padding?: string;
}

export declare interface MetricProps {
    value: string;
    description: string;
    secondaryDescription?: string;
    className?: string;
    style?: default_2.CSSProperties;
    containerStyle?: default_2.CSSProperties;
    containerClassName?: string;
    valueStyle?: default_2.CSSProperties;
    valueClassName?: string;
    descriptionStyle?: default_2.CSSProperties;
    descriptionClassName?: string;
    secondaryDescriptionStyle?: default_2.CSSProperties;
    secondaryDescriptionClassName?: string;
    borderRadius?: string;
    background?: string;
    boxShadow?: string;
    valueColor?: string;
    descriptionColor?: string;
    secondaryDescriptionColor?: string;
    outerBorderColor?: string;
    outerBorderWidth?: number;
    padding?: string;
}

/**
 * Navigation component displays a list of navigation items
 * @param {Object} props - Component props
 * @param {string} [props.title="Navigation"] - Title of the navigation section
 * @param {Object[]} [props.navList=[]] - Array of navigation items
 * @param {string} [props.activeItem=""] - Currently active navigation item
 * @param {string} [props.maxHeight] - Maximum height for the navigation section
 * @param {function} [props.onItemClick] - Callback function when a navigation item is clicked
 */
export declare const Navigation: default_2.FC<NavigationProps>;

declare interface NavigationProps {
    title?: string;
    navList?: NavItem[];
    activeItem?: string;
    maxHeight?: string;
    onItemClick?: (ref: string) => void;
}

declare interface NavItem {
    ref: string;
    name: string;
}

/**
 * Pagination component for navigating through pages
 * @param {Object} props - Component props
 * @param {number} props.currentPage - Current page number
 * @param {number} props.totalPages - Total number of pages
 * @param {Function} props.onPageChange - Callback when page changes
 * @param {number} [props.maxVisiblePages=5] - Maximum number of visible page buttons
 * @param {string} [props.selectedPageColor='bg-blue-500'] - Color of the selected page button
 * @param {string} [props.hoverPageColor='bg-gray-100'] - Color of the hover page button
 * @param {boolean} [props.useArrows=false] - Use arrow icons for prev/next buttons
 * @param {string} [props.rounded=''] - Rounded shape of the page buttons (full, half, quarter)
 */
export declare const Pagination: default_2.FC<PaginationProps>;

declare interface PaginationProps {
    currentPage: number;
    totalPages: number;
    onPageChange: (page: number) => void;
    maxVisiblePages?: number;
    selectedPageColor?: string;
    hoverPageColor?: string;
    /**
     * Use arrow icons for prev/next buttons (default: false)
     */
    useArrows?: boolean;
    rounded?: 'full' | 'half' | 'quarter';
}

declare interface PaginationProps_2 {
    currentPage: number;
    totalPages: number;
    onPageChange: (page: number) => void;
    maxVisiblePages?: number;
    /**
     * Use arrow icons for prev/next buttons (default: false)
     */
    useArrows?: boolean;
    rounded?: 'full' | 'half' | 'quarter';
    selectedPageColor?: string;
    hoverPageColor?: string;
    buttonBackground?: string;
    buttonTextColor?: string;
    disabledButtonColor?: string;
    disabledTextColor?: string;
    borderRadius?: string;
    boxShadow?: string;
    className?: string;
    style?: default_2.CSSProperties;
}

/**
 * Pagination component for navigating through pages
 * @param {Object} props - Component props
 * @param {number} props.currentPage - Current page number
 * @param {number} props.totalPages - Total number of pages
 * @param {Function} props.onPageChange - Callback when page changes
 * @param {number} [props.maxVisiblePages=5] - Maximum number of visible page buttons
 * @param {boolean} [props.useArrows=false] - Use arrow icons for prev/next buttons
 * @param {string} [props.rounded] - Rounded shape of the page buttons (full, half, quarter)
 * @param {string} [props.selectedPageColor] - Color of the selected page button (overrides theme)
 * @param {string} [props.hoverPageColor] - Color of the hover page button (overrides theme)
 * @param {string} [props.buttonBackground] - Background color for buttons (overrides theme)
 * @param {string} [props.buttonTextColor] - Text color for buttons (overrides theme)
 * @param {string} [props.disabledButtonColor] - Background color for disabled buttons (overrides theme)
 * @param {string} [props.disabledTextColor] - Text color for disabled buttons (overrides theme)
 * @param {string} [props.borderRadius] - Border radius (overrides theme)
 * @param {string} [props.boxShadow] - Box shadow (defaults to none, can be customized)
 * @param {string} [props.className] - Additional CSS classes
 * @param {React.CSSProperties} [props.style] - Additional inline styles
 */
export declare const PaginationV2: default_2.FC<PaginationProps_2>;

/**
 * Prompt component for user input
 * @param {Object} props - Component props
 * @param {string} [props.placeholderText='Enter prompt'] - Placeholder text for the input
 * @param {number} [props.minHeight] - Minimum height of the input area
 * @param {string} [props.accentColor] - Accent color for the submit button
 * @param {Function} [props.onSubmit=() => {}] - Callback when prompt is submitted
 * @param {Function} [props.onChange=() => {}] - Callback when prompt text changes
 * @param {boolean} [props.disabled=false] - Whether the input is disabled
 */
export declare const Prompt: default_2.FC<PromptProps>;

export declare const PromptInput: default_2.FC<PromptInputProps>;

declare interface PromptInputProps {
    label?: string;
    placeholder?: string;
    placeholderColor?: string;
    className?: string;
    style?: default_2.CSSProperties;
    containerStyle?: default_2.CSSProperties;
    containerClassName?: string;
    inputStyle?: default_2.CSSProperties;
    inputClassName?: string;
    buttonStyle?: default_2.CSSProperties;
    buttonClassName?: string;
    onSubmit?: (value: string) => void;
    onChange?: (value: string) => void;
    disabled?: boolean;
    borderRadius?: string;
    inputInnerBorderRadius?: string;
    background?: string;
    boxShadow?: string;
    inputBackground?: string;
    inputTextColor?: string;
    buttonColor?: string;
    buttonBorderColor?: string;
    buttonBorderWidth?: number;
    arrowColor?: string;
    borderThickness?: number;
    rowBackground?: string;
    backdropFilter?: string;
    buttonShape?: 'circle' | 'square' | 'rounded';
    buttonHeight?: number;
    outerBorderColor?: string;
    outerBorderWidth?: number;
    innerBorder?: string;
}

declare interface PromptProps {
    placeholderText?: string;
    minHeight?: number;
    accentColor?: string;
    arrowColor?: string;
    onSubmit?: (prompt: string, formatPrompt?: string) => void;
    onChange?: (text: string) => void;
    disabled?: boolean;
    enableFormatPrompt?: boolean;
    defaultFormatPrompt?: string;
}

/**
 * PromptSuggestions component displays a list of prompt suggestions
 * @param {Object} props - Component props
 * @param {string[]} [props.prompts=[]] - Array of prompt suggestions
 * @param {Function} [props.onClickHandler=() => {}] - Callback when a suggestion is clicked
 * @param {string} [props.title="Suggestions"] - Title of the suggestions section
 */
export declare const PromptSuggestions: default_2.FC<PromptSuggestionsProps>;

declare interface PromptSuggestionsProps {
    prompts?: string[];
    onClickHandler?: (prompt: string) => void;
    title?: string;
    arrowColor?: string;
    arrowComp?: default_2.ReactNode;
}

/**
 * PromptWithOptions component that extends the basic Prompt with additional features
 * @param {Object} props - Component props
 * @param {Function} props.onSubmit - Callback when prompt is submitted
 */
export declare const PromptWithOptions: default_2.FC<PromptWithOptionsProps>;

declare interface PromptWithOptionsProps {
    onSubmit: (prompt: string, formatPrompt?: string) => void;
}

export declare const SearchBar: default_2.FC<SearchBarProps>;

export declare interface SearchBarProps {
    searchPlaceholder?: string;
    locationPlaceholder?: string;
    className?: string;
    style?: default_2.CSSProperties;
    onSearchChange?: (value: string) => void;
    onLocationChange?: (value: string) => void;
    onResultSelect?: (result: SearchResult) => void;
    searchResults?: SearchResult[];
    showResults?: boolean;
    disabled?: boolean;
    borderRadius?: string;
    background?: string;
    boxShadow?: string;
    maxHeight?: string;
    emptyStateMessage?: string;
    iconPosition?: 'left' | 'right';
    showLocationInput?: boolean;
}

export declare interface SearchResult {
    id: string;
    title: string;
    subtitle: string;
    type?: string;
}

declare interface Source {
    url: string;
    title?: string;
    description?: string;
    image?: string;
}

/**
 * Sources component displays a list of sources
 * @param {Object} props - Component props
 * @param {Object[]} [props.sources=[]] - Array of source objects
 * @param {string} [props.layout="default"] - Layout is either "default", "masonry", "compact", or "ai-summary" (uses SummarySources component)
 * @param {number} [props.itemsPerPage=4] - Number of items to display per page
 * @param {Object} [props.paginationConfig] - Pagination configuration (partial PaginationProps)
 */
export declare const Sources: default_2.FC<SourcesProps>;

declare interface SourcesProps {
    sources?: Source[];
    /**
     * Number of items to display per page (default: 4)
     */
    itemsPerPage?: number;
    /**
     * Layout style for sources: 'default', 'masonry', 'compact', or 'ai-summary' (uses SummarySources component)
     */
    layout?: 'default' | 'masonry' | 'compact' | 'ai-summary';
    /**
     * Pagination configuration (all PaginationProps are supported, partial)
     */
    paginationConfig?: ExtendedPaginationConfig;
    /**
     * Whether to show the title section (default: true)
     */
    showTitle?: boolean;
}

/**
 * Summary component that renders different layouts based on the layout prop
 * @param {Object} props - Component props
 * @param {string} [props.summaryId=""] - Unique identifier for the summary
 * @param {string} [props.prompt="prompt"] - The prompt text that generated the summary
 * @param {string} [props.title="AI summary"] - Title of the summary
 * @param {string} [props.className=""] - Additional CSS classes
 * @param {string} [props.summary=""] - The summary content
 * @param {string} [props.layout="quoted"] - Layout type: 'quoted' or 'clean'
 * @param {string} [props.format="basic"] - Format type: 'basic' or 'advanced'
 * @param {Object} [props.output] - Additional output data for advanced format
 * @param {boolean} [props.useMarkdown=false] - Whether to render the summary content as markdown
 * @param {boolean} [props.showImage=true] - Whether to show the output.image
 */
export declare const Summary: default_2.FC<SummaryProps>;

declare interface SummaryOutput {
    header?: string;
    body?: string;
    image?: string;
}

declare interface SummaryProps {
    summaryId?: string;
    prompt?: string;
    title?: string;
    className?: string;
    summary?: string;
    layout?: 'quoted' | 'clean' | 'markdown-only';
    format?: string;
    output?: SummaryOutput;
    useMarkdown?: boolean;
    showImage?: boolean;
}

export declare const SummarySources: default_2.FC<SummarySourcesProps>;

declare interface SummarySourcesProps {
    sources?: Source[];
    /**
     * Number of items to display initially (default: 3)
     */
    initialItemsCount?: number;
    /**
     * Text for the expand button (default: "Show all Sources")
     */
    expandButtonText?: string;
    /**
     * Text for the expanded header (default: "Viewing all sources")
     */
    expandedHeaderText?: string;
    /**
     * Viewport width in pixels to switch to horizontal layout (default: 768)
     */
    horizontalBreakpoint?: number;
    /**
     * Custom CSS class name
     */
    className?: string;
    /**
     * Custom CSS styles
     */
    style?: default_2.CSSProperties;
}

declare interface TabItem {
    id: string;
    label: string;
    content: default_2.ReactNode;
}

/**
 * Tabs component displays a horizontal tab navigation with switchable content
 * @param {Object} props - Component props
 * @param {TabItem[]} props.tabs - Array of tab items with id, label, and content
 * @param {string} [props.defaultTab] - Initially active tab ID
 * @param {function} [props.onTabChange] - Callback function when tab changes
 * @param {string} [props.className] - Additional CSS classes
 */
export declare const Tabs: default_2.FC<TabsProps>;

declare interface TabsProps {
    tabs: TabItem[];
    defaultTab?: string;
    onTabChange?: (tabId: string) => void;
    className?: string;
}

declare type Theme = {
    primaryColor: string;
    background: string;
    textColor: string;
    borderRadius: string;
    inputInnerBorderRadius: string;
    inputBackground: string;
    inputTextColor: string;
    inputBorderColor: string;
    rowBackground?: string;
    placeholderColor?: string;
    boxShadow?: string;
    outerBorderColor?: string;
    innerBorder?: string;
    isDarkMode: boolean;
    isLightMode: boolean;
    cardBackground?: string;
    cardHoverBackground?: string;
    secondaryTextColor?: string;
    badgeBackground?: string;
    badgeTextColor?: string;
};

export declare const ThemeProvider: ({ theme, children, }: {
    theme?: Theme;
    children: default_2.ReactNode;
}) => JSX.Element;

export declare const useTheme: () => Theme;

export { }