@gpichot/spectacle-deck 1.2.9 → 1.2.11

package/colors.d.ts

@@ -5,7 +5,7 @@ export declare function extractColors(color: string): {
     r: number;
     g: number;
     b: number;
-};
+} | null;
 /**
  * Create vars for css colors
  */

package/index.cjs

@@ -1331,12 +1331,14 @@ function extractColors(color) {
     const b = parseInt(hex.substring(4, 6), 16);
     return { r, g, b };
   }
-  throw new Error(`Invalid color format: ${color}`);
+  return null;
 }
 function createCssVariables(colors) {
   const base = Object.entries(colors).map(([key, value]) => `--color-${key}: ${value};`).join("\n");
   const rgbs = Object.entries(colors).map(([key, value]) => {
-    const { r, g, b } = extractColors(value);
+    const color = extractColors(value);
+    if (!color) return "";
+    const { r, g, b } = color;
     return `--color-${key}-rgb: ${r}, ${g}, ${b};`;
   }).join("\n");
   return `${base}
@@ -1779,6 +1781,22 @@ function PassThrough({ children }) {
   return /* @__PURE__ */ import_react24.default.createElement(import_react24.default.Fragment, null, children);
 }
 var layouts = layouts_default;
+var KEYS = {
+  NextSlide: ["ArrowDown", "ArrowRight", "PageDown"],
+  PreviousSlide: ["ArrowUp", "ArrowLeft", "PageUp"]
+};
+function DeckKeyEvents() {
+  const { stepForward, regressSlide } = import_react24.default.useContext(import_spectacle10.DeckContext);
+  import_react24.default.useEffect(() => {
+    const handleKeyDown = (e) => {
+      if (KEYS.NextSlide.includes(e.key)) stepForward();
+      else if (KEYS.PreviousSlide.includes(e.key)) regressSlide();
+    };
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [stepForward, regressSlide]);
+  return null;
+}
 var componentsMap2 = {
   ...map_default,
   wrapper: SlideWrapper
@@ -1806,6 +1824,7 @@ function Deck({
       theme: { ...theme_default, ...theme.themeTokens },
       template
     },
+    /* @__PURE__ */ import_react24.default.createElement(DeckKeyEvents, null),
     deck.slides.map((slide, i) => {
       const Component = slide.slideComponent;
       return /* @__PURE__ */ import_react24.default.createElement(import_spectacle10.Slide, { key: i }, /* @__PURE__ */ import_react24.default.createElement(Component, null));

package/index.mjs

@@ -1,7 +1,7 @@
 // src/index.tsx
 import React24 from "react";
 import { MDXProvider } from "@mdx-js/react";
-import { Deck as SpectacleDeck, Slide } from "spectacle";
+import { Deck as SpectacleDeck, Slide, DeckContext as DeckContext2 } from "spectacle";
 
 // src/layouts/CenteredLayout.tsx
 import React2 from "react";
@@ -1284,12 +1284,14 @@ function extractColors(color) {
     const b = parseInt(hex.substring(4, 6), 16);
     return { r, g, b };
   }
-  throw new Error(`Invalid color format: ${color}`);
+  return null;
 }
 function createCssVariables(colors) {
   const base = Object.entries(colors).map(([key, value]) => `--color-${key}: ${value};`).join("\n");
   const rgbs = Object.entries(colors).map(([key, value]) => {
-    const { r, g, b } = extractColors(value);
+    const color = extractColors(value);
+    if (!color) return "";
+    const { r, g, b } = color;
     return `--color-${key}-rgb: ${r}, ${g}, ${b};`;
   }).join("\n");
   return `${base}
@@ -1732,6 +1734,22 @@ function PassThrough({ children }) {
   return /* @__PURE__ */ React24.createElement(React24.Fragment, null, children);
 }
 var layouts = layouts_default;
+var KEYS = {
+  NextSlide: ["ArrowDown", "ArrowRight", "PageDown"],
+  PreviousSlide: ["ArrowUp", "ArrowLeft", "PageUp"]
+};
+function DeckKeyEvents() {
+  const { stepForward, regressSlide } = React24.useContext(DeckContext2);
+  React24.useEffect(() => {
+    const handleKeyDown = (e) => {
+      if (KEYS.NextSlide.includes(e.key)) stepForward();
+      else if (KEYS.PreviousSlide.includes(e.key)) regressSlide();
+    };
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [stepForward, regressSlide]);
+  return null;
+}
 var componentsMap2 = {
   ...map_default,
   wrapper: SlideWrapper
@@ -1759,6 +1777,7 @@ function Deck({
       theme: { ...theme_default, ...theme.themeTokens },
       template
     },
+    /* @__PURE__ */ React24.createElement(DeckKeyEvents, null),
     deck.slides.map((slide, i) => {
       const Component = slide.slideComponent;
       return /* @__PURE__ */ React24.createElement(Slide, { key: i }, /* @__PURE__ */ React24.createElement(Component, null));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gpichot/spectacle-deck",
-  "version": "1.2.9",
+  "version": "1.2.11",
   "license": "MIT",
   "type": "module",
   "main": "index.cjs",