@gpichot/spectacle-deck 1.13.0 → 1.14.0

package/index.css

@@ -0,0 +1,411 @@
+/* src/components/DocumentationItem.module.css */
+.DocumentationItem_docWrapper {
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  z-index: 10000;
+  &:hover .DocumentationItem_docContent {
+    display: flex;
+  }
+}
+.DocumentationItem_docContainer {
+  margin: 2rem 1rem;
+  background-color: #333;
+  border: 1px solid #333;
+  padding: 0.5rem 1rem;
+  border-radius: 1.5rem;
+}
+.DocumentationItem_docLink {
+  text-decoration: none;
+  font-weight: normal;
+  font-family: var(--font-family);
+  color: var(--color-secondary);
+}
+.DocumentationItem_docLinkItem {
+  width: fit-content;
+  display: inline-block;
+  background-color: #333;
+  border: 1px solid #333;
+  padding: 0.5rem 1rem;
+  border-radius: 1.5rem;
+  margin: 0.25rem 0;
+}
+.DocumentationItem_docContent {
+  display: none;
+  flex-flow: column-reverse nowrap;
+  position: absolute;
+  right: 1rem;
+  bottom: 4.5rem;
+  text-align: right;
+  border-radius: 0.5rem;
+  align-items: flex-end;
+}
+
+/* src/components/HorizontalList.module.css */
+.HorizontalList_container {
+  display: grid;
+  grid-gap: 2rem;
+}
+.HorizontalList_item {
+  display: flex;
+  flex-direction: column;
+  font-family:
+    Bitter,
+    "Helvetica Neue",
+    Helvetica,
+    Arial,
+    sans-serif;
+}
+.HorizontalList_itemHead {
+  display: flex;
+  flex-direction: row;
+  font-size: 1.3rem;
+  margin-bottom: 0.4rem;
+  & p {
+    margin: 0;
+  }
+}
+.HorizontalList_itemContent {
+  & > * {
+    font-size: 1rem;
+    padding: 4px !important;
+    line-height: 1.5rem !important;
+    margin-top: 0;
+  }
+}
+
+/* src/components/IconBox.module.css */
+.IconBox_content {
+  & * {
+    margin: 0.2rem !important;
+    padding: 0 !important;
+  }
+}
+
+/* src/layouts/layouts.module.css */
+.layouts_svgObject {
+  padding: 3rem 2rem;
+  box-sizing: border-box;
+  background-color: white;
+}
+.layouts_bigValue {
+  font-family:
+    Bitter,
+    "Helvetica Neue",
+    Helvetica,
+    Arial,
+    sans-serif;
+  font-size: 10rem;
+  font-weight: 700;
+  line-height: 1;
+  color: var(--color-secondary);
+  text-align: center;
+}
+.layouts_bigCaption {
+  font-family:
+    Bitter,
+    "Helvetica Neue",
+    Helvetica,
+    Arial,
+    sans-serif;
+  font-size: 2rem;
+  font-weight: 400;
+  color: #ffffffcc;
+  text-align: center;
+  margin-top: 2rem;
+  max-width: 70%;
+}
+.layouts_centeredContent {
+  & h1,
+  & h2,
+  & h3,
+  & h4,
+  & h5 {
+    flex: 0 1 auto;
+  }
+}
+.layouts_divWithHeading {
+  & h2 {
+    margin-top: 0;
+  }
+  & h2 strong {
+    color: var(--color-secondary);
+    font-weight: 400;
+  }
+}
+.layouts_columnsContainer {
+  display: flex;
+  flex-direction: row;
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  align-items: center;
+}
+.layouts_default3Side {
+  & svg {
+    height: 100%;
+    width: auto;
+    & path {
+      fill: #ffffff22;
+      transition: fill 3s;
+      &:hover {
+        fill: #ffffffbb;
+      }
+    }
+  }
+}
+.layouts_default2Container {
+  & h2,
+  & h3 {
+    text-align: left;
+    color: white;
+  }
+}
+.layouts_fullImageOverlay {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  flex-flow: column nowrap;
+  justify-content: flex-end;
+  padding: 4rem 6rem;
+  z-index: 1;
+  & h1,
+  & h2,
+  & h3 {
+    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.7);
+  }
+  & p {
+    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.5);
+  }
+}
+.layouts_quoteBase {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  flex-flow: column nowrap;
+  justify-content: center;
+  & .layouts_blockquote > * {
+    border-left: 0;
+  }
+  & .layouts_blockquote {
+    text-align: justify;
+    position: relative;
+  }
+  & .layouts_blockquote > :first-child::before {
+    content: "\201c";
+    position: absolute;
+    font-size: 16rem;
+    left: -5rem;
+    font-family: serif;
+    top: 50%;
+    transform: translateY(-50%);
+    color: #ffffff22;
+  }
+  & .layouts_blockquote > :first-child::after {
+    content: "\201d";
+    position: absolute;
+    font-size: 16rem;
+    right: 3rem;
+    bottom: -5rem;
+    font-family: serif;
+    color: #ffffff22;
+    pointer-events: none;
+  }
+  & .layouts_blockquote * {
+    line-height: 3.5rem !important;
+    font-size: 2.5rem;
+  }
+  & .layouts_source {
+    font-family:
+      Bitter,
+      "Helvetica Neue",
+      Helvetica,
+      Arial,
+      sans-serif;
+    box-sizing: border-box;
+    width: 100%;
+    margin-top: 4rem;
+    text-align: right;
+    font-size: 2rem;
+    & a {
+      text-decoration: none;
+      color: #ffffff77;
+    }
+  }
+}
+.layouts_sectionLayout {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  & h2 {
+    color: white;
+  }
+}
+.layouts_codeSide {
+  & pre {
+    font-size: 0.9rem;
+  }
+}
+.layouts_defaultLayoutHeading {
+  background-color: #ffffff11;
+  padding: 2rem 5rem;
+  margin-bottom: 1rem;
+  & h2 {
+    margin: 0;
+  }
+}
+
+/* src/components/ItemsColumn.module.css */
+.ItemsColumn_wrapper {
+  display: flex;
+  justify-content: center;
+  & * {
+    text-align: center !important;
+  }
+}
+
+/* src/components/Timeline.module.css */
+.Timeline_item {
+  flex: 1;
+  flex-flow: column nowrap;
+  display: inline-flex;
+  &:nth-child(odd),
+  &:nth-child(odd) .Timeline_itemContent {
+    flex-direction: column;
+  }
+  &:nth-child(even),
+  &:nth-child(even) .Timeline_itemContent {
+    flex-direction: column-reverse;
+  }
+}
+.Timeline_itemContent {
+  display: flex;
+  padding: 0.7rem 0 1rem 12px;
+}
+.Timeline_itemContentPhantom {
+  opacity: 0;
+}
+.Timeline_itemBody,
+.Timeline_itemBody > * {
+  font-size: 1.3rem !important;
+  color: #ffffff !important;
+}
+.Timeline_itemTitle {
+  font-family:
+    Bitter,
+    "Helvetica Neue",
+    Helvetica,
+    Arial,
+    sans-serif;
+  font-size: 1rem;
+  font-weight: bold;
+  color: #ffffffbb;
+}
+.Timeline_guide {
+  width: 100%;
+  padding-top: 2px;
+  display: flex;
+  flex-flow: row;
+  align-items: center;
+  & svg {
+    height: 28px;
+    width: 28px;
+    & path {
+      fill: #ffffff;
+    }
+    margin-right: 4px;
+  }
+}
+.Timeline_guideLine {
+  border-top: 4px solid #ffffff;
+  margin-right: 4px;
+}
+
+/* src/components/CodeStepper/CodeStepper.module.css */
+.CodeStepper_container {
+  & pre {
+    padding: 1rem 0rem !important;
+    background-color: transparent !important;
+  }
+  & .CodeStepper_linenumber {
+    min-width: 2rem !important;
+  }
+  & [data-highlight-line=true] {
+    &::before {
+      content: " ";
+      position: absolute;
+      background-color: rgba(var(--color-primary-rgb), 0.5);
+    }
+    &[data-step-active=true]::before {
+      background-color: var(--color-secondary);
+    }
+  }
+}
+
+/* src/components/styled.module.css */
+.styled_heading {
+  font-family:
+    Bitter,
+    "Helvetica Neue",
+    Helvetica,
+    Arial,
+    sans-serif;
+  font-size: 67px;
+  font-weight: 500;
+  & strong {
+    color: var(--color-secondary);
+    font-weight: 500;
+  }
+}
+.styled_headingTwo {
+  font-family:
+    Bitter,
+    "Helvetica Neue",
+    Helvetica,
+    Arial,
+    sans-serif;
+  font-size: 55px;
+  font-weight: 400;
+  & strong {
+    color: var(--color-secondary);
+    font-weight: 500;
+  }
+}
+.styled_headingThree {
+  font-family:
+    Bitter,
+    "Helvetica Neue",
+    Helvetica,
+    Arial,
+    sans-serif;
+  font-size: 40px;
+  font-weight: 400;
+  margin-top: 0;
+  & strong {
+    color: var(--color-secondary);
+    font-weight: 500;
+  }
+}
+.styled_quote {
+  margin: 1rem 0;
+  padding-left: 1.5rem;
+  padding-top: 0;
+  padding-bottom: 0;
+  opacity: 0.8;
+  & > * {
+    padding: 0 !important;
+  }
+}
+.styled_inlineCode {
+  filter: brightness(1.05);
+  zoom: 1.1;
+  &::before,
+  &::after {
+    content: "`";
+    font-size: 0.8em;
+  }
+}

