@vocdoni/chakra-components/dist/index.d.ts

Vocdoni's Chakra UI Components

import * as react_jsx_runtime from 'react/jsx-runtime';
import { ClientProviderComponentProps, ElectionProviderComponentProps } from '@vocdoni/react-providers';
import * as _chakra_ui_react from '@chakra-ui/react';
import { TagProps, ChakraProps, IconButtonProps, ImageProps, AvatarProps, StackProps, HeadingProps, ButtonProps, InputProps, ButtonGroupProps, ComponentSingleStyleConfig, SystemStyleObject } from '@chakra-ui/react';
import React, { PropsWithChildren, ReactNode, HTMLAttributes } from 'react';
import { ReactMarkdownProps } from 'react-markdown/lib/complex-types';
import { IVotePackage, IVoteEncryptedPackage, IChoice, PublishedElection, IQuestion, PaginationResponse } from '@vocdoni/sdk';
import { FieldValues, UseFormReturn, SubmitErrorHandler } from 'react-hook-form';
import { Options } from 'react-markdown';
import * as _chakra_ui_styled_system from '@chakra-ui/styled-system';

declare const ClientProvider: ({ children, ...props }: ClientProviderComponentProps) => react_jsx_runtime.JSX.Element;

declare const Balance: (props: TagProps) => react_jsx_runtime.JSX.Element;

declare const ElectionActions: (props: ChakraProps) => react_jsx_runtime.JSX.Element;

declare const ActionsProvider: (props: PropsWithChildren) => react_jsx_runtime.JSX.Element;

declare const ActionCancel: _chakra_ui_react.ComponentWithAs<"button", IconButtonProps>;

declare const ActionContinue: _chakra_ui_react.ComponentWithAs<"button", IconButtonProps>;

declare const ActionEnd: _chakra_ui_react.ComponentWithAs<"button", IconButtonProps>;

declare const ActionPause: _chakra_ui_react.ComponentWithAs<"button", IconButtonProps>;

declare const ElectionDescription: {
    (props: Omit<ReactMarkdownProps, "children" | "node"> & ChakraProps): react_jsx_runtime.JSX.Element;
    displayName: string;
};

declare const Election: {
    (props: ElectionProviderComponentProps): react_jsx_runtime.JSX.Element;
    displayName: string;
};

type VotePackageType = IVotePackage | IVoteEncryptedPackage;
declare const Envelope: ({ votePackage, ...props }: {
    votePackage: VotePackageType;
} & ChakraProps) => react_jsx_runtime.JSX.Element;

declare const ConfirmModal: () => react_jsx_runtime.JSX.Element;

declare const useConfirm: () => {
    confirm: (prompt: ReactNode) => Promise<boolean>;
    prompt: null | ReactNode;
    isOpen: boolean;
    proceed: null | ((value: unknown) => void);
    cancel: null | VoidFunction;
};
declare const ConfirmProvider: ({ children }: PropsWithChildren<any>) => react_jsx_runtime.JSX.Element;

type HRProps = ChakraProps & {
    variant?: string;
};
declare const HR: {
    (props: HRProps): react_jsx_runtime.JSX.Element;
    displayName: string;
};

type IPFSImageProps = ImageProps & {
    gateway?: string;
};
type IPFSAvatarProps = AvatarProps & {
    gateway?: string;
};
declare const linkify: (link: string | undefined, gateway: string) => string;
declare const Image: ({ src, ...props }: IPFSImageProps) => react_jsx_runtime.JSX.Element;
declare const Avatar: ({ src, ...props }: IPFSAvatarProps) => react_jsx_runtime.JSX.Element;

type MarkdownProps = Options & {
    children?: string;
};
declare const Markdown: _chakra_ui_react.ChakraComponent<({ children, ...rest }: MarkdownProps) => react_jsx_runtime.JSX.Element, {}>;

declare const ElectionHeader: (props: IPFSImageProps) => react_jsx_runtime.JSX.Element;

type QuestionChoiceMeta = {
    image: {
        default: string;
        thumbnail?: string;
    };
    description?: string;
};
declare const QuestionChoice: ({ choice, ...rest }: {
    choice: IChoice;
} & StackProps) => react_jsx_runtime.JSX.Element;

