@gpichot/spectacle-deck 1.4.0 → 1.5.0

package/index.mjs

@@ -1,6 +1,6 @@
 // src/index.tsx
 import { MDXProvider } from "@mdx-js/react";
-import React12 from "react";
+import React15 from "react";
 import { Slide, Deck as SpectacleDeck } from "spectacle";
 import { createGlobalStyle } from "styled-components";
 
@@ -1548,13 +1548,335 @@ var theme_default = {
   space: [8, 16, 24]
 };
 
+// src/transitions.ts
+import {
+  fadeTransition,
+  slideTransition
+} from "spectacle";
+var dropTransition = {
+  from: { transform: "translateY(-100%)", opacity: 0 },
+  enter: { transform: "translateY(0%)", opacity: 1 },
+  leave: { transform: "translateY(100%)", opacity: 0 }
+};
+var noneTransition = {
+  from: { opacity: 1 },
+  enter: { opacity: 1 },
+  leave: { opacity: 0 }
+};
+var transitionMap = {
+  fade: fadeTransition,
+  slide: slideTransition,
+  drop: dropTransition,
+  none: noneTransition
+};
+function resolveTransition(name) {
+  if (!name) return void 0;
+  return transitionMap[name];
+}
+
 // src/index.tsx
 export * from "spectacle";
 