package/index.d.ts

@@ -1,6 +1,4 @@
-import React from "react";
-import { type LayoutComponent } from "./context";
-export * from "spectacle";
+import type React from "react";
 export { AnimatedCounter, FadeIn, ProgressRing, ScaleIn, Spotlight, StaggerChildren, TypeWriter, } from "./components/animations";
 export { Doc, DocItem } from "./components/DocumentationItem";
 export { default as FilePane } from "./components/FilePane";
@@ -10,60 +8,12 @@ export { Image } from "./components/Image";
 export { ItemsColumn } from "./components/ItemsColumn";
 export { Mermaid } from "./components/Mermaid";
 export { default as Timeline, TimelineItem } from "./components/Timeline";
-export { dropTransition, noneTransition, resolveTransition, } from "./transitions";
-export type SlideType = {
-    metadata: Record<string, unknown> & {
-        layout?: string;
-    };
-    slideComponent: React.ElementType<unknown>;
-};
-export type DeckType = {
-    metadata: Record<string, unknown>;
-    slides: SlideType[];
-};
+export type { DeckState, DeckType, MorphProps, SlideTransition, SlideType, StepperProps, } from "./engine";
+export { Deck, DeckContext, dropTransition, fadeTransition, getCurrentSection, Morph, MorphImage, morphTransition, noneTransition, resolveTransition, SectionTitle, Stepper, slideTransition, useDeck, useKeyboard, } from "./engine";
+export { default as layouts } from "./layouts";
 export declare function PassThrough({ children }: {
     children: React.ReactNode;
 }): import("react/jsx-runtime").JSX.Element;
