import * as React from 'react'; import React__default, { ElementType, ReactNode, CSSProperties, FC, PropsWithChildren, HTMLAttributes } from 'react'; import * as styled_components from 'styled-components'; import { CSSObject } from 'styled-components'; import { SwipeEventData } from 'react-swipeable'; import * as react_jsx_runtime from 'react/jsx-runtime'; import * as csstype from 'csstype'; import * as styled_system from 'styled-system'; import { ColorProps, TypographyProps, SpaceProps, BorderProps, LayoutProps } from 'styled-system'; import { ExtendedKeyboardEvent } from 'mousetrap'; declare type DeepPartial = { [P in keyof T]?: DeepPartial; }; declare const defaultTheme: { size: { width: number; height: number; maxCodePaneHeight: number; }; colors: { primary: string; secondary: string; tertiary: string; quaternary: string; quinary: string; }; fonts: { header: string; text: string; monospace: string; }; fontSizes: { h1: string; h2: string; h3: string; text: string; monospace: string; }; space: number[]; }; declare type SpectacleTheme = typeof defaultTheme; declare type SpectacleThemeOverrides = DeepPartial; declare type SlideTransition = { from?: CSSObject; leave?: CSSObject; enter?: CSSObject; }; declare const fadeTransition: SlideTransition; declare const slideTransition: SlideTransition; declare const defaultTransition: SlideTransition; declare type MarkdownComponentMap = Partial>; declare const mdxComponentMap: MarkdownComponentMap; declare type DeckContextType = { deckId: string | number; slideCount: number; slideIds: SlideId[]; useAnimations: boolean; autoPlayLoop: boolean; navigationDirection: number; slidePortalNode: HTMLDivElement; onSlideClick(e: MouseEvent, slideId: SlideId): void; onMobileSlide(eventData: SwipeEventData): void; theme?: SpectacleThemeOverrides & MarkdownThemeOverrides; frameOverrideStyle: CSSProperties; wrapperOverrideStyle: CSSProperties; backdropNode: HTMLDivElement; notePortalNode: HTMLDivElement; initialized: boolean; activeView: { slideId: SlideId; slideIndex: number; stepIndex: number; }; pendingView: { slideId: SlideId; slideIndex: number; stepIndex: number; }; skipTo(options: { slideIndex: number; stepIndex: number; }): void; stepForward(): void; stepBackward(): void; advanceSlide(): void; regressSlide(): void; commitTransition(newView?: { stepIndex: number; }): void; cancelTransition(): void; template: TemplateFn | ReactNode; transition: SlideTransition; backgroundImage?: string; inOverviewMode: boolean; inPrintMode: boolean; }; declare const DeckContext: React.Context; declare type TemplateFn = (options: { slideNumber: number; numberOfSlides: number; }) => ReactNode; declare type SlideId = string | number; declare type MarkdownThemeOverrides = { markdownComponentMap?: MarkdownComponentMap; }; declare type BackdropOverrides = { Backdrop?: ElementType; backdropStyle?: CSSObject; /** * @deprecated set a value to one of the `Backdrop`, * `backdropStyle.background`, or `backdropStyle.backgroundColor` properties * inside the `theme` prop object instead */ suppressBackdropFallback?: boolean; }; declare type DeckProps = { id?: string | number; className?: string; children: ReactNode; autoPlay?: boolean; autoPlayLoop?: boolean; autoPlayInterval?: number; theme?: SpectacleThemeOverrides & MarkdownThemeOverrides & BackdropOverrides; template?: TemplateFn | ReactNode; printScale?: number; overviewScale?: number; transition?: SlideTransition; /** * @deprecated set a value to one of the `Backdrop`, * `backdropStyle.background`, or `backdropStyle.backgroundColor` properties * inside the `theme` prop object instead */ suppressBackdropFallback?: boolean; backgroundImage?: string; }; declare const SpectacleDeck: (props: DeckProps) => JSX.Element; declare function useSteps(numSteps?: number, { id: userProvidedId, priority, stepIndex }?: { id?: string | number; priority?: number; stepIndex?: number; }): { stepId: string | number; isActive: boolean; step: number; placeholder: react_jsx_runtime.JSX.Element; }; declare type StepId = string; declare type ActivationThresholds = Record; declare type SlideContextType = { immediate: boolean; slideId: SlideId; isSlideActive: boolean; activationThresholds: ActivationThresholds; activeStepIndex: number; }; declare const SlideContext: React.Context; declare const Slide: (props: SlideProps) => JSX.Element; declare type SlideProps = { id?: SlideId; className?: string; backgroundColor?: string; backgroundImage?: string; backgroundOpacity?: number; backgroundPosition?: string; backgroundRepeat?: string; backgroundSize?: string; children: ReactNode; padding?: string | number; textColor?: string; template?: TemplateFn | ReactNode; transition?: SlideTransition; }; declare type SteppedComponentProps = { id?: string | number; priority?: number; /** @deprecated use priority prop instead */ stepIndex?: number; children: ReactNode | ((step: number, isActive: boolean) => ReactNode); className?: string; tagName?: keyof JSX.IntrinsicElements; activeStyle?: Partial; inactiveStyle?: Partial; numSteps?: number; alwaysAppearActive?: boolean; }; declare type AppearProps = Omit; declare const Appear: (props: AppearProps) => JSX.Element; declare const Stepper: (props: StepperProps) => JSX.Element; declare type StepperProps = { id?: string | number; priority?: number; /** @deprecated use priority prop instead */ stepIndex?: number; render?: (value: T[number], step: number, isActive: boolean) => ReactNode; children?: (value: T[number], step: number, isActive: boolean) => ReactNode; className?: string; tagName?: keyof JSX.IntrinsicElements; values: T; alwaysVisible?: boolean; activeStyle?: Partial; inactiveStyle?: Partial; }; declare const codePaneThemes: any; declare type Ranges = Array; declare const CodePane: React.ForwardRefExoticComponent>; declare type CodePaneProps = { children: string; language: string | undefined; theme?: Record; stepIndex?: number; highlightRanges?: Ranges; showLineNumbers?: boolean; }; declare type DecorationProps = Pick; declare type CommonTypographyProps = ColorProps & TypographyProps & SpaceProps; declare const Text: styled_components.StyledComponent<"div", any, ColorProps>, string | number | symbol> & TypographyProps>> & SpaceProps>, string | number | symbol>, never>; declare const CodeSpan: styled_components.StyledComponent<"code", any, ColorProps>, string | number | symbol> & TypographyProps>> & SpaceProps>, string | number | symbol>, never>; declare const Link: styled_components.StyledComponent<"a", any, ColorProps>, string | number | symbol> & TypographyProps>> & SpaceProps>, string | number | symbol> & DecorationProps, never>; declare const Heading: styled_components.StyledComponent<"div", any, ColorProps>, string | number | symbol> & TypographyProps>> & SpaceProps>, string | number | symbol>, never>; declare const Quote: styled_components.StyledComponent>, string | number | symbol> & TypographyProps>> & SpaceProps>, string | number | symbol> & Pick>, csstype.Property.Border>, "borderColor">>>, any, ColorProps>, string | number | symbol> & TypographyProps>> & SpaceProps>, string | number | symbol> & Pick>, csstype.Property.Border>, "borderColor">, never>; declare type ListStyleProps = Pick; declare const OrderedList: styled_components.StyledComponent<"ol", any, ColorProps>, string | number | symbol> & TypographyProps>> & SpaceProps>, string | number | symbol> & ListStyleProps, never>; declare const UnorderedList: styled_components.StyledComponent<"ul", any, ColorProps>, string | number | symbol> & TypographyProps>> & SpaceProps>, string | number | symbol> & ListStyleProps, never>; declare const ListItem: styled_components.StyledComponent<"li", any, ColorProps>, string | number | symbol> & TypographyProps>> & SpaceProps>, string | number | symbol>, never>; declare const FitText: FC>>; declare type TableProps = ColorProps & TypographyProps & SpaceProps & BorderProps & LayoutProps; declare const Table: styled_components.StyledComponent<"table", any, ColorProps>, string | number | symbol> & TypographyProps>> & SpaceProps>, string | number | symbol> & BorderProps>, csstype.Property.Border> & LayoutProps>>, never>; declare const TableHeader: styled_components.StyledComponent<"thead", any, ColorProps>, string | number | symbol> & TypographyProps>> & SpaceProps>, string | number | symbol> & BorderProps>, csstype.Property.Border> & LayoutProps>>, never>; declare const TableBody: styled_components.StyledComponent<"tbody", any, ColorProps>, string | number | symbol> & TypographyProps>> & SpaceProps>, string | number | symbol> & BorderProps>, csstype.Property.Border> & LayoutProps>>, never>; declare const TableRow: styled_components.StyledComponent<"tr", any, ColorProps>, string | number | symbol> & TypographyProps>> & SpaceProps>, string | number | symbol> & BorderProps>, csstype.Property.Border> & LayoutProps>>, never>; declare const TableCell: styled_components.StyledComponent<"td", any, ColorProps>, string | number | symbol> & TypographyProps>> & SpaceProps>, string | number | symbol> & BorderProps>, csstype.Property.Border> & LayoutProps>>, never>; declare const CommandBar: ({ children }: CommandBarProps) => JSX.Element; declare type CommandBarProps = { children: ReactNode; }; declare const Box: styled_components.StyledComponent<"div", any, styled_system.LayoutProps>> & styled_system.SpaceProps>, string | number | symbol> & styled_system.PositionProps>> & styled_system.ColorProps>, string | number | symbol> & styled_system.BorderProps>, csstype.Property.Border>, never>; declare const FlexBox: styled_components.StyledComponent<"div", any, styled_system.LayoutProps>> & styled_system.SpaceProps>, string | number | symbol> & styled_system.PositionProps>> & styled_system.ColorProps>, string | number | symbol> & styled_system.BorderProps>, csstype.Property.Border> & styled_system.FlexboxProps>>, never>; declare const Grid: styled_components.StyledComponent<"div", any, styled_system.LayoutProps>> & styled_system.GridProps>> & styled_system.PositionProps>>, never>; declare type ImageType = FC>; declare const Image: ImageType; declare const FullSizeImage: ImageType; declare const Notes: ({ children }: PropsWithChildren<{}>) => JSX.Element | null; declare type ProgressProps = { color?: string; size?: number; }; declare const Progress: React.ForwardRefExoticComponent>; declare type AnimatedProgressProps = { color?: string; size?: number; pacmanColor?: string; }; declare const AnimatedProgress: React.ForwardRefExoticComponent>; declare type FSProps = { color?: string; size?: number; }; declare const FullScreen: React.ForwardRefExoticComponent>; /** * Layouts to consider: * - Intro */ declare const _default: { Full: ({ children, ...rest }: SlideProps) => react_jsx_runtime.JSX.Element; Center: ({ children, ...rest }: SlideProps) => react_jsx_runtime.JSX.Element; TwoColumn: ({ left, right, ...rest }: Omit & { left: React.ReactNode; right: React.ReactNode; }) => react_jsx_runtime.JSX.Element; List: ({ title, items, listType, animateListItems, titleProps, listProps, ...rest }: Omit & { title?: string | undefined; listType?: "unordered" | "ordered" | undefined; items: React.ReactNode[]; animateListItems?: boolean | undefined; titleProps?: ({ [x: string]: any; [x: number]: any; [x: symbol]: any; } & { theme?: any; } & { as?: string | React.ComponentType | undefined; forwardedAs?: string | React.ComponentType | undefined; }) | undefined; listProps?: ({ [x: string]: any; [x: number]: any; [x: symbol]: any; } & { theme?: any; } & { as?: string | React.ComponentType | undefined; forwardedAs?: string | React.ComponentType | undefined; }) | undefined; }) => react_jsx_runtime.JSX.Element; Section: ({ sectionProps, children }: SlideProps & { sectionProps?: ({ [x: string]: any; [x: number]: any; [x: symbol]: any; } & { theme?: any; } & { as?: string | React.ComponentType | undefined; forwardedAs?: string | React.ComponentType | undefined; }) | undefined; }) => react_jsx_runtime.JSX.Element; BigFact: ({ children, factInformation, factProps, factFontSize, factInformationProps, ...rest }: SlideProps & { factInformation?: React.ReactNode; factProps?: ({ [x: string]: any; [x: number]: any; [x: symbol]: any; } & { theme?: any; } & { as?: string | React.ComponentType | undefined; forwardedAs?: string | React.ComponentType | undefined; }) | undefined; factFontSize?: string | undefined; factInformationProps?: ({ [x: string]: any; [x: number]: any; [x: symbol]: any; } & { theme?: any; } & { as?: string | React.ComponentType | undefined; forwardedAs?: string | React.ComponentType | undefined; }) | undefined; }) => react_jsx_runtime.JSX.Element; Quote: ({ children, quoteProps, attribution, attributionProps, ...rest }: SlideProps & { quoteProps?: ({ [x: string]: any; [x: number]: any; [x: symbol]: any; } & { theme?: any; } & { as?: string | React.ComponentType | undefined; forwardedAs?: string | React.ComponentType | undefined; }) | undefined; attribution: React.ReactNode; attributionProps?: ({ [x: string]: any; [x: number]: any; [x: symbol]: any; } & { theme?: any; } & { as?: string | React.ComponentType | undefined; forwardedAs?: string | React.ComponentType | undefined; }) | undefined; }) => react_jsx_runtime.JSX.Element; Statement: ({ statementProps, children }: SlideProps & { statementProps?: ({ [x: string]: any; [x: number]: any; [x: symbol]: any; } & { theme?: any; } & { as?: string | React.ComponentType | undefined; forwardedAs?: string | React.ComponentType | undefined; }) | undefined; }) => react_jsx_runtime.JSX.Element; Code: ({ children, language, title, titleProps, codePaneProps, ...rest }: Omit & { children: string; language: string; title?: React.ReactNode; titleProps?: ({ [x: string]: any; [x: number]: any; [x: symbol]: any; } & { theme?: any; } & { as?: string | React.ComponentType | undefined; forwardedAs?: string | React.ComponentType | undefined; }) | undefined; codePaneProps?: CodePaneProps | undefined; }) => react_jsx_runtime.JSX.Element; MultiCodeLayout: ({ codeBlocks, title, titleProps, numColumns, ...rest }: Omit & { codeBlocks: (Omit & { code: string; description?: React.ReactNode; descriptionProps?: ({ [x: string]: any; [x: number]: any; [x: symbol]: any; } & { theme?: any; } & { as?: string | React.ComponentType | undefined; forwardedAs?: string | React.ComponentType | undefined; }) | undefined; })[]; title?: React.ReactNode; titleProps?: ({ [x: string]: any; [x: number]: any; [x: symbol]: any; } & { theme?: any; } & { as?: string | React.ComponentType | undefined; forwardedAs?: string | React.ComponentType | undefined; }) | undefined; numColumns?: number | undefined; }) => react_jsx_runtime.JSX.Element; HorizontalImage: ({ src, alt, title, titleProps, description, descriptionProps, imgProps, imgContainerProps, objectFit, ...rest }: Omit & { src: string; alt: string; title?: React.ReactNode; titleProps?: ({ [x: string]: any; [x: number]: any; [x: symbol]: any; } & { theme?: any; } & { as?: string | React.ComponentType | undefined; forwardedAs?: string | React.ComponentType | undefined; }) | undefined; description?: React.ReactNode; descriptionProps?: ({ [x: string]: any; [x: number]: any; [x: symbol]: any; } & { theme?: any; } & { as?: string | React.ComponentType | undefined; forwardedAs?: string | React.ComponentType | undefined; }) | undefined; imgProps?: React.ImgHTMLAttributes | undefined; imgContainerProps?: ({ [x: string]: any; [x: number]: any; [x: symbol]: any; } & { theme?: any; } & { as?: string | React.ComponentType | undefined; forwardedAs?: string | React.ComponentType | undefined; }) | undefined; objectFit?: csstype.Property.ObjectFit | undefined; }) => react_jsx_runtime.JSX.Element; VerticalImage: ({ src, alt, title, titleProps, listType, listItems, animateListItems, listProps, imgProps, imgContainerProps, position, objectFit, ...rest }: Omit & { src: string; alt: string; listItems: React.ReactNode[]; title?: React.ReactNode; titleProps?: ({ [x: string]: any; [x: number]: any; [x: symbol]: any; } & { theme?: any; } & { as?: string | React.ComponentType | undefined; forwardedAs?: string | React.ComponentType | undefined; }) | undefined; listType?: "unordered" | "ordered" | undefined; animateListItems?: boolean | undefined; listProps?: ({ [x: string]: any; [x: number]: any; [x: symbol]: any; } & { theme?: any; } & { as?: string | React.ComponentType | undefined; forwardedAs?: string | React.ComponentType | undefined; }) | undefined; imgProps?: React.ImgHTMLAttributes | undefined; imgContainerProps?: ({ [x: string]: any; [x: number]: any; [x: symbol]: any; } & { theme?: any; } & { as?: string | React.ComponentType | undefined; forwardedAs?: string | React.ComponentType | undefined; }) | undefined; position?: "left" | "right" | undefined; objectFit?: csstype.Property.ObjectFit | undefined; }) => react_jsx_runtime.JSX.Element; ThreeUpImage: ({ primary, top, bottom, ...rest }: Omit & { primary: { src: string; alt: string; objectFit?: csstype.Property.ObjectFit | undefined; position?: "left" | "right" | undefined; imgProps?: React.ImgHTMLAttributes | undefined; imgContainerProps?: ({ [x: string]: any; [x: number]: any; [x: symbol]: any; } & { theme?: any; } & { as?: string | React.ComponentType | undefined; forwardedAs?: string | React.ComponentType | undefined; }) | undefined; }; top: { src: string; alt: string; objectFit?: csstype.Property.ObjectFit | undefined; imgProps?: React.ImgHTMLAttributes | undefined; imgContainerProps?: ({ [x: string]: any; [x: number]: any; [x: symbol]: any; } & { theme?: any; } & { as?: string | React.ComponentType | undefined; forwardedAs?: string | React.ComponentType | undefined; }) | undefined; }; bottom: { src: string; alt: string; objectFit?: csstype.Property.ObjectFit | undefined; imgProps?: React.ImgHTMLAttributes | undefined; imgContainerProps?: ({ [x: string]: any; [x: number]: any; [x: symbol]: any; } & { theme?: any; } & { as?: string | React.ComponentType | undefined; forwardedAs?: string | React.ComponentType | undefined; }) | undefined; }; }) => react_jsx_runtime.JSX.Element; FullBleedImage: ({ src, alt, imgProps, imgContainerProps, objectFit, ...rest }: Omit & { src: string; alt: string; imgProps?: React.ImgHTMLAttributes | undefined; imgContainerProps?: ({ [x: string]: any; [x: number]: any; [x: symbol]: any; } & { theme?: any; } & { as?: string | React.ComponentType | undefined; forwardedAs?: string | React.ComponentType | undefined; }) | undefined; objectFit?: csstype.Property.ObjectFit | undefined; }) => react_jsx_runtime.JSX.Element; }; declare type Props = { color?: string; }; declare const DefaultTemplate: ({ color }: Props) => react_jsx_runtime.JSX.Element; declare type MdComponentProps = { [key: string]: any; }; declare type CommonMarkdownProps = { animateListItems?: boolean; componentProps?: MdComponentProps; children: string; }; declare type MarkdownSlideProps = CommonMarkdownProps & MapAndTemplate & { slideConfig?: Record; }; declare type MarkdownSlideSetProps = CommonMarkdownProps & { slideProps?: Partial[]; }; declare type MapAndTemplate = { componentMap?: MarkdownComponentMap; template?: { default: ElementType; getPropsForAST?: Function; }; }; declare const Markdown: React__default.ForwardRefExoticComponent | undefined; } & React__default.RefAttributes>; declare const MarkdownSlideSet: ({ children: rawMarkdownText, slideProps, ...allSlideProps }: MarkdownSlideSetProps) => react_jsx_runtime.JSX.Element; declare const MarkdownPreHelper: (PreComponent: React__default.ElementType | undefined, CodeInlineComponent: React__default.ElementType | undefined, CodeBlockComponent: ElementType) => FC>; declare const MarkdownSlide: ({ children, componentMap, animateListItems, componentProps, slideConfig, template: propTemplate, ...rest }: MarkdownSlideProps) => react_jsx_runtime.JSX.Element; declare function SpectacleLogo({ size }: { size?: number | undefined; }): react_jsx_runtime.JSX.Element; declare const isolateNotes: (content: string) => string; declare const removeNotes: (content: string) => string; declare const indentNormalizer: (val: string) => string; declare function useMousetrap(keybinds: Record void>, deps: any[]): void; export { AnimatedProgress, AnimatedProgressProps, Appear, Box, CodePane, CodeSpan, CommandBar, SpectacleDeck as Deck, DeckContext, DeckProps, DefaultTemplate, FitText, FlexBox, FullScreen, FullSizeImage, Grid, Heading, Image, Link, ListItem, Markdown, MarkdownComponentMap, MarkdownPreHelper, MarkdownSlide, MarkdownSlideSet, Notes, OrderedList, Progress, ProgressProps, Quote, Slide, SlideContext, SlideId, _default as SlideLayout, SlideTransition, SpectacleLogo, SpectacleTheme, SpectacleThemeOverrides, Stepper, Table, TableBody, TableCell, TableHeader, TableProps, TableRow, Text, UnorderedList, codePaneThemes, defaultTheme, defaultTransition, fadeTransition, indentNormalizer, isolateNotes, mdxComponentMap, removeNotes, slideTransition, useMousetrap, useSteps };