secret-sequence-react 1.0.0

package/README.md

@@ -0,0 +1,249 @@
+<div align="center">
+
+# Secret Sequence React
+
+[![en](https://img.shields.io/badge/lang-en-red.svg)](./README.md)
+[![es](https://img.shields.io/badge/lang-es-yellow.svg)](./README_ES.md)
+
+![GitHub stars](https://img.shields.io/github/stars/Diego0Alonso/secret-sequence)
+![GitHub forks](https://img.shields.io/github/forks/Diego0Alonso/secret-sequence)
+![GitHub issues](https://img.shields.io/github/issues/Diego0Alonso/secret-sequence)
+[![GitHub Sponsors](https://img.shields.io/badge/Sponsor-GitHub-pink?logo=github)](https://github.com/sponsors/Diego0Alonso)
+
+![React](https://img.shields.io/badge/React-≥17-61DAFB?style=for-the-badge&logo=react)
+![TypeScript](https://img.shields.io/badge/TypeScript-5.x-blue?style=for-the-badge&logo=typescript)
+
+> React hook & component for detecting directional sequences, key combos, and touch gestures — powered by [secret-sequence-core](../core/README.md).
+
+This package provides **React bindings** for the [Secret Sequence](../../README.md) monorepo.  
+It wraps the core engine in a hook and a declarative component with full lifecycle management.
+
+</div>
+
+---
+
+## Installation
+
+```bash
+npm install secret-sequence-react secret-sequence-core
+````
+
+> `secret-sequence-core` is a peer dependency.
+
+---
+
+## Quick Start
+
+### Hook — `useSecretSequence`
+
+```tsx
+import { useSecretSequence } from "secret-sequence-react"
+
+function App() {
+  const { progress } = useSecretSequence({
+    sequences: [
+      {
+        id: "konami",
+        sequence: ["up", "up", "down", "down", "left", "right", "left", "right"],
+        onSuccess: () => alert("🎉 Konami Code activated!"),
+      },
+    ],
+    enableTouch: true,
+    touchOptions: { minDistance: 50, maxTime: 400 },
+  })
+
+  return <pre>{JSON.stringify(progress, null, 2)}</pre>
+}
+```
+
+---
+
+### Component — `<SecretSequence />`
+
+#### Invisible Mode (effect only)
+
+```tsx
+import { SecretSequence } from "secret-sequence-react"
+
+function App() {
+  return (
+    <SecretSequence
+      sequences={[
+        {
+          id: "konami",
+          sequence: ["up", "up", "down", "down", "left", "right", "left", "right"],
+          onSuccess: () => console.log("🎉"),
+        },
+      ]}
+      enableTouch={true}
+      touchOptions={{ minDistance: 40 }}
+    />
+  )
+}
+```
+
+#### With render prop
+
+```tsx
+<SecretSequence
+  sequences={[{ id: "code", sequence: ["up", "down"], onSuccess: fn }]}
+>
+  {({ progress, reset }) => (
+    <div>
+      <p>Progress: {JSON.stringify(progress)}</p>
+      <button onClick={reset}>Reset</button>
+    </div>
+  )}
+</SecretSequence>
+```
+
+---
+
+### Stratagem-Style Input
+
+```tsx
+const { progress } = useSecretSequence({
+  sequences: [
+    {
+      id: "orbitalStrike",
+      sequence: ["right", "right", "up"],
+      onSuccess: () => deployStrike(),
+    },
+  ],
+  timeout: 2000,
+})
+```
+
+---
+
+### Key Combo Shortcut
+
+```tsx
+const { progress } = useSecretSequence({
+  sequences: [
+    {
+      id: "shortcut",
+      sequence: [{ key: "k", ctrl: true }],
+      onSuccess: () => console.log("Shortcut triggered"),
+    },
+  ],
+})
+```
+
+---
+
+### Touch Gesture Support
+
+Swipe gestures on touch devices are automatically mapped to directional steps.
+
+```tsx
+const { progress } = useSecretSequence({
+  sequences: [
+    {
+      id: "swipe-pattern",
+      sequence: ["up", "down", "left", "right"],
+      onSuccess: () => alert("Swipe pattern detected!"),
+    },
+  ],
+  enableTouch: true,
+  touchOptions: {
+    minDistance: 30,
+    maxTime: 300,
+    threshold: 1.5,
+  },
+})
+```
+
+---
+
+## API
+
+### `useSecretSequence(options)`
+
+React hook that manages the engine lifecycle automatically.
+
+**Returns:** `{ progress, reset }`
+
+| Return     | Type                       | Description                   |
+| ---------- | -------------------------- | ----------------------------- |
+| `progress` | `Record<string, number>`   | Current progress per sequence |
+| `reset`    | `() => void`               | Reset all sequence progress   |
+
+---
+
+### `<SecretSequence />` Component
+
+Declarative JSX wrapper over the `useSecretSequence` hook.
+
+| Prop               | Type                                                                    | Description                              |
+| ------------------ | ----------------------------------------------------------------------- | ---------------------------------------- |
+| `onProgressChange` | `(progress: Record<string, number>) => void`                            | Callback fired on progress changes       |
+| `children`         | `(state: { progress: Record<string, number>; reset: () => void }) => …` | Optional render prop for progress/reset  |
+| *...hookOptions*   | `UseSecretSequenceOptions`                                              | All hook options (see below)             |
+
+---
+
+### Options (shared by hook & component)
+
+| Option         | Type                     | Default | Description                                            |
+| -------------- | ------------------------ | ------- | ------------------------------------------------------ |
+| `sequences`    | `SecretSequenceConfig[]` | —       | Array of sequences to detect simultaneously            |
+| `timeout`      | `number`                 | `2000`  | Milliseconds of inactivity before resetting progress   |
+| `enabled`      | `boolean`                | `true`  | Globally enable or disable detection                   |
+| `enableTouch`  | `boolean`                | `true`  | Enable swipe gesture detection                         |
+| `ignoreInputs` | `boolean`                | `true`  | Ignore key events when focus is on input-like elements |
+| `touchOptions` | `TouchConfig`            | —       | Advanced touch configuration                           |
+
+---
+
+## Configuration Types
+
+### `SecretSequenceConfig`
+
+| Property    | Type                  | Description                                 |
+| ----------- | --------------------- | ------------------------------------------- |
+| `id`        | `string` *(optional)* | Unique identifier (defaults to array index) |
+| `sequence`  | `SequenceStep[]`      | Ordered steps to detect                     |
+| `onSuccess` | `() => void`          | Fired when the sequence completes           |
+
+---
+
+### Core Types
+
+```ts
+type Direction = "up" | "down" | "left" | "right"
+
+type KeyCombo = {
+  key: string
+  ctrl?: boolean
+  shift?: boolean
+  alt?: boolean
+  meta?: boolean
+}
+
+type SequenceStep = Direction | KeyCombo
+```
+
+---
+
+### `TouchConfig`
+
+| Property      | Type     | Default | Description                                    |
+| ------------- | -------- | ------- | ---------------------------------------------- |
+| `minDistance`  | `number` | `30`    | Minimum swipe distance (px)                    |
+| `maxTime`     | `number` | `300`   | Maximum swipe duration (ms)                    |
+| `threshold`   | `number` | `1.5`   | Axis dominance ratio to reject diagonal swipes |
+
+---
+
+## SSR Compatibility
+
+This package is safe to use in SSR environments such as Next.js or Remix.
+
+The underlying engine guards against accessing `window` during server rendering and only attaches event listeners in the browser.
+
+---
+
+## License
+
+MIT © Diego Alonso

package/dist/index.d.mts

@@ -0,0 +1,137 @@
+import { SecretSequenceConfig, TouchConfig } from 'secret-sequence-core';
+export { Direction, KeyCombo, SecretSequenceConfig, SecretSequenceEngineOptions, SequenceStep, SwipeDirection, TouchConfig, TouchPoint } from 'secret-sequence-core';
+
+/**
+ * Opciones para el hook useSecretSequence.
+ * Refleja las opciones del engine del core.
+ */
+interface UseSecretSequenceOptions {
+    /** Lista de secuencias a detectar */
+    sequences: SecretSequenceConfig[];
+    /** Tiempo máximo entre pasos antes de resetear (ms). Default: 2000 */
+    timeout?: number;
+    /** Habilitar/deshabilitar la detección. Default: true */
+    enabled?: boolean;
+    /** Habilitar detección de gestos táctiles (swipes). Default: true */
+    enableTouch?: boolean;
+    /** Ignorar eventos cuando el foco está en inputs/textareas. Default: true */
+    ignoreInputs?: boolean;
+    /** Configuración de sensibilidad para gestos táctiles */
+    touchOptions?: TouchConfig;
+}
+/**
+ * Valor retornado por el hook useSecretSequence.
+ */
+interface UseSecretSequenceReturn {
+    /** Mapa de progreso actual: { [sequenceId]: stepsCompleted } */
+    progress: Record<string, number>;
+    /** Resetea el progreso de todas las secuencias */
+    reset: () => void;
+}
+/**
+ * Hook de React para detectar secuencias de teclado (Konami codes, combos de teclas)
+ * y gestos táctiles (swipes) usando el engine de secret-sequence-core.
+ *
+ * Gestiona automáticamente el ciclo de vida del engine:
+ * - Se inicia al montar el componente
+ * - Se actualiza reactivamente cuando cambian las opciones
+ * - Se destruye al desmontar el componente
+ *
+ * @example
+ * ```tsx
+ * function App() {
+ *   const { progress } = useSecretSequence({
+ *     sequences: [
+ *       {
+ *         id: "konami",
+ *         sequence: ["up", "up", "down", "down", "left", "right", "left", "right"],
+ *         onSuccess: () => console.log("🎉 Konami activado!"),
+ *       },
+ *     ],
+ *     enableTouch: true,
+ *     touchOptions: { minDistance: 50, maxTime: 400 },
+ *   })
+ *
+ *   return <pre>{JSON.stringify(progress, null, 2)}</pre>
+ * }
+ * ```
+ *
+ * @example Touch-only (sin teclado)
+ * ```tsx
+ * const { progress } = useSecretSequence({
+ *   sequences: [
+ *     {
+ *       id: "swipe-pattern",
+ *       sequence: ["up", "down", "left", "right"],
+ *       onSuccess: () => alert("Patrón de swipe detectado!"),
+ *     },
+ *   ],
+ *   enableTouch: true,
+ *   touchOptions: {
+ *     minDistance: 30,
+ *     maxTime: 300,
+ *     threshold: 1.5,
+ *   },
+ * })
+ * ```
+ */
+declare function useSecretSequence(options: UseSecretSequenceOptions): UseSecretSequenceReturn;
+
+/**
+ * Props del componente SecretSequence.
+ * Idénticas a UseSecretSequenceOptions, con callbacks y render prop opcionales.
+ */
+interface SecretSequenceProps extends UseSecretSequenceOptions {
+    /** Callback invocado cuando cambia el progreso de alguna secuencia */
+    onProgressChange?: (progress: Record<string, number>) => void;
+    /** Render prop opcional para acceder al progreso y reset */
+    children?: (state: {
+        progress: Record<string, number>;
+        reset: () => void;
+    }) => React.ReactNode;
+}
+/**
+ * Componente declarativo para detectar secuencias secretas.
+ * Wrapper JSX sobre el hook `useSecretSequence`.
+ *
+ * Si no se pasa `children`, no renderiza nada.
+ * Si se pasa `children` como render prop, recibe `{ progress, reset }`.
+ *
+ * Soporta todas las funcionalidades del core:
+ * - Secuencias de teclado (direcciones y combos de teclas)
+ * - Gestos táctiles (swipes) con configuración personalizable
+ * - Timeout entre pasos
+ * - Ignorar inputs/textareas
+ *
+ * @example Modo invisible (solo efecto)
+ * ```tsx
+ * <SecretSequence
+ *   sequences={[
+ *     {
+ *       id: "konami",
+ *       sequence: ["up", "up", "down", "down", "left", "right", "left", "right"],
+ *       onSuccess: () => console.log("🎉"),
+ *     },
+ *   ]}
+ *   enableTouch={true}
+ *   touchOptions={{ minDistance: 40 }}
+ * />
+ * ```
+ *
+ * @example Con render prop para mostrar progreso
+ * ```tsx
+ * <SecretSequence
+ *   sequences={[{ id: "code", sequence: ["up", "down"], onSuccess: fn }]}
+ * >
+ *   {({ progress, reset }) => (
+ *     <div>
+ *       <p>Progreso: {JSON.stringify(progress)}</p>
+ *       <button onClick={reset}>Reset</button>
+ *     </div>
+ *   )}
+ * </SecretSequence>
+ * ```
+ */
+declare function SecretSequence(props: SecretSequenceProps): React.ReactNode;
+
+export { SecretSequence, type SecretSequenceProps, type UseSecretSequenceOptions, type UseSecretSequenceReturn, useSecretSequence };

package/dist/index.d.ts

@@ -0,0 +1,137 @@
+import { SecretSequenceConfig, TouchConfig } from 'secret-sequence-core';
+export { Direction, KeyCombo, SecretSequenceConfig, SecretSequenceEngineOptions, SequenceStep, SwipeDirection, TouchConfig, TouchPoint } from 'secret-sequence-core';
+
+/**
+ * Opciones para el hook useSecretSequence.
+ * Refleja las opciones del engine del core.
+ */
+interface UseSecretSequenceOptions {
+    /** Lista de secuencias a detectar */
+    sequences: SecretSequenceConfig[];
+    /** Tiempo máximo entre pasos antes de resetear (ms). Default: 2000 */
+    timeout?: number;
+    /** Habilitar/deshabilitar la detección. Default: true */
+    enabled?: boolean;
+    /** Habilitar detección de gestos táctiles (swipes). Default: true */
+    enableTouch?: boolean;
+    /** Ignorar eventos cuando el foco está en inputs/textareas. Default: true */
+    ignoreInputs?: boolean;
+    /** Configuración de sensibilidad para gestos táctiles */
+    touchOptions?: TouchConfig;
+}
+/**
+ * Valor retornado por el hook useSecretSequence.
+ */
+interface UseSecretSequenceReturn {
+    /** Mapa de progreso actual: { [sequenceId]: stepsCompleted } */
+    progress: Record<string, number>;
+    /** Resetea el progreso de todas las secuencias */
+    reset: () => void;
+}
+/**
+ * Hook de React para detectar secuencias de teclado (Konami codes, combos de teclas)
+ * y gestos táctiles (swipes) usando el engine de secret-sequence-core.
+ *
+ * Gestiona automáticamente el ciclo de vida del engine:
+ * - Se inicia al montar el componente
+ * - Se actualiza reactivamente cuando cambian las opciones
+ * - Se destruye al desmontar el componente
+ *
+ * @example
+ * ```tsx
+ * function App() {
+ *   const { progress } = useSecretSequence({
+ *     sequences: [
+ *       {
+ *         id: "konami",
+ *         sequence: ["up", "up", "down", "down", "left", "right", "left", "right"],
+ *         onSuccess: () => console.log("🎉 Konami activado!"),
+ *       },
+ *     ],
+ *     enableTouch: true,
+ *     touchOptions: { minDistance: 50, maxTime: 400 },
+ *   })
+ *
+ *   return <pre>{JSON.stringify(progress, null, 2)}</pre>
+ * }
+ * ```
+ *
+ * @example Touch-only (sin teclado)
+ * ```tsx
+ * const { progress } = useSecretSequence({
+ *   sequences: [
+ *     {
+ *       id: "swipe-pattern",
+ *       sequence: ["up", "down", "left", "right"],
+ *       onSuccess: () => alert("Patrón de swipe detectado!"),
+ *     },
+ *   ],
+ *   enableTouch: true,
+ *   touchOptions: {
+ *     minDistance: 30,
+ *     maxTime: 300,
+ *     threshold: 1.5,
+ *   },
+ * })
+ * ```
+ */
+declare function useSecretSequence(options: UseSecretSequenceOptions): UseSecretSequenceReturn;
+
+/**
+ * Props del componente SecretSequence.
+ * Idénticas a UseSecretSequenceOptions, con callbacks y render prop opcionales.
+ */
+interface SecretSequenceProps extends UseSecretSequenceOptions {
+    /** Callback invocado cuando cambia el progreso de alguna secuencia */
+    onProgressChange?: (progress: Record<string, number>) => void;
+    /** Render prop opcional para acceder al progreso y reset */
+    children?: (state: {
+        progress: Record<string, number>;
+        reset: () => void;
+    }) => React.ReactNode;
+}
+/**
+ * Componente declarativo para detectar secuencias secretas.
+ * Wrapper JSX sobre el hook `useSecretSequence`.
+ *
+ * Si no se pasa `children`, no renderiza nada.
+ * Si se pasa `children` como render prop, recibe `{ progress, reset }`.
+ *
+ * Soporta todas las funcionalidades del core:
+ * - Secuencias de teclado (direcciones y combos de teclas)
+ * - Gestos táctiles (swipes) con configuración personalizable
+ * - Timeout entre pasos
+ * - Ignorar inputs/textareas
+ *
+ * @example Modo invisible (solo efecto)
+ * ```tsx
+ * <SecretSequence
+ *   sequences={[
+ *     {
+ *       id: "konami",
+ *       sequence: ["up", "up", "down", "down", "left", "right", "left", "right"],
+ *       onSuccess: () => console.log("🎉"),
+ *     },
+ *   ]}
+ *   enableTouch={true}
+ *   touchOptions={{ minDistance: 40 }}
+ * />
+ * ```
+ *
+ * @example Con render prop para mostrar progreso
+ * ```tsx
+ * <SecretSequence
+ *   sequences={[{ id: "code", sequence: ["up", "down"], onSuccess: fn }]}
+ * >
+ *   {({ progress, reset }) => (
+ *     <div>
+ *       <p>Progreso: {JSON.stringify(progress)}</p>
+ *       <button onClick={reset}>Reset</button>
+ *     </div>
+ *   )}
+ * </SecretSequence>
+ * ```
+ */
+declare function SecretSequence(props: SecretSequenceProps): React.ReactNode;
+
+export { SecretSequence, type SecretSequenceProps, type UseSecretSequenceOptions, type UseSecretSequenceReturn, useSecretSequence };

package/dist/index.js

@@ -0,0 +1,118 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  SecretSequence: () => SecretSequence,
+  useSecretSequence: () => useSecretSequence
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/useSecretSequence.ts
+var import_react = require("react");
+var import_secret_sequence_core = require("secret-sequence-core");
+function useSecretSequence(options) {
+  const {
+    sequences,
+    timeout,
+    enabled = true,
+    enableTouch = true,
+    ignoreInputs = true,
+    touchOptions
+  } = options;
+  const [progress, setProgress] = (0, import_react.useState)({});
+  const engineRef = (0, import_react.useRef)(null);
+  const sequencesRef = (0, import_react.useRef)(sequences);
+  sequencesRef.current = sequences;
+  const touchOptionsRef = (0, import_react.useRef)(touchOptions);
+  touchOptionsRef.current = touchOptions;
+  const sequencesKey = JSON.stringify(
+    sequences.map(({ onSuccess, ...rest }) => rest)
+  );
+  const touchOptionsKey = JSON.stringify(touchOptions);
+  (0, import_react.useEffect)(() => {
+    const engineOptions = {
+      sequences: sequencesRef.current,
+      timeout,
+      enabled,
+      enableTouch,
+      ignoreInputs,
+      touchOptions: touchOptionsRef.current,
+      onProgress: (_id, _step) => {
+        if (engineRef.current) {
+          setProgress(engineRef.current.getProgressMap());
+        }
+      }
+    };
+    const engine = new import_secret_sequence_core.SecretSequenceEngine(engineOptions);
+    engineRef.current = engine;
+    setProgress(engine.getProgressMap());
+    engine.start();
+    return () => {
+      engine.destroy();
+      engineRef.current = null;
+    };
+  }, [timeout, enabled, enableTouch, ignoreInputs]);
+  (0, import_react.useEffect)(() => {
+    if (!engineRef.current) return;
+    engineRef.current.setOptions({
+      sequences: sequencesRef.current,
+      touchOptions: touchOptionsRef.current,
+      onProgress: () => {
+        if (engineRef.current) {
+          setProgress(engineRef.current.getProgressMap());
+        }
+      }
+    });
+    setProgress(engineRef.current.getProgressMap());
+  }, [sequencesKey, touchOptionsKey]);
+  const reset = (0, import_react.useCallback)(() => {
+    if (engineRef.current) {
+      engineRef.current.reset();
+      setProgress(engineRef.current.getProgressMap());
+    }
+  }, []);
+  return { progress, reset };
+}
+
+// src/SecretSequence.tsx
+var import_react2 = require("react");
+function SecretSequence(props) {
+  const {
+    onProgressChange,
+    children,
+    ...hookOptions
+  } = props;
+  const { progress, reset } = useSecretSequence(hookOptions);
+  (0, import_react2.useEffect)(() => {
+    if (onProgressChange) {
+      onProgressChange(progress);
+    }
+  }, [progress, onProgressChange]);
+  if (typeof children === "function") {
+    return children({ progress, reset });
+  }
+  return null;
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  SecretSequence,
+  useSecretSequence
+});

package/dist/index.mjs

@@ -0,0 +1,92 @@
+// src/useSecretSequence.ts
+import { useEffect, useRef, useState, useCallback } from "react";
+import {
+  SecretSequenceEngine
+} from "secret-sequence-core";
+function useSecretSequence(options) {
+  const {
+    sequences,
+    timeout,
+    enabled = true,
+    enableTouch = true,
+    ignoreInputs = true,
+    touchOptions
+  } = options;
+  const [progress, setProgress] = useState({});
+  const engineRef = useRef(null);
+  const sequencesRef = useRef(sequences);
+  sequencesRef.current = sequences;
+  const touchOptionsRef = useRef(touchOptions);
+  touchOptionsRef.current = touchOptions;
+  const sequencesKey = JSON.stringify(
+    sequences.map(({ onSuccess, ...rest }) => rest)
+  );
+  const touchOptionsKey = JSON.stringify(touchOptions);
+  useEffect(() => {
+    const engineOptions = {
+      sequences: sequencesRef.current,
+      timeout,
+      enabled,
+      enableTouch,
+      ignoreInputs,
+      touchOptions: touchOptionsRef.current,
+      onProgress: (_id, _step) => {
+        if (engineRef.current) {
+          setProgress(engineRef.current.getProgressMap());
+        }
+      }
+    };
+    const engine = new SecretSequenceEngine(engineOptions);
+    engineRef.current = engine;
+    setProgress(engine.getProgressMap());
+    engine.start();
+    return () => {
+      engine.destroy();
+      engineRef.current = null;
+    };
+  }, [timeout, enabled, enableTouch, ignoreInputs]);
+  useEffect(() => {
+    if (!engineRef.current) return;
+    engineRef.current.setOptions({
+      sequences: sequencesRef.current,
+      touchOptions: touchOptionsRef.current,
+      onProgress: () => {
+        if (engineRef.current) {
+          setProgress(engineRef.current.getProgressMap());
+        }
+      }
+    });
+    setProgress(engineRef.current.getProgressMap());
+  }, [sequencesKey, touchOptionsKey]);
+  const reset = useCallback(() => {
+    if (engineRef.current) {
+      engineRef.current.reset();
+      setProgress(engineRef.current.getProgressMap());
+    }
+  }, []);
+  return { progress, reset };
+}
+
+// src/SecretSequence.tsx
+import { useEffect as useEffect2 } from "react";
+function SecretSequence(props) {
+  const {
+    onProgressChange,
+    children,
+    ...hookOptions
+  } = props;
+  const { progress, reset } = useSecretSequence(hookOptions);
+  useEffect2(() => {
+    if (onProgressChange) {
+      onProgressChange(progress);
+    }
+  }, [progress, onProgressChange]);
+  if (typeof children === "function") {
+    return children({ progress, reset });
+  }
+  return null;
+}
+export {
+  SecretSequence,
+  useSecretSequence
+};

package/package.json

@@ -0,0 +1,57 @@
+{
+  "name": "secret-sequence-react",
+  "version": "1.0.0",
+  "description": "React hook & component wrapper for secret-sequence-core — detect directional sequences, key combos, and touch gestures",
+  "keywords": [
+    "react",
+    "hook",
+    "keyboard",
+    "stratagem",
+    "konami",
+    "sequence",
+    "shortcut",
+    "input-engine",
+    "helldivers",
+    "key-combo",
+    "easter-egg",
+    "typescript",
+    "touch",
+    "gesture"
+  ],
+  "author": "diego0alonso",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/diego0alonso/secret-sequence.git",
+    "directory": "packages/react"
+  },
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    }
+  },
+  "sideEffects": false,
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsup",
+    "prepublishOnly": "npm run build"
+  },
+  "peerDependencies": {
+    "react": ">=17.0.0",
+    "secret-sequence-core": "^2.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19.0.0",
+    "react": "^19.0.0",
+    "secret-sequence-core": "^2.0.0",
+    "tsup": "^8.0.0",
+    "typescript": "^5.0.0"
+  }
+}