type QuestionsConfirmationProps = {
    answers: FieldValues;
    election: PublishedElection;
};
declare const QuestionsConfirmation: ({ answers, election, ...rest }: QuestionsConfirmationProps) => react_jsx_runtime.JSX.Element;

type QuestionProps = {
    index: string;
    question: IQuestion;
};
type QuestionFieldProps = ChakraProps & QuestionProps;
declare const ElectionQuestion: ({ question, index }: QuestionFieldProps) => react_jsx_runtime.JSX.Element;
declare const FieldSwitcher: (props: QuestionProps) => react_jsx_runtime.JSX.Element;
declare const MultiChoice: ({ index, question }: QuestionProps) => react_jsx_runtime.JSX.Element;
declare const ApprovalChoice: ({ index, question }: QuestionProps) => react_jsx_runtime.JSX.Element;
declare const SingleChoice: ({ index, question }: QuestionProps) => react_jsx_runtime.JSX.Element;

type QuestionsFormContextState = {
    fmethods: UseFormReturn<any>;
    vote: (values: FieldValues) => Promise<false | void>;
};
declare const useQuestionsForm: () => QuestionsFormContextState;
type QuestionsFormProviderProps = {
    confirmContents?: (election: PublishedElection, answers: FieldValues) => ReactNode;
};
declare const QuestionsFormProvider: React.FC<PropsWithChildren<QuestionsFormProviderProps>>;

type ElectionQuestionsFormProps = ChakraProps & {
    onInvalid?: SubmitErrorHandler<FieldValues>;
};
type ElectionQuestionsProps = ElectionQuestionsFormProps & QuestionsFormProviderProps;
declare const ElectionQuestions: ({ confirmContents, ...props }: ElectionQuestionsProps) => react_jsx_runtime.JSX.Element;
declare const ElectionQuestionsForm: (props: ElectionQuestionsFormProps) => react_jsx_runtime.JSX.Element;

declare const QuestionTip: () => react_jsx_runtime.JSX.Element;

type QuestionsTypeBadgeProps = ChakraProps & HTMLAttributes<HTMLDivElement>;
declare const QuestionsTypeBadge: (props: QuestionsTypeBadgeProps) => react_jsx_runtime.JSX.Element;

declare const Voted: () => react_jsx_runtime.JSX.Element;

declare const results: (result: number, decimals?: number) => number;
type ElectionResultsProps = ChakraProps & {
    forceRender?: boolean;
};
declare const ElectionResults: (props: ElectionResultsProps) => react_jsx_runtime.JSX.Element;

type ElectionScheduleProps = HeadingProps & {
    format?: string;
    showRemaining?: boolean;
    showCreatedAt?: boolean;
};
declare const ElectionSchedule: _chakra_ui_react.ComponentWithAs<"h2", ElectionScheduleProps>;

type SpreadsheetAccessProps = ChakraProps & {
    hashPrivateKey?: boolean;
};
declare const SpreadsheetAccess: ({ hashPrivateKey, ...rest }: SpreadsheetAccessProps) => react_jsx_runtime.JSX.Element;

declare const ElectionStatusBadge: (props: TagProps) => react_jsx_runtime.JSX.Element;

declare const ElectionTitle: _chakra_ui_react.ComponentWithAs<"h1", HeadingProps>;

declare const VoteButton: (props: ButtonProps) => react_jsx_runtime.JSX.Element;

declare const VoteWeight: () => react_jsx_runtime.JSX.Element;

declare const OrganizationAvatar: {
    (props: IPFSAvatarProps): react_jsx_runtime.JSX.Element;
    displayName: string;
};
declare const OrganizationImage: {
    (props: IPFSImageProps): react_jsx_runtime.JSX.Element;
    displayName: string;
};

declare const OrganizationDescription: {
    (props: Omit<ReactMarkdownProps, "children" | "node"> & ChakraProps): react_jsx_runtime.JSX.Element;
    displayName: string;
};