-// src/components/DocumentationItem.tsx
+// src/components/animations/AnimatedCounter.tsx
+import { animated, useSpring } from "@react-spring/web";
+
+// src/components/animations/useInView.ts
+import React8 from "react";
+function useInView() {
+  const ref = React8.useRef(null);
+  const [isInView, setIsInView] = React8.useState(false);
+  React8.useEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        if (entry.isIntersecting) {
+          setIsInView(true);
+          observer.disconnect();
+        }
+      },
+      { threshold: 0.1 }
+    );
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, []);
+  return [ref, isInView];
+}
+
+// src/components/animations/AnimatedCounter.tsx
+import { jsx as jsx20 } from "react/jsx-runtime";
+function AnimatedCounter({
+  to,
+  from = 0,
+  duration = 1500,
+  delay = 0,
+  decimals = 0,
+  prefix = "",
+  suffix = ""
+}) {
+  const [ref, isInView] = useInView();
+  const { value } = useSpring({
+    value: isInView ? to : from,
+    delay: isInView ? delay : 0,
+    config: { duration }
+  });
+  return /* @__PURE__ */ jsx20(animated.span, { ref, style: { fontFamily: "var(--font-family)" }, children: value.to((v) => `${prefix}${v.toFixed(decimals)}${suffix}`) });
+}
+
+// src/components/animations/FadeIn.tsx
+import { animated as animated2, useSpring as useSpring2 } from "@react-spring/web";
+import { jsx as jsx21 } from "react/jsx-runtime";
+function FadeIn({
+  children,
+  direction = "up",
+  distance = 20,
+  delay = 0,
+  duration = 400
+}) {
+  const [ref, isInView] = useInView();
+  const translateMap = {
+    up: `translateY(${distance}px)`,
+    down: `translateY(-${distance}px)`,
+    left: `translateX(${distance}px)`,
+    right: `translateX(-${distance}px)`,
+    none: "translate(0, 0)"
+  };
+  const styles = useSpring2({
+    opacity: isInView ? 1 : 0,
+    transform: isInView ? "translate(0, 0)" : translateMap[direction],
+    delay: isInView ? delay : 0,
+    config: { duration }
+  });
+  return /* @__PURE__ */ jsx21(animated2.div, { ref, style: styles, children });
+}
+
+// src/components/animations/ProgressRing.tsx
+import { animated as animated3, useSpring as useSpring3 } from "@react-spring/web";
+import { jsx as jsx22, jsxs as jsxs15 } from "react/jsx-runtime";
+function ProgressRing({
+  value,
+  size = 120,
+  strokeWidth = 8,
+  color = "var(--color-secondary)",
+  trackColor = "rgba(255,255,255,0.1)",
+  duration = 1e3,
+  delay = 0,
+  children
+}) {
+  const [ref, isInView] = useInView();
+  const radius = (size - strokeWidth) / 2;
+  const circumference = 2 * Math.PI * radius;
+  const targetOffset = circumference - value / 100 * circumference;
+  const { offset } = useSpring3({
+    offset: isInView ? targetOffset : circumference,
+    delay: isInView ? delay : 0,
+    config: { duration }
+  });
+  return /* @__PURE__ */ jsxs15(
+    "div",
+    {
+      ref,
+      style: {
+        position: "relative",
+        width: size,
+        height: size,
+        display: "inline-flex",
+        alignItems: "center",
+        justifyContent: "center"
+      },
+      children: [
+        /* @__PURE__ */ jsxs15(
+          "svg",
+          {
+            width: size,
+            height: size,
+            style: { position: "absolute", transform: "rotate(-90deg)" },
+            children: [
+              /* @__PURE__ */ jsx22(
+                "circle",
+                {
+                  cx: size / 2,
+                  cy: size / 2,
+                  r: radius,
+                  fill: "none",
+                  stroke: trackColor,
+                  strokeWidth
+                }
+              ),
+              /* @__PURE__ */ jsx22(
+                animated3.circle,
+                {
+                  cx: size / 2,
+                  cy: size / 2,
+                  r: radius,
+                  fill: "none",
+                  stroke: color,
+                  strokeWidth,
+                  strokeDasharray: circumference,
+                  strokeDashoffset: offset,
+                  strokeLinecap: "round"
+                }
+              )
+            ]
+          }
+        ),
+        children && /* @__PURE__ */ jsx22(
+          "div",
+          {
+            style: {
+              position: "relative",
+              zIndex: 1,
+              fontFamily: "var(--font-family)"
+            },
+            children
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/components/animations/ScaleIn.tsx
+import { animated as animated4, useSpring as useSpring4 } from "@react-spring/web";
+import { jsx as jsx23 } from "react/jsx-runtime";
+function ScaleIn({
+  children,
+  from = 0,
+  delay = 0,
+  duration = 400
+}) {
+  const [ref, isInView] = useInView();
+  const styles = useSpring4({
+    opacity: isInView ? 1 : 0,
+    transform: isInView ? "scale(1)" : `scale(${from})`,
+    delay: isInView ? delay : 0,
+    config: { duration }
+  });
+  return /* @__PURE__ */ jsx23(animated4.div, { ref, style: styles, children });
+}
+
+// src/components/animations/Spotlight.tsx
 import styled13 from "styled-components";
-import { jsx as jsx20, jsxs as jsxs15 } from "react/jsx-runtime";
-var DocWrapper = styled13.div`
+import { Fragment as Fragment2, jsx as jsx24, jsxs as jsxs16 } from "react/jsx-runtime";
+var Overlay2 = styled13.div`
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, ${(p) => p.$active ? p.$dimOpacity : 0});
+  pointer-events: ${(p) => p.$active ? "auto" : "none"};
+  transition: background 0.4s ease;
+  z-index: 99;
+`;
+var Content = styled13.div`
+  position: relative;
+  z-index: ${(p) => p.$active ? 100 : "auto"};
+`;
+function Spotlight({
+  children,
+  active = true,
+  dimOpacity = 0.7
+}) {
+  return /* @__PURE__ */ jsxs16(Fragment2, { children: [
+    /* @__PURE__ */ jsx24(Overlay2, { $active: active, $dimOpacity: dimOpacity }),
+    /* @__PURE__ */ jsx24(Content, { $active: active, children })
+  ] });
+}
+
+// src/components/animations/StaggerChildren.tsx
+import { animated as animated5, useSprings } from "@react-spring/web";
+import React9 from "react";
+import { jsx as jsx25 } from "react/jsx-runtime";
+function StaggerChildren({
+  children,
+  stagger = 100,
+  delay = 0,
+  duration = 400,
+  direction = "up",
+  distance = 20
+}) {
+  const [ref, isInView] = useInView();
+  const items = React9.Children.toArray(children);
+  const translateMap = {
+    up: `translateY(${distance}px)`,
+    down: `translateY(-${distance}px)`,
+    left: `translateX(${distance}px)`,
+    right: `translateX(-${distance}px)`,
+    none: "translate(0, 0)"
+  };
+  const springs = useSprings(
+    items.length,
+    items.map((_, i) => ({
+      opacity: isInView ? 1 : 0,
+      transform: isInView ? "translate(0, 0)" : translateMap[direction],
+      delay: isInView ? delay + i * stagger : 0,
+      config: { duration }
+    }))
+  );
+  return /* @__PURE__ */ jsx25("div", { ref, children: springs.map((style2, i) => /* @__PURE__ */ jsx25(animated5.div, { style: style2, children: items[i] }, i)) });
+}
+
+// src/components/animations/TypeWriter.tsx
+import React10 from "react";
+import { jsx as jsx26, jsxs as jsxs17 } from "react/jsx-runtime";
+function extractText(node) {
+  if (typeof node === "string") return node;
+  if (typeof node === "number") return String(node);
+  if (!node) return "";
+  if (Array.isArray(node)) return node.map(extractText).join("");
+  if (React10.isValidElement(node)) {
+    const props = node.props;
+    return extractText(props.children);
+  }
+  return "";
+}
+function TypeWriter({
+  children,
+  speed = 50,
+  delay = 0,
+  cursor = true
+}) {
+  const text = extractText(children);
+  const [ref, isInView] = useInView();
+  const [displayed, setDisplayed] = React10.useState("");
+  const [done, setDone] = React10.useState(false);
+  React10.useEffect(() => {
+    if (!isInView) return;
+    let index = 0;
+    setDisplayed("");
+    setDone(false);
+    const timeout = setTimeout(() => {
+      const interval = setInterval(() => {
+        if (index < text.length) {
+          setDisplayed(text.slice(0, index + 1));
+          index++;
+        } else {
+          setDone(true);
+          clearInterval(interval);
+        }
+      }, speed);
+      return () => clearInterval(interval);
+    }, delay);
+    return () => clearTimeout(timeout);
+  }, [text, speed, delay, isInView]);
+  return /* @__PURE__ */ jsxs17("span", { ref, style: { fontFamily: "var(--font-family)" }, children: [
+    displayed,
+    cursor && /* @__PURE__ */ jsx26(
+      "span",
+      {
+        style: {
+          borderRight: "2px solid currentColor",
+          marginLeft: 1,
+          animation: done ? "pestacle-blink 1s step-end infinite" : "none"
+        },
+        children: /* @__PURE__ */ jsx26("style", { children: `@keyframes pestacle-blink { 50% { opacity: 0; } }` })
+      }
+    )
+  ] });
+}
+
+// src/components/DocumentationItem.tsx
+import styled14 from "styled-components";
+import { jsx as jsx27, jsxs as jsxs18 } from "react/jsx-runtime";
+var DocWrapper = styled14.div`
   position: absolute;
   bottom: 0;
   right: 0;
@@ -1568,20 +1890,20 @@ var DocWrapper = styled13.div`
     display: flex;
   }
 `;
-var DocContainer = styled13.div`
+var DocContainer = styled14.div`
   margin: 2rem 1rem;
   background-color: #333;
   border: 1px solid #333;
   padding: 0.5rem 1rem;
   border-radius: 1.5rem;
 `;
-var DocLink = styled13.a`
+var DocLink = styled14.a`
   text-decoration: none;
   font-weight: normal;
   font-family: var(--font-family);
   color: var(--color-secondary);
 `;
-var DocLinkItem = styled13(DocLink)`
+var DocLinkItem = styled14(DocLink)`
   width: fit-content;
   display: inline-block;
   background-color: #333;
@@ -1590,7 +1912,7 @@ var DocLinkItem = styled13(DocLink)`
   border-radius: 1.5rem;
   margin: 0.25rem 0;
 `;
-var DocContent = styled13.div`
+var DocContent = styled14.div`
   display: flex;
   flex-flow: column-reverse nowrap;
   position: absolute;
@@ -1605,24 +1927,24 @@ function Doc({
   link,
   children
 }) {
-  return /* @__PURE__ */ jsx20(DocWrapper, { children: /* @__PURE__ */ jsxs15(DocContainer, { children: [
-    children && /* @__PURE__ */ jsx20(DocContent, { children }),
-    /* @__PURE__ */ jsx20("div", { children: /* @__PURE__ */ jsx20(DocLink, { target: "_blank", rel: "noopener noreferrer", href: link, children: label }) })
+  return /* @__PURE__ */ jsx27(DocWrapper, { children: /* @__PURE__ */ jsxs18(DocContainer, { children: [
+    children && /* @__PURE__ */ jsx27(DocContent, { children }),
+    /* @__PURE__ */ jsx27("div", { children: /* @__PURE__ */ jsx27(DocLink, { target: "_blank", rel: "noopener noreferrer", href: link, children: label }) })
   ] }) });
 }
 function DocItem({ label, link }) {
-  return /* @__PURE__ */ jsx20(DocLinkItem, { target: "_blank", rel: "noopener noreferrer", href: link, children: label });
+  return /* @__PURE__ */ jsx27(DocLinkItem, { target: "_blank", rel: "noopener noreferrer", href: link, children: label });
 }
 
 // src/components/FilePane.tsx
-import React8 from "react";
+import React11 from "react";
 function FilePane({
   name,
   children,
   priority,
   ...divProps
 }) {
-  return React8.isValidElement(children) ? React8.cloneElement(children, {
+  return React11.isValidElement(children) ? React11.cloneElement(children, {
     // @ts-expect-error cloning
     priority,
     name
@@ -1631,12 +1953,12 @@ function FilePane({
 FilePane.mdxType = "FilePane";
 
 // src/components/HorizontalList.tsx
-import { animated, useSpring } from "@react-spring/web";
-import React9 from "react";
+import { animated as animated6, useSpring as useSpring5 } from "@react-spring/web";
+import React12 from "react";
 import { Stepper as Stepper2 } from "spectacle";
-import styled14 from "styled-components";
-import { jsx as jsx21, jsxs as jsxs16 } from "react/jsx-runtime";
-var Container = styled14.div`
+import styled15 from "styled-components";
+import { jsx as jsx28, jsxs as jsxs19 } from "react/jsx-runtime";
+var Container = styled15.div`
   display: grid;
   grid-gap: 2rem;
 `;
@@ -1644,18 +1966,18 @@ function HorizontalList({
   children,
   columns = 3
 }) {
-  const items = React9.Children.toArray(children);
-  return /* @__PURE__ */ jsx21(Stepper2, { values: items, children: (_, step) => /* @__PURE__ */ jsx21(
+  const items = React12.Children.toArray(children);
+  return /* @__PURE__ */ jsx28(Stepper2, { values: items, children: (_, step) => /* @__PURE__ */ jsx28(
     Container,
     {
       style: {
         gridTemplateColumns: `repeat(${columns}, 1fr)`
       },
       children: items.map((item, k) => {
-        if (!React9.isValidElement(item)) {
+        if (!React12.isValidElement(item)) {
           return item;
         }
-        return React9.cloneElement(item, {
+        return React12.cloneElement(item, {
           // @ts-expect-error cloning
           position: k + 1,
           isVisible: k <= step,
@@ -1666,11 +1988,11 @@ function HorizontalList({
   ) });
 }
 function Pill({ position }) {
-  return /* @__PURE__ */ jsx21(
+  return /* @__PURE__ */ jsx28(
     "div",
     {
       style: { width: 48, transform: "translate(-25%, -25%)", opacity: 0.9 },
-      children: /* @__PURE__ */ jsxs16(
+      children: /* @__PURE__ */ jsxs19(
         "svg",
         {
           width: "48",
@@ -1679,14 +2001,14 @@ function Pill({ position }) {
           fill: "none",
           xmlns: "http://www.w3.org/2000/svg",
           children: [
-            /* @__PURE__ */ jsx21(
+            /* @__PURE__ */ jsx28(
               "path",
               {
                 d: "M8.64717 20L0 15.0094V5.00134L8.64717 0L17.289 5.00134V15.0094L8.64717 20ZM1.48222 14.141L8.64717 18.2846L15.8068 14.141V5.85902L8.64717 1.71536L1.48222 5.85902V14.141Z",
                 fill: "#ffffff"
               }
             ),
-            /* @__PURE__ */ jsx21(
+            /* @__PURE__ */ jsx28(
               "text",
               {
                 x: "9",
@@ -1698,7 +2020,7 @@ function Pill({ position }) {
                 children: position
               }
             ),
-            /* @__PURE__ */ jsx21(
+            /* @__PURE__ */ jsx28(
               "path",
               {
                 d: "M 8.758 16.01 L 3.549 13.004 L 3.549 6.975 L 8.758 3.963 L 13.964 6.975 L 13.964 13.004 L 8.758 16.01 Z",
@@ -1711,12 +2033,12 @@ function Pill({ position }) {
     }
   );
 }
-var Item = styled14(animated.div)`
+var Item = styled15(animated6.div)`
   display: flex;
   flex-direction: column;
   font-family: Bitter, "Helvetica Neue", Helvetica, Arial, sans-serif;
 `;
-var ItemHead = styled14.div`
+var ItemHead = styled15.div`
   display: flex;
   flex-direction: row;
   font-size: 1.3rem;
@@ -1726,7 +2048,7 @@ var ItemHead = styled14.div`
     margin: 0;
   }
 `;
-var ItemContent = styled14.div`
+var ItemContent = styled15.div`
   > * {
     font-size: 1rem;
     padding: 4px !important;
@@ -1749,22 +2071,22 @@ function HorizontalListItem({
   isVisible,
   isLast
 }) {
-  const opacityStyles = useSpring({
+  const opacityStyles = useSpring5({
     opacity: getItemOpacity({ isVisible, isLast })
   });
-  return /* @__PURE__ */ jsxs16(Item, { style: opacityStyles, children: [
-    /* @__PURE__ */ jsxs16(ItemHead, { children: [
-      /* @__PURE__ */ jsx21(Pill, { position }),
-      /* @__PURE__ */ jsx21("p", { children: title })
+  return /* @__PURE__ */ jsxs19(Item, { style: opacityStyles, children: [
+    /* @__PURE__ */ jsxs19(ItemHead, { children: [
+      /* @__PURE__ */ jsx28(Pill, { position }),
+      /* @__PURE__ */ jsx28("p", { children: title })
     ] }),
-    /* @__PURE__ */ jsx21(ItemContent, { children })
+    /* @__PURE__ */ jsx28(ItemContent, { children })
   ] });
 }
 
 // src/components/IconBox.tsx
-import styled15 from "styled-components";
-import { jsx as jsx22, jsxs as jsxs17 } from "react/jsx-runtime";
-var IconBoxContent = styled15.div`
+import styled16 from "styled-components";
+import { jsx as jsx29, jsxs as jsxs20 } from "react/jsx-runtime";
+var IconBoxContent = styled16.div`
   * {
     margin: 0.2rem !important;
     padding: 0 !important;
@@ -1774,7 +2096,7 @@ function IconBox({
   children,
   icon
 }) {
-  return /* @__PURE__ */ jsxs17(
+  return /* @__PURE__ */ jsxs20(
     "div",
     {
       style: {
@@ -1784,23 +2106,23 @@ function IconBox({
         padding: "1rem 0"
       },
       children: [
-        /* @__PURE__ */ jsx22("div", { style: { fontSize: 60 }, children: icon }),
-        /* @__PURE__ */ jsx22(IconBoxContent, { children })
+        /* @__PURE__ */ jsx29("div", { style: { fontSize: 60 }, children: icon }),
+        /* @__PURE__ */ jsx29(IconBoxContent, { children })
       ]
     }
   );
 }
 
 // src/components/ItemsColumn.tsx
-import { animated as animated2, useSpring as useSpring2 } from "@react-spring/web";
-import React10 from "react";
+import { animated as animated7, useSpring as useSpring6 } from "@react-spring/web";
+import React13 from "react";
 import { Stepper as Stepper3 } from "spectacle";
-import styled16 from "styled-components";
-import { jsx as jsx23 } from "react/jsx-runtime";
+import styled17 from "styled-components";
+import { jsx as jsx30 } from "react/jsx-runtime";
 function ItemsColumn(divProps) {
   const { style: style2, children, ...props } = divProps;
-  const childrenArray = React10.Children.toArray(children);
-  return /* @__PURE__ */ jsx23(Stepper3, { values: childrenArray, children: (_value, step) => /* @__PURE__ */ jsx23(
+  const childrenArray = React13.Children.toArray(children);
+  return /* @__PURE__ */ jsx30(Stepper3, { values: childrenArray, children: (_value, step) => /* @__PURE__ */ jsx30(
     "div",
     {
       style: {
@@ -1815,15 +2137,15 @@ function ItemsColumn(divProps) {
       ...props,
       children: childrenArray.map((child, index) => {
         const isVisible = index <= step;
-        if (!React10.isValidElement(child)) {
+        if (!React13.isValidElement(child)) {
           return child;
         }
-        return /* @__PURE__ */ jsx23(ItemColumnWrapper, { isVisible, children: child }, index);
+        return /* @__PURE__ */ jsx30(ItemColumnWrapper, { isVisible, children: child }, index);
       })
     }
   ) });
 }
-var ItemColumnWrapperStyled = styled16(animated2.div)`
+var ItemColumnWrapperStyled = styled17(animated7.div)`
   display: flex;
   justify-content: center;
   * {
@@ -1835,33 +2157,33 @@ function ItemColumnWrapper({
   isVisible,
   ...props
 }) {
-  const styles = useSpring2({ opacity: isVisible ? 1 : 0 });
-  return /* @__PURE__ */ jsx23(ItemColumnWrapperStyled, { style: styles, ...props, children });
+  const styles = useSpring6({ opacity: isVisible ? 1 : 0 });
+  return /* @__PURE__ */ jsx30(ItemColumnWrapperStyled, { style: styles, ...props, children });
 }
 
 // src/components/Timeline.tsx
-import { animated as animated3, useSpring as useSpring3 } from "@react-spring/web";
-import React11 from "react";
+import { animated as animated8, useSpring as useSpring7 } from "@react-spring/web";
+import React14 from "react";
 import { Stepper as Stepper4 } from "spectacle";
-import styled18 from "styled-components";
+import styled19 from "styled-components";
 
 // src/components/Timeline.styled.tsx
-import styled17 from "styled-components";
-var TimelineItemContent = styled17.div`
+import styled18 from "styled-components";
+var TimelineItemContent = styled18.div`
   display: flex;
   padding: 0.7rem 0 1rem 12px;
 `;
-var TimelineItemContentPhantom = styled17(TimelineItemContent)`
+var TimelineItemContentPhantom = styled18(TimelineItemContent)`
   opacity: 0;
 `;
-var TimelineItemBody = styled17.div`
+var TimelineItemBody = styled18.div`
   &,
   & > * {
     font-size: 1.3rem !important;
     color: #ffffff !important;
   }
 `;
-var TimelineItemTitle = styled17.div`
+var TimelineItemTitle = styled18.div`
   font-family: Bitter, "Helvetica Neue", Helvetica, Arial, sans-serif;
   font-size: 1rem;
   font-weight: bold;
@@ -1869,8 +2191,8 @@ var TimelineItemTitle = styled17.div`
 `;
 
 // src/components/Timeline.tsx
-import { jsx as jsx24, jsxs as jsxs18 } from "react/jsx-runtime";
-var TimelineItemStyled = styled18(animated3.div)`
+import { jsx as jsx31, jsxs as jsxs21 } from "react/jsx-runtime";
+var TimelineItemStyled = styled19(animated8.div)`
   flex: 1;
   flex-flow: column nowrap;
   display: inline-flex;
@@ -1888,7 +2210,7 @@ var TimelineItemStyled = styled18(animated3.div)`
     }
   }
 `;
-var TimelineItemGuide = styled18(animated3.div)`
+var TimelineItemGuide = styled19(animated8.div)`
   width: 100%;
   padding-top: 2px;
   display: flex;
@@ -1904,7 +2226,7 @@ var TimelineItemGuide = styled18(animated3.div)`
     margin-right: 4px;
   }
 `;
-var TimelineItemGuideLine = styled18(animated3.div)`
+var TimelineItemGuideLine = styled19(animated8.div)`
   border-top: 4px solid #ffffff;
   margin-right: 4px;
 `;
@@ -1915,8 +2237,8 @@ var style = {
   alignItems: "center"
 };
 function Timeline(props) {
-  const children = React11.Children.toArray(props.children);
-  return /* @__PURE__ */ jsx24(
+  const children = React14.Children.toArray(props.children);
+  return /* @__PURE__ */ jsx31(
     Stepper4,
     {
       ...props,
@@ -1925,10 +2247,10 @@ function Timeline(props) {
       inactiveStyle: style,
       children: (_value, step) => {
         return children.map((child, index) => {
-          if (!React11.isValidElement(child)) {
+          if (!React14.isValidElement(child)) {
             return child;
           }
-          return React11.cloneElement(child, {
+          return React14.cloneElement(child, {
             // @ts-expect-error cloning
             isPhantom: step < index,
             isLast: step === index
@@ -1948,14 +2270,14 @@ function getItemOpacity2({
 }
 function TimelineItem(props) {
   const { children, title, isPhantom, isLast, ...rest } = props;
-  const guideLineProps = useSpring3({
+  const guideLineProps = useSpring7({
     width: isPhantom || isLast ? "0%" : "100%"
   });
-  const appearStyles = useSpring3({
+  const appearStyles = useSpring7({
     opacity: getItemOpacity2({ isPhantom, isLast })
   });
-  const colorStyles = useSpring3({ opacity: isPhantom || isLast ? 1 : 0.15 });
-  return /* @__PURE__ */ jsxs18(
+  const colorStyles = useSpring7({ opacity: isPhantom || isLast ? 1 : 0.15 });
+  return /* @__PURE__ */ jsxs21(
     TimelineItemStyled,
     {
       ...rest,
@@ -1963,24 +2285,24 @@ function TimelineItem(props) {
         ...appearStyles
       },
       children: [
-        /* @__PURE__ */ jsxs18(TimelineItemContentPhantom, { children: [
-          /* @__PURE__ */ jsx24(TimelineItemTitle, { children: title }),
-          /* @__PURE__ */ jsx24(TimelineItemBody, { children })
+        /* @__PURE__ */ jsxs21(TimelineItemContentPhantom, { children: [
+          /* @__PURE__ */ jsx31(TimelineItemTitle, { children: title }),
+          /* @__PURE__ */ jsx31(TimelineItemBody, { children })
         ] }),
-        /* @__PURE__ */ jsxs18(TimelineItemGuide, { style: colorStyles, children: [
-          /* @__PURE__ */ jsx24(Hexagon, {}),
-          /* @__PURE__ */ jsx24(TimelineItemGuideLine, { style: guideLineProps })
+        /* @__PURE__ */ jsxs21(TimelineItemGuide, { style: colorStyles, children: [
+          /* @__PURE__ */ jsx31(Hexagon, {}),
+          /* @__PURE__ */ jsx31(TimelineItemGuideLine, { style: guideLineProps })
         ] }),
-        /* @__PURE__ */ jsxs18(TimelineItemContent, { children: [
-          /* @__PURE__ */ jsx24(TimelineItemTitle, { children: title }),
-          /* @__PURE__ */ jsx24(TimelineItemBody, { children })
+        /* @__PURE__ */ jsxs21(TimelineItemContent, { children: [
+          /* @__PURE__ */ jsx31(TimelineItemTitle, { children: title }),
+          /* @__PURE__ */ jsx31(TimelineItemBody, { children })
         ] })
       ]
     }
   );
 }
 function Hexagon() {
-  return /* @__PURE__ */ jsxs18(
+  return /* @__PURE__ */ jsxs21(
     "svg",
     {
       width: "18",
@@ -1989,14 +2311,14 @@ function Hexagon() {
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg",
       children: [
-        /* @__PURE__ */ jsx24(
+        /* @__PURE__ */ jsx31(
           "path",
           {
             d: "M8.64717 20L0 15.0094V5.00134L8.64717 0L17.289 5.00134V15.0094L8.64717 20ZM1.48222 14.141L8.64717 18.2846L15.8068 14.141V5.85902L8.64717 1.71536L1.48222 5.85902V14.141Z",
             fill: "#F49676"
           }
         ),
-        /* @__PURE__ */ jsx24(
+        /* @__PURE__ */ jsx31(
           "path",
           {
             d: "M 8.758 16.01 L 3.549 13.004 L 3.549 6.975 L 8.758 3.963 L 13.964 6.975 L 13.964 13.004 L 8.758 16.01 Z",
@@ -2009,9 +2331,9 @@ function Hexagon() {
 }
 
 // src/index.tsx
-import { Fragment as Fragment2, jsx as jsx25, jsxs as jsxs19 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx32, jsxs as jsxs22 } from "react/jsx-runtime";
 function PassThrough({ children }) {
-  return /* @__PURE__ */ jsx25(Fragment2, { children });
+  return /* @__PURE__ */ jsx32(Fragment3, { children });
 }
 var layouts = layouts_default;
 var componentsMap2 = {
@@ -2021,12 +2343,13 @@ var componentsMap2 = {
 function Deck({
   deck,
   theme,
-  layouts: layouts2 = layouts_default
+  layouts: layouts2 = layouts_default,
+  transition
 }) {
-  React12.useEffect(() => {
+  React15.useEffect(() => {
     document.title = deck.metadata.title || "Untitled";
   }, [deck.metadata.title]);
-  const mergedTheme = React12.useMemo(() => {
+  const mergedTheme = React15.useMemo(() => {
     const fonts = {
       ...theme_default.fonts,
       ...theme.themeTokens.fonts ?? {}
@@ -2037,7 +2360,7 @@ function Deck({
       fonts
     };
   }, [theme]);
-  const GlobalStyle = React12.useMemo(() => {
+  const GlobalStyle = React15.useMemo(() => {
     const cssVariables = createCssVariables(theme.themeTokens.colors);
     return createGlobalStyle`
       :root {
@@ -2046,43 +2369,56 @@ function Deck({
       }
     `;
   }, [theme, mergedTheme]);
-  return /* @__PURE__ */ jsx25(React12.StrictMode, { children: /* @__PURE__ */ jsx25(PestacleProvider, { layouts: layouts2, children: /* @__PURE__ */ jsxs19(MDXProvider, { components: componentsMap2, children: [
-    /* @__PURE__ */ jsx25(GlobalStyle, {}),
-    /* @__PURE__ */ jsx25(SpectacleDeck, { theme: mergedTheme, template, children: deck.slides.map((slide, i) => {
-      const Component = slide.slideComponent;
-      return /* @__PURE__ */ jsx25(Slide, { children: /* @__PURE__ */ jsx25(Component, {}) }, i);
-    }) })
+  return /* @__PURE__ */ jsx32(React15.StrictMode, { children: /* @__PURE__ */ jsx32(PestacleProvider, { layouts: layouts2, children: /* @__PURE__ */ jsxs22(MDXProvider, { components: componentsMap2, children: [
+    /* @__PURE__ */ jsx32(GlobalStyle, {}),
+    /* @__PURE__ */ jsx32(
+      SpectacleDeck,
+      {
+        theme: mergedTheme,
+        template,
+        transition: resolveTransition(transition),
+        children: deck.slides.map((slide, i) => {
+          var _a;
+          const Component = slide.slideComponent;
+          const slideTransitionName = (_a = slide.metadata) == null ? void 0 : _a.transition;
+          const slideTransition2 = resolveTransition(slideTransitionName);
+          return /* @__PURE__ */ jsx32(Slide, { transition: slideTransition2, children: /* @__PURE__ */ jsx32(Component, {}) }, i);
+        })
+      }
+    )
   ] }) }) });
 }
 function Danger({ children }) {
-  return /* @__PURE__ */ jsx25("div", { style: { color: "red" }, children });
+  return /* @__PURE__ */ jsx32("div", { style: { color: "red" }, children });
 }
 function Information({ children }) {
-  return /* @__PURE__ */ jsx25("div", { style: { color: "orange" }, children });
+  return /* @__PURE__ */ jsx32("div", { style: { color: "orange" }, children });
 }
 function Success({ children }) {
-  return /* @__PURE__ */ jsx25("div", { style: { color: "green" }, children });
+  return /* @__PURE__ */ jsx32("div", { style: { color: "green" }, children });
 }
 function Warning({ children }) {
-  return /* @__PURE__ */ jsx25("div", { style: { color: "yellow" }, children });
+  return /* @__PURE__ */ jsx32("div", { style: { color: "yellow" }, children });
 }
 function Side({ children }) {
-  return /* @__PURE__ */ jsx25("div", { children });
+  return /* @__PURE__ */ jsx32("div", { children });
 }
 Side.mdxType = "Side";
 function Documentation({ children }) {
-  return /* @__PURE__ */ jsx25("div", { children });
+  return /* @__PURE__ */ jsx32("div", { children });
 }
 function Box2({ children }) {
-  return /* @__PURE__ */ jsx25("div", { children });
+  return /* @__PURE__ */ jsx32("div", { children });
 }
 export {
+  AnimatedCounter,
   Box2 as Box,
   Danger,
   Deck,
   Doc,
   DocItem,
   Documentation,
+  FadeIn,
   FilePane,
   HorizontalList,
   HorizontalListItem,
@@ -2092,10 +2428,18 @@ export {
   ItemsColumn,
   Mermaid,
   PassThrough,
+  ProgressRing,
+  ScaleIn,
   Side,
+  Spotlight,
+  StaggerChildren,
   Success,
   Timeline,
   TimelineItem,
+  TypeWriter,
   Warning,
-  layouts
+  dropTransition,
+  layouts,
+  noneTransition,
+  resolveTransition
 };