-export declare const layouts: {
-    mainSection: ({ children, }: {
-        children: React.ReactNode;
-    }) => import("react/jsx-runtime").JSX.Element;
-    centered: (props: React.ComponentPropsWithoutRef<"div">) => import("react/jsx-runtime").JSX.Element;
-    default3: ({ children, position, }: {
-        children: React.ReactNode;
-        position?: "left" | "right";
-    }) => import("react/jsx-runtime").JSX.Element;
-    quote: typeof import("./layouts/QuoteLayout").QuoteLayout;
-    sidedCode: typeof import("./layouts/SideCodeLayout").SidedCodeLayout;
-    sidedImage: ({ children, image, position, height, ratio: ratioProp, }: {
-        children: React.ReactNode;
-        image?: string;
-        position?: "left" | "right";
-        ratio?: string;
-        height?: number;
-    }) => import("react/jsx-runtime").JSX.Element;
-    side: typeof import("./layouts/SideLayout").SideLayout;
-    section: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-    fullImage: typeof import("./layouts/FullImageLayout").FullImageLayout;
-    bigNumber: typeof import("./layouts/BigNumberLayout").BigNumberLayout;
-    twoColumn: typeof import("./layouts/TwoColumnLayout").TwoColumnLayout;
-};
-interface ThemeOptions {
-    themeTokens: {
-        colors: Record<string, string>;
-        fonts?: {
-            header?: string;
-            text?: string;
-        };
-    };
-}
-export declare function Deck({ deck, theme, layouts, transition, }: {
-    deck: DeckType;
-    theme: ThemeOptions;
-    layouts?: Record<string, LayoutComponent>;
-    /** Default slide transition. Can be a name ("fade", "slide", "drop", "none") or a SlideTransition object. */
-    transition?: string;
-}): import("react/jsx-runtime").JSX.Element;
 export declare function Danger({ children }: {
     children: React.ReactNode;
 }): import("react/jsx-runtime").JSX.Element;