declare const OrganizationHeader: {
    (props: IPFSImageProps): react_jsx_runtime.JSX.Element;
    displayName: string;
};

declare const OrganizationName: _chakra_ui_react.ComponentWithAs<"h1", HeadingProps>;

declare const PaginationButton: _chakra_ui_react.ComponentWithAs<"div", ButtonProps>;

type EllipsisButtonProps = ButtonProps & {
    gotoPage: (page: number) => void;
    inputProps?: InputProps;
};
declare const EllipsisButton: {
    ({ gotoPage, inputProps, ...rest }: EllipsisButtonProps): react_jsx_runtime.JSX.Element;
    displayName: string;
};

type PaginationProps = ButtonGroupProps & {
    maxButtons?: number | false;
    buttonProps?: ButtonProps;
    inputProps?: InputProps;
} & PaginationResponse;
declare const Pagination: {
    ({ maxButtons, buttonProps, inputProps, pagination, ...rest }: PaginationProps): react_jsx_runtime.JSX.Element;
    displayName: string;
};
declare const RoutedPagination: {
    ({ maxButtons, buttonProps, pagination, ...rest }: PaginationProps): react_jsx_runtime.JSX.Element;
    displayName: string;
};

declare const environment: {
    explorer: (env: string) => string;
    verifyVote: (env: string, proof: string) => string;
};

declare const actionsAnatomy: readonly ["group", "buttons", "icons"];

declare const emptyQuestionsAnatomy: readonly ["container", "icon", "description"];
declare const votedAnatomy: readonly ["container", "icon", "title", "description", "link"];

declare const confirmAnatomy: readonly ["overlay", "content", "header", "body", "footer", "confirm", "cancel", "close"];
declare const signModalAnatomy: string[];
declare const ConfirmModalTheme: {
    baseStyle?: {
        footer: {
            gap: number;
        };
    };
    sizes?: {
        [key: string]: _chakra_ui_styled_system.PartsStyleInterpolation<{
            keys: ("cancel" | "body" | "close" | "header" | "footer" | "content" | "overlay" | "confirm")[];
        }>;
    };
    variants?: {
        [key: string]: _chakra_ui_styled_system.PartsStyleInterpolation<{
            keys: ("cancel" | "body" | "close" | "header" | "footer" | "content" | "overlay" | "confirm")[];
        }>;
    };
    defaultProps?: {
        size?: string | number;
        variant?: string | number;
        colorScheme?: string | undefined;
    };
    parts: ("cancel" | "body" | "close" | "header" | "footer" | "content" | "overlay" | "confirm")[];
};

declare const ElectionTitleTheme: ComponentSingleStyleConfig;
declare const ElectionScheduleTheme: ComponentSingleStyleConfig;

declare const envelopeAnatomy: readonly ["wrapper", "question", "title", "choiceWrapper", "choiceTitle", "secret", "error"];
declare const EnvelopeTheme: {
    baseStyle?: {
        wrapper: {
            flexDirection: string;
            gap: number;
        };
        title: {
            pb: number;
            fontWeight: string;
        };
        secret: {
            color: string;
            textAlign: string;
            fontWeight: string;
        };
    };
    sizes?: {
        [key: string]: _chakra_ui_styled_system.PartsStyleInterpolation<{
            keys: ("error" | "title" | "question" | "secret" | "wrapper" | "choiceWrapper" | "choiceTitle")[];
        }>;
    };
    variants?: {
        [key: string]: _chakra_ui_styled_system.PartsStyleInterpolation<{
            keys: ("error" | "title" | "question" | "secret" | "wrapper" | "choiceWrapper" | "choiceTitle")[];
        }>;
    };
    defaultProps?: {
        size?: string | number;
        variant?: string | number;
        colorScheme?: string | undefined;
    };
    parts: ("error" | "title" | "question" | "secret" | "wrapper" | "choiceWrapper" | "choiceTitle")[];
};

declare const HorizontalRulerTheme: {
    baseStyle?: {
        width: string;
        height: string;
        backgroundColor: string;
        marginTop: string;
        marginBottom: string;
    };
    sizes?: {
        [key: string]: _chakra_ui_styled_system.SystemStyleInterpolation;
    };
    variants?: {
        [key: string]: _chakra_ui_styled_system.SystemStyleInterpolation;
    };
    defaultProps?: {
        size?: string | number;
        variant?: string | number;
        colorScheme?: string | undefined;
    };
};

