@memoraiz/ui/dist/index.d.ts

A modern React component library built with Radix UI, Tailwind CSS, and Storybook.

import * as AvatarPrimitive from '@radix-ui/react-avatar';
import { ClassProp } from 'class-variance-authority/types';
import { Context } from 'react';
import { default as default_2 } from 'embla-carousel-react';
import * as DialogPrimitive from '@radix-ui/react-dialog';
import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
import { JSX } from 'react/jsx-runtime';
import * as PopoverPrimitive from '@radix-ui/react-popover';
import * as ProgressPrimitive from '@radix-ui/react-progress';
import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
import * as SelectPrimitive from '@radix-ui/react-select';
import * as SeparatorPrimitive from '@radix-ui/react-separator';
import * as TogglePrimitive from '@radix-ui/react-toggle';
import * as TooltipPrimitive from '@radix-ui/react-tooltip';
import { UseEmblaCarouselType } from 'embla-carousel-react';
import { VariantProps } from 'class-variance-authority';

export declare function Avatar({ className, ...props }: React.ComponentProps<typeof AvatarPrimitive.Root>): JSX.Element;

export declare function AvatarFallback({ className, ...props }: React.ComponentProps<typeof AvatarPrimitive.Fallback>): JSX.Element;

export declare function AvatarImage({ className, ...props }: React.ComponentProps<typeof AvatarPrimitive.Image>): JSX.Element;

export declare function Button({ className, variant, size, asChild, ...props }: ButtonProps): JSX.Element;

export declare type ButtonProps = React.ComponentProps<'button'> & VariantProps<typeof buttonVariants> & {
    asChild?: boolean;
};

export declare const buttonVariants: (props?: ({
    variant?: "link" | "default" | "destructive" | "outline" | "secondary" | "brand" | "ghost" | null | undefined;
    size?: "default" | "sm" | "lg" | "icon" | null | undefined;
} & ClassProp) | undefined) => string;

export declare function Card({ className, ...props }: React.ComponentProps<'div'>): JSX.Element;

export declare function CardAction({ className, ...props }: React.ComponentProps<'div'>): JSX.Element;

export declare function CardContent({ className, ...props }: React.ComponentProps<'div'>): JSX.Element;

export declare function CardDescription({ className, ...props }: React.ComponentProps<'div'>): JSX.Element;

export declare function CardFooter({ className, ...props }: React.ComponentProps<'div'>): JSX.Element;

export declare function CardHeader({ className, ...props }: React.ComponentProps<'div'>): JSX.Element;

export declare function CardTitle({ className, ...props }: React.ComponentProps<'div'>): JSX.Element;

export declare function Carousel({ orientation, opts, setApi, plugins, className, children, ...props }: React.ComponentProps<'div'> & CarouselProps): JSX.Element;

export declare type CarouselApi = UseEmblaCarouselType[1];

export declare function CarouselContent({ className, ...props }: React.ComponentProps<'div'>): JSX.Element;

export declare function CarouselItem({ className, ...props }: React.ComponentProps<'div'>): JSX.Element;

export declare function CarouselNext({ className, variant, size, ...props }: React.ComponentProps<typeof Button>): JSX.Element;

declare type CarouselOptions = UseCarouselParameters[0];

declare type CarouselPlugin = UseCarouselParameters[1];

export declare function CarouselPrevious({ className, variant, size, ...props }: React.ComponentProps<typeof Button>): JSX.Element;

declare type CarouselProps = {
    opts?: CarouselOptions;
    plugins?: CarouselPlugin;
    orientation?: 'horizontal' | 'vertical';
    setApi?: (api: CarouselApi) => void;
};

export declare type ColorScheme = 'dark' | 'light';

export declare function createI18n(config: I18nConfig): I18nInstance;

export declare function Dialog({ ...props }: React.ComponentProps<typeof DialogPrimitive.Root>): JSX.Element;

export declare function DialogClose({ ...props }: React.ComponentProps<typeof DialogPrimitive.Close>): JSX.Element;

export declare function DialogContent({ className, children, container, ...props }: React.ComponentProps<typeof DialogPrimitive.Content> & Pick<DialogPrimitive.DialogPortalProps, 'container'>): JSX.Element;