declare const paginationAnatomy: readonly ["wrapper", "buttonGroup", "totalResults"];
declare const ellipsisButtonAnatomy: readonly ["input", "button"];
declare const PaginationTheme: {
    baseStyle?: {
        wrapper: {};
        buttonGroup: {
            flexWrap: string;
            rowGap: string;
        };
        totalResults: {};
    };
    sizes?: {
        [key: string]: _chakra_ui_styled_system.PartsStyleInterpolation<{
            keys: ("wrapper" | "buttonGroup" | "totalResults")[];
        }>;
    };
    variants?: {
        [key: string]: _chakra_ui_styled_system.PartsStyleInterpolation<{
            keys: ("wrapper" | "buttonGroup" | "totalResults")[];
        }>;
    };
    defaultProps?: {
        size?: string | number;
        variant?: string | number;
        colorScheme?: string | undefined;
    };
    parts: ("wrapper" | "buttonGroup" | "totalResults")[];
};

declare const questionAnatomy: readonly ["container", "header", "body", "title", "description"];
declare const QuestionTheme: {
    baseStyle?: {
        container: {
            marginBottom: number;
            display: string;
            flexDirection: string;
        };
        title: {
            fontWeight: string;
            fontSize: string;
            marginBottom: number;
        };
        description: {
            marginBottom: number;
        };
    };
    sizes?: {
        [key: string]: _chakra_ui_styled_system.PartsStyleInterpolation<{
            keys: ("description" | "title" | "body" | "header" | "container")[];
        }>;
    };
    variants?: {
        [key: string]: _chakra_ui_styled_system.PartsStyleInterpolation<{
            keys: ("description" | "title" | "body" | "header" | "container")[];
        }>;
    };
    defaultProps?: {
        size?: string | number;
        variant?: string | number;
        colorScheme?: string | undefined;
    };
    parts: ("description" | "title" | "body" | "header" | "container")[];
};

declare const questionChoiceAnatomy: readonly ["label", "description", "image", "wrapper", "skeleton", "skeletonModal", "modalBody", "modalContent", "modalClose", "modalDescription", "modalImage", "modalLabel", "modalOverlay"];
type QuestionChoiceAnatomyRecord = Record<(typeof questionChoiceAnatomy)[number], SystemStyleObject>;
declare const QuestionChoiceTheme: {
    baseStyle?: {
        choiceWrapper: {
            flexDirection: string;
            alignItems: string;
        };
        modalBody: {
            p: number;
            display: string;
            flexDirection: string;
            alignItems: string;
            justifyContent: string;
        };
        skeleton: {
            boxSize: string;
        };
        skeletonModal: {
            boxSize: string;
        };
    };
    sizes?: {
        [key: string]: _chakra_ui_styled_system.PartsStyleInterpolation<{
            keys: ("description" | "label" | "image" | "wrapper" | "skeleton" | "modalOverlay" | "modalContent" | "modalClose" | "modalBody" | "skeletonModal" | "modalLabel" | "modalDescription" | "modalImage")[];
        }>;
    };
    variants?: {
        [key: string]: _chakra_ui_styled_system.PartsStyleInterpolation<{
            keys: ("description" | "label" | "image" | "wrapper" | "skeleton" | "modalOverlay" | "modalContent" | "modalClose" | "modalBody" | "skeletonModal" | "modalLabel" | "modalDescription" | "modalImage")[];
        }>;
    };
    defaultProps?: {
        size?: string | number;
        variant?: string | number;
        colorScheme?: string | undefined;
    };
    parts: ("description" | "label" | "image" | "wrapper" | "skeleton" | "modalOverlay" | "modalContent" | "modalClose" | "modalBody" | "skeletonModal" | "modalLabel" | "modalDescription" | "modalImage")[];
};

declare const questionsAnatomy: readonly ["container", "form", "radioGroup", "stack", "radio", "checkbox", "error"];
declare const questionsEmptyAnatomy: readonly ["container", "icon", "description"];
declare const questionsErrorAnatomy: readonly ["container", "icon", "description"];
declare const questionsConfirmationAnatomy: readonly ["box", "description", "question", "title", "answer"];
declare const QuestionsTheme: {
    baseStyle?: {};
    sizes?: {
        [key: string]: _chakra_ui_styled_system.PartsStyleInterpolation<{
            keys: ("error" | "form" | "radioGroup" | "container" | "checkbox" | "radio" | "stack")[];
        }>;
    };
    variants?: {
        [key: string]: _chakra_ui_styled_system.PartsStyleInterpolation<{
            keys: ("error" | "form" | "radioGroup" | "container" | "checkbox" | "radio" | "stack")[];
        }>;
    };
    defaultProps?: {
        size?: string | number;
        variant?: string | number;
        colorScheme?: string | undefined;
    };
    parts: ("error" | "form" | "radioGroup" | "container" | "checkbox" | "radio" | "stack")[];
};
declare const QuestionsConfirmationTheme: {
    baseStyle?: {
        question: {
            '& + &': {
                marginTop: number;
            };
        };
        description: {
            marginBottom: number;
        };
        title: {
            fontWeight: string;
        };
    };
    sizes?: {
        [key: string]: _chakra_ui_styled_system.PartsStyleInterpolation<{
            keys: ("description" | "title" | "question" | "box" | "answer")[];
        }>;
    };
    variants?: {
        [key: string]: _chakra_ui_styled_system.PartsStyleInterpolation<{
            keys: ("description" | "title" | "question" | "box" | "answer")[];
        }>;
    };
    defaultProps?: {
        size?: string | number;
        variant?: string | number;
        colorScheme?: string | undefined;
    };
    parts: ("description" | "title" | "question" | "box" | "answer")[];
};
declare const questionTypeBadgeAnatomy: readonly ["box", "title", "tooltip"];
declare const QuestionsTypeBadgeTheme: {
    baseStyle?: {
        wrapper: {
            flexDirection: string;
            gap: number;
        };
        title: {
            fontWeight: string;
        };
    };
    sizes?: {
        [key: string]: _chakra_ui_styled_system.PartsStyleInterpolation<{
            keys: ("title" | "tooltip" | "box")[];
        }>;
    };
    variants?: {
        [key: string]: _chakra_ui_styled_system.PartsStyleInterpolation<{
            keys: ("title" | "tooltip" | "box")[];
        }>;
    };
    defaultProps?: {
        size?: string | number;
        variant?: string | number;
        colorScheme?: string | undefined;
    };
    parts: ("title" | "tooltip" | "box")[];
};
declare const questionTipAnatomy: readonly ["wrapper", "text"];
declare const QuestionsTipTheme: {
    baseStyle?: {
        wrapper: {
            mt: number;
            w: string;
            display: string;
            justifyContent: string;
            alignItems: string;
        };
        text: {
            fontSize: string;
            lineHeight: number;
        };
    };
    sizes?: {
        [key: string]: _chakra_ui_styled_system.PartsStyleInterpolation<{
            keys: ("text" | "wrapper")[];
        }>;
    };
    variants?: {
        [key: string]: _chakra_ui_styled_system.PartsStyleInterpolation<{
            keys: ("text" | "wrapper")[];
        }>;
    };
    defaultProps?: {
        size?: string | number;
        variant?: string | number;
        colorScheme?: string | undefined;
    };
    parts: ("text" | "wrapper")[];
};