export declare function DialogDescription({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Description>): JSX.Element;

export declare function DialogFooter({ className, ...props }: React.ComponentProps<'div'>): JSX.Element;

export declare function DialogHeader({ className, ...props }: React.ComponentProps<'div'>): JSX.Element;

export declare function DialogOverlay({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Overlay>): JSX.Element;

export declare function DialogPortal(props: React.ComponentProps<typeof DialogPrimitive.Portal>): JSX.Element;

export declare function DialogTitle({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Title>): JSX.Element;

export declare function DialogTrigger({ ...props }: React.ComponentProps<typeof DialogPrimitive.Trigger>): JSX.Element;

export declare function DropdownMenu({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Root>): JSX.Element;

export declare function DropdownMenuCheckboxItem({ className, children, checked, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>): JSX.Element;

export declare function DropdownMenuContent({ className, sideOffset, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Content>): JSX.Element;

export declare function DropdownMenuGroup({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Group>): JSX.Element;

export declare function DropdownMenuItem({ className, inset, variant, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {
    inset?: boolean;
    variant?: 'default' | 'destructive';
}): JSX.Element;

export declare function DropdownMenuLabel({ className, inset, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & {
    inset?: boolean;
}): JSX.Element;

export declare function DropdownMenuPortal({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>): JSX.Element;

export declare function DropdownMenuRadioGroup({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>): JSX.Element;

export declare function DropdownMenuRadioItem({ className, children, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem>): JSX.Element;

export declare function DropdownMenuSeparator({ className, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>): JSX.Element;

export declare function DropdownMenuShortcut({ className, ...props }: React.ComponentProps<'span'>): JSX.Element;

export declare function DropdownMenuSub({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>): JSX.Element;

export declare function DropdownMenuSubContent({ className, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>): JSX.Element;

export declare function DropdownMenuSubTrigger({ className, inset, children, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {
    inset?: boolean;
}): JSX.Element;

export declare function DropdownMenuTrigger({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>): JSX.Element;

export declare const fabVariants: (props?: ({
    size?: "default" | "sm" | "lg" | null | undefined;
    position?: "bottom-right" | "bottom-left" | "top-right" | "top-left" | null | undefined;
    variant?: "default" | "destructive" | "outline" | "secondary" | "brand" | null | undefined;
} & ClassProp) | undefined) => string;

export declare const Flipcard: (props: FlipcardProps) => JSX.Element;

export declare const FlipcardButton: ({ flipped, className, label, children, ...others }: FlipcardButtonProps) => JSX.Element;

export declare type FlipcardButtonProps = ButtonProps & {
    flipped?: boolean;
    label?: string;
};

export declare const FlipcardContent: ({ className, ...others }: React.ComponentProps<"div">) => JSX.Element;

export declare type FlipcardProps = React.ComponentProps<'div'> & {
    front?: React.ReactNode;
    back?: React.ReactNode;
    flip?: boolean;
    height?: string | number;
    slots?: {
        Card?: React.ElementType;
    };
    slotProps?: {
        card?: React.ComponentProps<'div'>;
    };
};

export declare const FloatingActionButton: {
    ({ className, size, position, variant, icon, ...props }: FloatingActionButtonProps): JSX.Element;
    displayName: string;
};

export declare type FloatingActionButtonProps = React.ComponentProps<'button'> & VariantProps<typeof fabVariants> & {
    icon?: React.ReactNode;
    onClick?: () => void;
    asChild?: boolean;
};

export declare function FloatingWindow({ ...props }: FloatingWindowProps): JSX.Element;

export declare function FloatingWindowAction({ className, ...props }: React.ComponentProps<'div'>): JSX.Element;

export declare function FloatingWindowBody({ className, ...props }: React.ComponentProps<'div'>): JSX.Element;

export declare function FloatingWindowClose(props: React.ComponentProps<typeof PopoverPrimitive.Close>): JSX.Element;

export declare function FloatingWindowContent({ className, align, side, sideOffset, ...props }: React.ComponentProps<typeof PopoverPrimitive.Content>): JSX.Element;

export declare function FloatingWindowDescription({ className, ...props }: React.ComponentProps<'div'>): JSX.Element;

export declare function FloatingWindowFooter({ className, ...props }: React.ComponentProps<'div'>): JSX.Element;

export declare function FloatingWindowHeader({ className, ...props }: React.ComponentProps<'div'>): JSX.Element;

export declare type FloatingWindowProps = React.ComponentProps<typeof PopoverPrimitive.Root>;

export declare function FloatingWindowTitle({ className, ...props }: React.ComponentProps<'div'>): JSX.Element;

export declare function FloatingWindowTrigger({ className, ...props }: React.ComponentProps<typeof PopoverPrimitive.Trigger>): JSX.Element;

export declare function getThemeMap<T extends Theme>(theme: T): ThemeMap<T>;

export declare interface I18nConfig {
    /** The default locale to use if detection fails or specific locale is missing */
    defaultLocale: Locale;
    /** An object containing translations for various locales */
    resources: Resources;
    /** The key to use for storing the user's preferred locale in localStorage */
    storageKey?: string;
}

export declare interface I18nContextType {
    locale: Locale;
    setLocale: (newLocale: Locale) => void;
    t: TFunction;
    i18nInstance: I18nInstance;
}

export declare interface I18nInstance {
    /** The configuration object used to create this instance */
    readonly config: Required<I18nConfig>;
    /**
     * Gets the translation for a given key in the specified or detected locale.
     * Falls back to defaultLocale if the key/locale is missing.
     * On the server, locale should usually be provided.
     * On the client (within useTranslation), locale is implicitly the current one.
     * @param key The translation key.
     * @param locale Optional: The locale to translate in. Defaults to config.defaultLocale if not provided AND not used within a reactive client context.
     * @returns The translated string or the key itself if not found.
     */
    t: <K extends TKey>(key: K, ...args: TArgs<K> extends [values: infer V] ? [values: V, locale?: Locale] | [values: V] : [locale?: Locale] | []) => string;
    /**
     * Attempts to determine the best matching locale based on request headers (specifically 'accept-language').
     * Primarily intended for server-side usage.
     * @param headers A Headers object or a plain object representing request headers.
     * @returns The best matching available locale or the default locale.
     */
    getLocaleFromHeaders: (headers: Headers | Record<string, string>) => Locale;
    /**
     * Gets all available locales defined in the resources.
     * @returns An array of locale strings.
     */
    getAvailableLocales: () => Locale[];
}

export declare const I18nProvider: ({ children, instance, initialLocale: explicitInitialLocale, }: I18nProviderProps) => JSX.Element;

declare interface I18nProviderProps {
    children: React.ReactNode;
    instance: I18nInstance;
    /** Optional: Explicitly set the initial locale, overriding storage/default */
    initialLocale?: Locale;
}

export declare function Input({ className, type, ...props }: React.ComponentProps<'input'>): JSX.Element;

/**
 * Extracts the expected interpolation variables type for a given key K.
 * Returns 'void' if the key is not found or expects no interpolation.
 */
export declare type InterpolationVars<K extends TKey> = TranslationKeys[K] extends void ? void : TranslationKeys[K];

export declare type Locale = (string & {}) | 'it' | 'en';

export declare const Mode: {
    readonly DARK: "dark";
    readonly LIGHT: "light";
    readonly SYSTEM: "system";
};

export declare type Mode = (typeof Mode)[keyof typeof Mode];

export declare function Popover({ ...props }: React.ComponentProps<typeof PopoverPrimitive.Root>): JSX.Element;

export declare function PopoverAnchor({ ...props }: React.ComponentProps<typeof PopoverPrimitive.Anchor>): JSX.Element;

export declare function PopoverContent({ className, align, sideOffset, container, ...props }: React.ComponentProps<typeof PopoverPrimitive.Content> & {
    container?: Element | DocumentFragment;
}): JSX.Element;

export declare function PopoverTrigger({ className, ...props }: React.ComponentProps<typeof PopoverPrimitive.Trigger>): JSX.Element;

export declare function Progress({ className, value, ...props }: React.ComponentProps<typeof ProgressPrimitive.Root>): JSX.Element;

export declare function QuizPlayer({ questions, events, validate, requireConfirm, displayIndex, defaultScreen, title, description, attempts, variant, slots, slotProps, className, onFeedback, ...others }: QuizPlayerProps): JSX.Element;

export declare type QuizPlayerAttempt = {
    date?: Date;
    score: number;
};

export declare function QuizPlayerChoice({ selected, disabled, isCorrect, isWrong, onClick, children, className, ...others }: QuizPlayerChoiceProps): JSX.Element;

declare type QuizPlayerChoiceProps = React.ComponentProps<'button'> & {
    selected?: boolean;
    disabled?: boolean;
    isCorrect?: boolean;
    isWrong?: boolean;
    onClick?: () => void;
};

export declare type QuizPlayerControl = ReturnType<typeof useQuizPlayer>;

export declare function QuizPlayerControls({ onCancel, onConfirm, onNext, selectedAnswer, isAnswerValidated, isLastQuestion, requireConfirm, className, asChild, ...others }: QuizPlayerControlsProps_2): JSX.Element;

export declare type QuizPlayerControlsProps = {
    className?: string;
    onCancel?: () => void;
    onConfirm?: () => void;
    onNext?: () => void;
    selectedAnswer?: unknown | null;
    isAnswerValidated?: boolean;
    isLastQuestion?: boolean;
    requireConfirm?: boolean;
};

declare type QuizPlayerControlsProps_2 = React.ComponentProps<'div'> & QuizPlayerControlsProps & {
    asChild?: boolean;
};

export declare type QuizPlayerEndProps = React.ComponentProps<'div'> & {
    score?: number;
    totalQuestions?: number;
    stats?: QuizStats;
    onRestart?: () => void;
    onFeedback?: (value: number) => void;
};

export declare function QuizPlayerEndScreen({ score, totalQuestions, stats, onRestart, onFeedback, slots, slotProps, }: QuizPlayerEndScreenProps): JSX.Element;

declare type QuizPlayerEndScreenProps = React.ComponentProps<'div'> & QuizPlayerEndProps & {
    slots?: {
        Button?: React.ElementType<ButtonProps>;
    };
    slotProps?: {
        button?: ButtonProps;
    };
};

export declare type QuizPlayerEvents = {
    onStart?: () => void;
    onAnswer?: (questionId: string, answer: unknown, isCorrect: boolean) => void;
    onCancel?: () => void;
    onFinish?: (score: number, totalQuestions: number) => void;
    onTimeUp?: (questionId: string) => void;
    onRestart?: () => void;
    onNavigateTo?: (index: number) => void;
};

export declare function QuizPlayerFeedback({ isCorrect, }: React.ComponentProps<'div'> & {
    isCorrect?: boolean;
}): JSX.Element;

export declare function QuizPlayerHint({ children, className, ...others }: QuizPlayerHintProps): JSX.Element;

export declare type QuizPlayerHintProps = React.ComponentProps<'button'> & {};

export declare type QuizPlayerItem = {
    id: string;
    question: string;
    choices: {
        label: string;
        value: unknown;
    }[];
    correctAnswer: unknown;
    hint?: string;
    timeLimit?: number;
};

export declare function QuizPlayerProgress({ timeLimit, isTimerActive, onTimeUp, onCancel, className, slots, title, current, total, ...others }: QuizPlayerProgressProps_2): JSX.Element;

export declare type QuizPlayerProgressProps = {
    className?: string;
    title?: React.ReactNode;
    current?: number;
    total?: number;
    timeLimit?: number;
    isTimerActive?: boolean;
    onTimeUp?: () => void;
    onCancel?: () => void;
};

declare type QuizPlayerProgressProps_2 = React.ComponentProps<'div'> & QuizPlayerProgressProps & {
    slots?: {
        ProgressBar?: React.ElementType<{
            value: number;
        }>;
    };
};

export declare type QuizPlayerProps = React.ComponentProps<'div'> & UseQuizPlayerProps & VariantProps<typeof rootVariants> & QuizPlayerRootProps;

export declare function QuizPlayerQuestion({ question, choices, selectedAnswer, isAnswerValidated, correctAnswer, hint, isCorrect, title, onSelectAnswer, className, ...others }: QuizPlayerQuestionProps_2): JSX.Element;

export declare type QuizPlayerQuestionProps = {
    className?: string;
    title?: React.ReactNode;
    question: QuizPlayerItem['question'];
    choices: QuizPlayerItem['choices'];
    correctAnswer: QuizPlayerItem['correctAnswer'];
    hint?: QuizPlayerItem['hint'];
    selectedAnswer?: unknown | null;
    isAnswerValidated?: boolean;
    isCorrect?: boolean;
    onSelectAnswer?: (choice: unknown) => void;
};

declare type QuizPlayerQuestionProps_2 = React.ComponentProps<'div'> & QuizPlayerQuestionProps;

export declare type QuizPlayerRootProps = {
    title?: React.ReactNode;
    description?: React.ReactNode;
    attempts?: QuizPlayerAttempt[];
    variant?: 'default' | 'contained' | 'ghost';
    slots?: QuizPlayerSlots;
    slotProps?: {
        welcome?: Partial<QuizPlayerWelcomeProps>;
        end?: Partial<QuizPlayerEndProps>;
    };
    defaultScreen?: 'welcome' | 'quiz';
    onFeedback?: (value: number) => void;
};

export declare const QuizPlayerScreen: ({ className, variant, ...others }: React.ComponentProps<"div"> & {
    variant: QuizPlayerScreenType;
}) => JSX.Element;

export declare type QuizPlayerScreenType = 'welcome' | 'quiz' | 'end';

export declare type QuizPlayerSlots = {
    Progress?: React.ElementType<QuizPlayerProgressProps>;
    Question?: React.ElementType<QuizPlayerQuestionProps>;
    Controls?: React.ElementType<QuizPlayerControlsProps>;
    WelcomeScreen?: React.ElementType<QuizPlayerWelcomeProps>;
    EndScreen?: React.ElementType<QuizPlayerEndProps>;
};

export declare type QuizPlayerValidation = {
    validate?: (answer: unknown, correctAnswer: unknown) => Promise<boolean>;
};

export declare type QuizPlayerWelcomeProps = React.ComponentProps<'div'> & {
    title?: React.ReactNode;
    description?: React.ReactNode;
    questions?: QuizPlayerItem[];
    details?: {
        icon: React.ReactNode;
        label: React.ReactNode;
    }[];
    onStart?: () => void;
    onCancel?: () => void;
};

export declare function QuizPlayerWelcomeScreen({ title, description, questions, onStart, onCancel, slots, slotProps, details: customDetails, }: QuizPlayerWelcomeScreenProps): JSX.Element;

declare type QuizPlayerWelcomeScreenProps = React.ComponentProps<'div'> & QuizPlayerWelcomeProps & {
    slots?: {
        Button?: React.ElementType<ButtonProps>;
    };
    slotProps?: {
        button?: ButtonProps;
    };
};

export declare type QuizStats = {
    totalAttempts?: number;
    avgScore?: number;
};

export declare type Resources = Record<Locale, Translations>;

declare const rootVariants: (props?: ({
    variant?: "default" | "ghost" | "contained" | null | undefined;
} & ClassProp) | undefined) => string;

declare const rootVariants_2: (props?: ({
    variant?: "default" | "outline" | "secondary" | "primary" | null | undefined;
} & ClassProp) | undefined) => string;

export declare function ScrollArea({ className, children, ...props }: React.ComponentProps<typeof ScrollAreaPrimitive.Root>): JSX.Element;

export declare function ScrollBar({ className, orientation, ...props }: React.ComponentProps<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>): JSX.Element;

export declare function Select({ ...props }: React.ComponentProps<typeof SelectPrimitive.Root>): JSX.Element;

export declare function SelectContent({ className, children, position, ...props }: React.ComponentProps<typeof SelectPrimitive.Content>): JSX.Element;

export declare function SelectGroup({ ...props }: React.ComponentProps<typeof SelectPrimitive.Group>): JSX.Element;

export declare function SelectItem({ className, children, ...props }: React.ComponentProps<typeof SelectPrimitive.Item>): JSX.Element;

export declare function SelectLabel({ className, ...props }: React.ComponentProps<typeof SelectPrimitive.Label>): JSX.Element;

export declare function SelectScrollDownButton({ className, ...props }: React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>): JSX.Element;

export declare function SelectScrollUpButton({ className, ...props }: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>): JSX.Element;

export declare function SelectSeparator({ className, ...props }: React.ComponentProps<typeof SelectPrimitive.Separator>): JSX.Element;

export declare function SelectTrigger({ className, size, children, ...props }: React.ComponentProps<typeof SelectPrimitive.Trigger> & {
    size?: 'sm' | 'default';
}): JSX.Element;

export declare function SelectValue({ ...props }: React.ComponentProps<typeof SelectPrimitive.Value>): JSX.Element;

export declare function Separator({ className, orientation, decorative, ...props }: React.ComponentProps<typeof SeparatorPrimitive.Root>): JSX.Element;

export declare function Skeleton({ className, ...props }: React.ComponentProps<'div'>): JSX.Element;

export declare const StatsCard: ({ label, description, value, change, icon: Icon, trending, variant, className, ...others }: StatsCardProps) => JSX.Element;

export declare const StatsCardIcon: ({ className, ...others }: React.ComponentProps<"div">) => JSX.Element;

export declare type StatsCardProps = React.ComponentProps<'div'> & VariantProps<typeof rootVariants_2> & {
    label?: React.ReactNode;
    description?: React.ReactNode;
    value?: React.ReactNode;
    change?: React.ReactNode;
    trending?: 'up' | 'down';
    icon?: React.ElementType;
};

export declare const StyleVariant: {
    readonly DEFAULT: "default";
    readonly PLAYFUL: "playful";
    readonly BRUTALIST: "brutalist";
};

export declare type StyleVariant = (typeof StyleVariant)[keyof typeof StyleVariant];

export declare type TArgs<K extends TKey, Values extends TranslationKeyValues | void = InterpolationVars<K>> = Values extends void ? [] | [fallback: string] | [options: {
    fallback: string;
}] : [values: Values] | [fallback: string, values: Values] | [options: {
    args: Values;
    fallback?: string;
}];

export declare type TFunction = <K extends TKey, Values extends TranslationKeyValues | void = InterpolationVars<K>>(key: K, ...args: TArgs<K, Values>) => string;

export declare const Theme: {
    readonly DEFAULT: "default";
    readonly ORANGE: "orange";
};

export declare type Theme = (typeof Theme)[keyof typeof Theme];

export declare const ThemeContext: Context<ThemeContextValue | undefined>;

export declare type ThemeContextValue = {
    /** The currently selected mode ('light', 'dark', or 'system') */
    mode: Mode;
    /** The resolved color scheme ('light' or 'dark') */
    colorScheme: ColorScheme;
    /** The specific theme value applied (e.g., 'light', 'dark-blue') */
    theme: ThemeSlug;
    /** The specific style variant applied (e.g., 'default', 'compact') */
    variant: StyleVariant;
    /** Function to change the mode */
    setMode: (mode: Mode) => void;
    /** Available themes for light/dark mode */
    themes: ThemeMap;
};

export declare type ThemeMap<T extends Theme = Theme> = T extends 'default' ? {
    light: 'light';
    dark: 'dark';
} : {
    light: `light-${T}`;
    dark: `dark-${T}`;
};

export declare const ThemeProvider: (props: ThemeProviderProps) => JSX.Element;

export declare type ThemeProviderProps = {
    children: React.ReactNode;
    /** Mapping of theme name to HTML attribute value. Key is the theme variant, value is the selected theme slug */
    themes?: ThemeMap;
    /** Forced mode, overrides user preference and system settings */
    forcedMode?: Mode;
    /** Selected style variant */
    variant?: StyleVariant;
    /** Default mode if no preference is stored ('system' by default) */
    defaultMode?: Mode;
    /** Local storage key for storing the mode preference */
    storageKey?: string;
    /** Enable system preference integration */
    enableSystem?: boolean;
    /** Nonce for Content Security Policy */
    nonce?: string;
    /** Disable transitions during theme changes to prevent flash */
    disableTransitionOnChange?: boolean;
    global?: boolean;
};

declare type ThemeSlug = 'light' | 'dark' | `light-${Exclude<Theme, 'default'>}` | `dark-${Exclude<Theme, 'default'>}`;

/** Extracts all defined keys from the augmented TranslationKeys interface */
export declare type TKey = keyof TranslationKeys;

export declare function Toggle({ className, variant, size, ...props }: React.ComponentProps<typeof TogglePrimitive.Root> & VariantProps<typeof toggleVariants>): JSX.Element;

export declare const toggleVariants: (props?: ({
    variant?: "default" | "outline" | null | undefined;
    size?: "default" | "sm" | "lg" | null | undefined;
} & ClassProp) | undefined) => string;

export declare function Tooltip({ ...props }: React.ComponentProps<typeof TooltipPrimitive.Root>): JSX.Element;

export declare function TooltipArrow({ className, ...props }: React.ComponentProps<typeof TooltipPrimitive.Arrow>): JSX.Element;

export declare function TooltipContent({ className, sideOffset, children, ...props }: React.ComponentProps<typeof TooltipPrimitive.Content>): JSX.Element;

export declare function TooltipProvider({ delayDuration, ...props }: React.ComponentProps<typeof TooltipPrimitive.Provider>): JSX.Element;

export declare function TooltipTrigger({ className, ...props }: React.ComponentProps<typeof TooltipPrimitive.Trigger>): JSX.Element;

/**
 * @description
 * User-defined interface for strongly typed translation keys and interpolation.
 * Augment this interface in your project (`.d.ts` file).
 */
export declare interface TranslationKeys {
    [key: string]: void;
}

export declare type TranslationKeyValues = Record<string, string | number | boolean | Date>;

export declare type Translations = Record<string, string>;

declare type UseCarouselParameters = Parameters<typeof default_2>;

export declare function useControlledState<T = unknown>({ value, defaultValue, onChange, }: UseControlledStateProps<T>): [T, React.Dispatch<React.SetStateAction<T>>];

export declare type UseControlledStateProps<T = unknown> = {
    value?: T;
    defaultValue?: T;
    onChange?: (value: T) => void;
};

export declare function useMeasure(): readonly [(node?: Element | null) => void, {
    width: number | null;
    height: number | null;
}];

export declare function useQuizPlayer({ questions, events, attempts, displayIndex, validate, requireConfirm, defaultScreen, }: UseQuizPlayerProps): {
    currentQuestion: QuizPlayerItem | undefined;
    currentIndex: number;
    selectedAnswer: unknown;
    isAnswerValidated: boolean;
    isCorrect: boolean;
    score: number;
    screen: QuizPlayerScreenType;
    stats: QuizStats;
    handleAnswerSelection: (choice: unknown) => void;
    handleConfirmAnswer: () => void;
    handleNext: () => void;
    handleCancel: () => void;
    handleTimeUp: () => void;
    handleStart: () => void;
    handleRestart: () => void;
    isTimerActive: boolean;
};

export declare type UseQuizPlayerProps = QuizPlayerValidation & {
    questions?: QuizPlayerItem[];
    events?: QuizPlayerEvents;
    attempts?: QuizPlayerAttempt[];
    requireConfirm?: boolean;
    displayIndex?: number;
    defaultScreen?: 'welcome' | 'quiz';
};

export declare function useQuizTimer(start?: boolean): {
    isTimerActive: boolean;
    pauseTimer: () => void;
    resumeTimer: () => void;
    resetTimer: () => void;
};

export declare const useTheme: () => ThemeContextValue;

export declare const useTranslation: () => I18nContextType;

export declare const Widget: ({ asChild, className, ...others }: WidgetProps) => JSX.Element;

export declare type WidgetProps = React.ComponentProps<'div'> & {
    asChild?: boolean;
};

export { }