declare const resultsAnatomy: readonly ["wrapper", "question", "header", "title", "body", "progress", "secret", "choiceTitle", "choiceVotes"];
declare const ResultsTheme: {
    baseStyle?: {
        wrapper: {
            flexDirection: string;
            gap: number;
        };
        header: {
            pb: number;
        };
        title: {
            fontWeight: string;
        };
        secret: {
            color: string;
            textAlign: string;
            fontWeight: string;
        };
    };
    sizes?: {
        [key: string]: _chakra_ui_styled_system.PartsStyleInterpolation<{
            keys: ("title" | "body" | "progress" | "header" | "question" | "secret" | "wrapper" | "choiceTitle" | "choiceVotes")[];
        }>;
    };
    variants?: {
        [key: string]: _chakra_ui_styled_system.PartsStyleInterpolation<{
            keys: ("title" | "body" | "progress" | "header" | "question" | "secret" | "wrapper" | "choiceTitle" | "choiceVotes")[];
        }>;
    };
    defaultProps?: {
        size?: string | number;
        variant?: string | number;
        colorScheme?: string | undefined;
    };
    parts: ("title" | "body" | "progress" | "header" | "question" | "secret" | "wrapper" | "choiceTitle" | "choiceVotes")[];
};

declare const spreadsheetAccessAnatomy: readonly ["button", "disconnect", "overlay", "content", "header", "body", "footer", "top_close", "close", "control", "label", "input", "error", "submit", "helper", "sik_control"];

declare const voteWeightAnatomy: readonly ["wrapper", "weight"];
declare const VoteWeightTheme: {
    baseStyle?: {
        wrapper: {
            display: string;
            gap: number;
        };
        weight: {
            fontWeight: string;
        };
    };
    sizes?: {
        [key: string]: _chakra_ui_styled_system.PartsStyleInterpolation<{
            keys: ("wrapper" | "weight")[];
        }>;
    };
    variants?: {
        [key: string]: _chakra_ui_styled_system.PartsStyleInterpolation<{
            keys: ("wrapper" | "weight")[];
        }>;
    };
    defaultProps?: {
        size?: string | number;
        variant?: string | number;
        colorScheme?: string | undefined;
    };
    parts: ("wrapper" | "weight")[];
};

declare const theme: {
    components: any;
};

export { ActionCancel, ActionContinue, ActionEnd, ActionPause, ActionsProvider, ApprovalChoice, Avatar, Balance, ClientProvider, ConfirmModal, ConfirmModalTheme, ConfirmProvider, Election, ElectionActions, ElectionDescription, ElectionHeader, ElectionQuestion, ElectionQuestions, ElectionQuestionsForm, type ElectionQuestionsFormProps, type ElectionQuestionsProps, ElectionResults, type ElectionResultsProps, ElectionSchedule, type ElectionScheduleProps, ElectionScheduleTheme, ElectionStatusBadge, ElectionTitle, ElectionTitleTheme, EllipsisButton, Envelope, EnvelopeTheme, FieldSwitcher, HR, HorizontalRulerTheme, type IPFSAvatarProps, type IPFSImageProps, Image, Markdown, MultiChoice, OrganizationAvatar, OrganizationDescription, OrganizationHeader, OrganizationImage, OrganizationName, Pagination, PaginationButton, type PaginationProps, PaginationTheme, QuestionChoice, type QuestionChoiceAnatomyRecord, type QuestionChoiceMeta, QuestionChoiceTheme, type QuestionFieldProps, type QuestionProps, QuestionTheme, QuestionTip, QuestionsConfirmation, type QuestionsConfirmationProps, QuestionsConfirmationTheme, type QuestionsFormContextState, QuestionsFormProvider, type QuestionsFormProviderProps, QuestionsTheme, QuestionsTipTheme, QuestionsTypeBadge, QuestionsTypeBadgeTheme, ResultsTheme, RoutedPagination, SingleChoice, SpreadsheetAccess, type SpreadsheetAccessProps, VoteButton, type VotePackageType, VoteWeight, VoteWeightTheme, Voted, actionsAnatomy, confirmAnatomy, ellipsisButtonAnatomy, emptyQuestionsAnatomy, envelopeAnatomy, environment, linkify, paginationAnatomy, questionAnatomy, questionChoiceAnatomy, questionTipAnatomy, questionTypeBadgeAnatomy, questionsAnatomy, questionsConfirmationAnatomy, questionsEmptyAnatomy, questionsErrorAnatomy, results, resultsAnatomy, signModalAnatomy, spreadsheetAccessAnatomy, theme, useConfirm, useQuestionsForm, voteWeightAnatomy, votedAnatomy };