hangman-react-game 1.0.2 → 1.0.4

package/dist/index.d.mts

@@ -0,0 +1,15 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+declare const Game: () => react_jsx_runtime.JSX.Element;
+
+declare const useGame: () => {
+    newWord: () => void;
+    hasEnded: boolean;
+    hasWon: boolean;
+    failedAttempts: number;
+    guessLetter: (letter: string) => Promise<void>;
+    guessedLetters: string[];
+    word: string;
+};
+
+export { Game, useGame };

package/dist/index.mjs

@@ -0,0 +1,223 @@
+// src/hooks/useGame.tsx
+import { useEffect, useState } from "react";
+var MAX_FAILED_ATTEMPTS = 10;
+var wordDictionary = [
+  "apple",
+  "banana",
+  "cherry",
+  "date",
+  "elderberry",
+  "fig",
+  "grape",
+  "honeydew",
+  "kiwi",
+  "lemon",
+  "mango",
+  "nectarine",
+  "orange",
+  "papaya",
+  "quince",
+  "raspberry",
+  "strawberry",
+  "tangerine",
+  "ugli",
+  "vanilla",
+  "watermelon",
+  "xigua",
+  "yellow",
+  "zucchini",
+  "abstract",
+  "breeze",
+  "cactus",
+  "dolphin",
+  "eagle",
+  "forest",
+  "giraffe",
+  "horizon",
+  "island",
+  "jungle",
+  "kaleidoscope",
+  "lighthouse",
+  "mountain",
+  "nebula",
+  "ocean",
+  "prairie",
+  "quasar",
+  "rainbow",
+  "sunrise",
+  "tornado",
+  "universe",
+  "volcano",
+  "whale",
+  "xerox",
+  "yacht",
+  "zephyr",
+  "albatross",
+  "butterfly",
+  "chameleon",
+  "dinosaur",
+  "elephant",
+  "flamingo",
+  "gazelle",
+  "hippopotamus",
+  "iguana",
+  "jellyfish",
+  "kangaroo",
+  "lion",
+  "monkey",
+  "narwhal",
+  "octopus",
+  "penguin",
+  "quail",
+  "rhinoceros",
+  "squirrel",
+  "turtle",
+  "umbrella",
+  "vulture",
+  "walrus",
+  "xylophone",
+  "yak",
+  "zebra",
+  "astronomy",
+  "biology",
+  "chemistry",
+  "democracy",
+  "ecosystem",
+  "fossil",
+  "genetics",
+  "hypothesis",
+  "innovation",
+  "jurisdiction",
+  "kinetic",
+  "laboratory",
+  "meteorology",
+  "neuroscience",
+  "observation",
+  "physics",
+  "quantum",
+  "robotics",
+  "synthesis",
+  "theorem",
+  "unicorn",
+  "velocity",
+  "wavelength",
+  "xenon",
+  "youth",
+  "zenith",
+  "bamboozlement",
+  "flabbergasted",
+  "hypothetical",
+  "juxtaposition",
+  "labyrinthine",
+  "nebulousness",
+  "quintessential",
+  "sesquipedalian",
+  "transcendental",
+  "unpredictable",
+  "verisimilitude",
+  "whippersnapper",
+  "xenotransplant",
+  "yesteryear",
+  "zigzaggedness"
+];
+var useGame = () => {
+  const [word, setWord] = useState("");
+  const [guessedLetters, setGuessedLetters] = useState([]);
+  const [failedAttempts, setFailedAttempts] = useState(0);
+  const [hasEnded, setHasEnded] = useState(false);
+  const [hasWon, setHasWon] = useState(false);
+  const censorWord = (w) => w.split("").map((x) => (guessedLetters.includes(x) || x === " " ? x : "_") + " ").join("");
+  const newWord = () => setWord(wordDictionary[Math.floor(Math.random() * wordDictionary.length)]);
+  const guessLetter = async (letter) => {
+    if (!hasEnded && letter.length === 1) {
+      if (!word.includes(letter))
+        setFailedAttempts(failedAttempts + 1);
+      setGuessedLetters([...guessedLetters, letter]);
+    }
+  };
+  useEffect(() => newWord(), []);
+  useEffect(() => {
+    setGuessedLetters([]);
+    setFailedAttempts(0);
+    setHasEnded(false);
+    setHasWon(false);
+  }, [word]);
+  useEffect(() => {
+    if (failedAttempts >= MAX_FAILED_ATTEMPTS)
+      setHasEnded(true);
+  }, [failedAttempts]);
+  useEffect(() => {
+    if (word && !censorWord(word).includes("_")) {
+      setHasWon(true);
+      setHasEnded(true);
+    }
+  }, [guessedLetters]);
+  return {
+    newWord,
+    hasEnded,
+    hasWon,
+    failedAttempts,
+    guessLetter,
+    guessedLetters,
+    word: hasEnded ? word : censorWord(word)
+  };
+};
+var useGame_default = useGame;
+
+// src/components/Hangman.tsx
+import { useEffect as useEffect2 } from "react";
+import { jsx } from "react/jsx-runtime";
+var Hangman = ({ failedAttempts }) => {
+  useEffect2(() => {
+  }, [failedAttempts]);
+  const hangmanParts = [
+    // ROD
+    /* @__PURE__ */ jsx("line", { x1: "20", y1: "230", x2: "100", y2: "230", stroke: "black" }),
+    /* @__PURE__ */ jsx("line", { x1: "60", y1: "20", x2: "60", y2: "230", stroke: "black" }),
+    /* @__PURE__ */ jsx("line", { x1: "60", y1: "20", x2: "140", y2: "20", stroke: "black" }),
+    /* @__PURE__ */ jsx("line", { x1: "140", y1: "20", x2: "140", y2: "50", stroke: "black" }),
+    // HEAD
+    /* @__PURE__ */ jsx("circle", { cx: "140", cy: "70", r: "20", stroke: "black" }),
+    // BODY
+    /* @__PURE__ */ jsx("line", { x1: "140", y1: "90", x2: "140", y2: "150", stroke: "black" }),
+    // ARMS
+    /* @__PURE__ */ jsx("line", { x1: "140", y1: "120", x2: "120", y2: "100", stroke: "black" }),
+    /* @__PURE__ */ jsx("line", { x1: "140", y1: "120", x2: "160", y2: "100", stroke: "black" }),
+    // LEGS
+    /* @__PURE__ */ jsx("line", { x1: "140", y1: "150", x2: "120", y2: "180", stroke: "black" }),
+    /* @__PURE__ */ jsx("line", { x1: "140", y1: "150", x2: "160", y2: "180", stroke: "black" })
+  ];
+  return /* @__PURE__ */ jsx("svg", { height: "250", width: "200", children: hangmanParts.slice(0, failedAttempts) });
+};
+var Hangman_default = Hangman;
+
+// src/components/Game.tsx
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+var Game = () => {
+  const {
+    newWord,
+    hasEnded,
+    hasWon,
+    failedAttempts,
+    guessLetter,
+    guessedLetters,
+    word
+  } = useGame_default();
+  return /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsx2("h1", { children: "Hangman game" }),
+    /* @__PURE__ */ jsx2("div", { className: "word", children: /* @__PURE__ */ jsx2("p", { children: word }) }),
+    /* @__PURE__ */ jsx2("div", { className: "hangman-illustrtion", children: /* @__PURE__ */ jsx2(Hangman_default, { failedAttempts }) }),
+    /* @__PURE__ */ jsx2("div", { className: "guessButtons", children: "abcdefghijklmnopqrstuvwxyz".split("").map((x) => /* @__PURE__ */ jsx2("button", { onClick: () => guessLetter(x), disabled: hasEnded || guessedLetters.includes(x), children: x }, x)) }),
+    hasEnded && /* @__PURE__ */ jsxs("div", { className: "game-over", children: [
+      hasWon && /* @__PURE__ */ jsx2("h1", { children: "Yay, you won" }),
+      !hasWon && /* @__PURE__ */ jsx2("h1", { children: "Too bad, you lose" })
+    ] }),
+    /* @__PURE__ */ jsx2("button", { onClick: newWord, children: "New word" })
+  ] });
+};
+var Game_default = Game;
+export {
+  Game_default as Game,
+  useGame_default as useGame
+};
+//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/hooks/useGame.tsx","../src/components/Hangman.tsx","../src/components/Game.tsx"],"sourcesContent":["import {useEffect, useState} from \"react\";\r\n\r\nconst MAX_FAILED_ATTEMPTS = 10;\r\nconst wordDictionary = [\r\n    \"apple\",\r\n    \"banana\",\r\n    \"cherry\",\r\n    \"date\",\r\n    \"elderberry\",\r\n    \"fig\",\r\n    \"grape\",\r\n    \"honeydew\",\r\n    \"kiwi\",\r\n    \"lemon\",\r\n    \"mango\",\r\n    \"nectarine\",\r\n    \"orange\",\r\n    \"papaya\",\r\n    \"quince\",\r\n    \"raspberry\",\r\n    \"strawberry\",\r\n    \"tangerine\",\r\n    \"ugli\",\r\n    \"vanilla\",\r\n    \"watermelon\",\r\n    \"xigua\",\r\n    \"yellow\",\r\n    \"zucchini\",\r\n    \"abstract\",\r\n    \"breeze\",\r\n    \"cactus\",\r\n    \"dolphin\",\r\n    \"eagle\",\r\n    \"forest\",\r\n    \"giraffe\",\r\n    \"horizon\",\r\n    \"island\",\r\n    \"jungle\",\r\n    \"kaleidoscope\",\r\n    \"lighthouse\",\r\n    \"mountain\",\r\n    \"nebula\",\r\n    \"ocean\",\r\n    \"prairie\",\r\n    \"quasar\",\r\n    \"rainbow\",\r\n    \"sunrise\",\r\n    \"tornado\",\r\n    \"universe\",\r\n    \"volcano\",\r\n    \"whale\",\r\n    \"xerox\",\r\n    \"yacht\",\r\n    \"zephyr\",\r\n    \"albatross\",\r\n    \"butterfly\",\r\n    \"chameleon\",\r\n    \"dinosaur\",\r\n    \"elephant\",\r\n    \"flamingo\",\r\n    \"gazelle\",\r\n    \"hippopotamus\",\r\n    \"iguana\",\r\n    \"jellyfish\",\r\n    \"kangaroo\",\r\n    \"lion\",\r\n    \"monkey\",\r\n    \"narwhal\",\r\n    \"octopus\",\r\n    \"penguin\",\r\n    \"quail\",\r\n    \"rhinoceros\",\r\n    \"squirrel\",\r\n    \"turtle\",\r\n    \"umbrella\",\r\n    \"vulture\",\r\n    \"walrus\",\r\n    \"xylophone\",\r\n    \"yak\",\r\n    \"zebra\",\r\n    \"astronomy\",\r\n    \"biology\",\r\n    \"chemistry\",\r\n    \"democracy\",\r\n    \"ecosystem\",\r\n    \"fossil\",\r\n    \"genetics\",\r\n    \"hypothesis\",\r\n    \"innovation\",\r\n    \"jurisdiction\",\r\n    \"kinetic\",\r\n    \"laboratory\",\r\n    \"meteorology\",\r\n    \"neuroscience\",\r\n    \"observation\",\r\n    \"physics\",\r\n    \"quantum\",\r\n    \"robotics\",\r\n    \"synthesis\",\r\n    \"theorem\",\r\n    \"unicorn\",\r\n    \"velocity\",\r\n    \"wavelength\",\r\n    \"xenon\",\r\n    \"youth\",\r\n    \"zenith\",\r\n    \"bamboozlement\",\r\n    \"flabbergasted\",\r\n    \"hypothetical\",\r\n    \"juxtaposition\",\r\n    \"labyrinthine\",\r\n    \"nebulousness\",\r\n    \"quintessential\",\r\n    \"sesquipedalian\",\r\n    \"transcendental\",\r\n    \"unpredictable\",\r\n    \"verisimilitude\",\r\n    \"whippersnapper\",\r\n    \"xenotransplant\",\r\n    \"yesteryear\",\r\n    \"zigzaggedness\"\r\n];\r\n\r\nconst useGame = () => {\r\n    // Should fetch random word from a dictionary (maybe vary by language)\r\n    const [word, setWord] = useState(\"\");\r\n    const [guessedLetters, setGuessedLetters] = useState<string[]>([]);\r\n    const [failedAttempts, setFailedAttempts] = useState<number>(0);\r\n    const [hasEnded, setHasEnded] = useState(false);\r\n    const [hasWon, setHasWon] = useState(false);\r\n\r\n    const censorWord = (w: string) => w.split(\"\").map(x => (guessedLetters.includes(x) || x === \" \" ? x : \"_\") + \" \").join(\"\");\r\n    const newWord = () => setWord( wordDictionary[Math.floor( Math.random() * wordDictionary.length )]);\r\n    \r\n    const guessLetter = async (letter : string) => {\r\n        if(!hasEnded && letter.length === 1){\r\n            if(!word.includes(letter)) \r\n                setFailedAttempts(failedAttempts+1);\r\n            setGuessedLetters([...guessedLetters, letter]);\r\n        }\r\n    }\r\n    \r\n    useEffect(()=> newWord(), [])\r\n    useEffect(()=> {\r\n        setGuessedLetters([]);\r\n        setFailedAttempts(0);\r\n        setHasEnded(false);\r\n        setHasWon(false);\r\n    }, [word]);\r\n    \r\n    useEffect(()=> {\r\n        if(failedAttempts >= MAX_FAILED_ATTEMPTS)\r\n            setHasEnded(true);\r\n    }, [failedAttempts]);\r\n    \r\n    useEffect(()=> {\r\n        if(word && !censorWord(word).includes(\"_\")) {\r\n            setHasWon(true);\r\n            setHasEnded(true);\r\n        }\r\n    }, [guessedLetters]);\r\n\r\n    return {\r\n        newWord,\r\n        hasEnded,\r\n        hasWon,\r\n        failedAttempts,\r\n        guessLetter,\r\n        guessedLetters,\r\n        word : hasEnded ? word : censorWord(word)\r\n    };\r\n}\r\nexport default useGame;","import { ReactElement, useEffect } from \"react\";\r\n\r\ntype HangmanProps = {\r\n  failedAttempts: number\r\n}\r\n\r\nconst Hangman = ({failedAttempts} : HangmanProps) => {\r\n  useEffect(() => {}, [failedAttempts]);\r\n  const hangmanParts : ReactElement[] = [\r\n    // ROD\r\n    <line x1=\"20\" y1=\"230\" x2=\"100\" y2=\"230\" stroke=\"black\" />,\r\n    <line x1=\"60\" y1=\"20\" x2=\"60\" y2=\"230\" stroke=\"black\" />,\r\n    <line x1=\"60\" y1=\"20\" x2=\"140\" y2=\"20\" stroke=\"black\" />,\r\n    <line x1=\"140\" y1=\"20\" x2=\"140\" y2=\"50\" stroke=\"black\" />,\r\n    // HEAD\r\n    <circle cx=\"140\" cy=\"70\" r=\"20\" stroke=\"black\" />,\r\n    // BODY\r\n    <line x1=\"140\" y1=\"90\" x2=\"140\" y2=\"150\" stroke=\"black\" />,\r\n    // ARMS\r\n    <line x1=\"140\" y1=\"120\" x2=\"120\" y2=\"100\" stroke=\"black\" />,\r\n    <line x1=\"140\" y1=\"120\" x2=\"160\" y2=\"100\" stroke=\"black\" />,\r\n    // LEGS\r\n    <line x1=\"140\" y1=\"150\" x2=\"120\" y2=\"180\" stroke=\"black\" />,\r\n    <line x1=\"140\" y1=\"150\" x2=\"160\" y2=\"180\" stroke=\"black\" />\r\n  ];\r\n  return (\r\n      <svg height=\"250\" width=\"200\">\r\n        {hangmanParts.slice(0, failedAttempts)}\r\n    </svg>\r\n  )\r\n}\r\nexport default Hangman;","import useGame from \"../hooks/useGame\";\r\nimport Hangman from \"./Hangman\";\r\n\r\nconst Game = () => {\r\n    const {\r\n        newWord,\r\n        hasEnded,\r\n        hasWon,\r\n        failedAttempts,\r\n        guessLetter,\r\n        guessedLetters,\r\n        word \r\n    } = useGame();\r\n    return (\r\n        <div>\r\n            <h1>Hangman game</h1>\r\n            <div className=\"word\">\r\n                <p>{word}</p>\r\n            </div>\r\n            <div className=\"hangman-illustrtion\">\r\n                <Hangman failedAttempts={failedAttempts} />\r\n            </div>\r\n            <div className=\"guessButtons\">\r\n                {\"abcdefghijklmnopqrstuvwxyz\".split(\"\").map(x => (\r\n                    <button key={x} onClick={() => guessLetter(x)} disabled={hasEnded || guessedLetters.includes(x)}>{x}</button>\r\n                ))}\r\n            </div>\r\n            {hasEnded && (\r\n                <div className=\"game-over\">\r\n                    {hasWon && (<h1>Yay, you won</h1>)}\r\n                    {!hasWon && (<h1>Too bad, you lose</h1>)}\r\n                </div>\r\n            )}\r\n            <button onClick={newWord}>New word</button>\r\n        </div>\r\n    )\r\n};\r\nexport default Game;"],"mappings":";AAAA,SAAQ,WAAW,gBAAe;AAElC,IAAM,sBAAsB;AAC5B,IAAM,iBAAiB;AAAA,EACnB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;A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","names":["useEffect","jsx"]}

package/package.json

@@ -1,29 +1,31 @@
 {
   "name": "hangman-react-game",
-  "version": "1.0.2",
-  "main": "dist/index.cjs",
-  "module": "dist/index.mjs",
+  "version": "1.0.4",
+  "main": "dist/index.js",
+  "module": "dist/index.js",
+  "types": "dist/types/index.d.ts",
   "exports": {
     ".": {
-      "import": "./dist/index.mjs",
-      "require": "./dist/index.cjs"
+      "import": "./dist/index.js",
+      "types": "./dist/types/index.d.ts"
     }
   },
   "scripts": {
-    "build": "rollup -c"
+    "build": "tsup"
   },
   "peerDependencies": {
     "react": "^19.0.0",
     "react-dom": "^19.0.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.20.0",
-    "@babel/preset-env": "^7.20.0",
-    "@babel/preset-react": "^7.18.6",
     "@rollup/plugin-babel": "^6.0.3",
-    "@rollup/plugin-node-resolve": "^15.0.1",
     "@rollup/plugin-commonjs": "^24.0.1",
-    "rollup": "^3.29.0"
+    "@rollup/plugin-node-resolve": "^15.0.1",
+    "@types/react": "^19.1.13",
+    "@types/react-dom": "^19.1.9",
+    "rollup": "^3.29.0",
+    "tsup": "^8.5.0",
+    "typescript": "^5.9.2"
   },
   "author": "Isak Hølleland",
   "license": "MIT"

package/src/components/{Game.jsx → Game.tsx}

@@ -1,5 +1,5 @@
-import useGame from "../hooks/useGame.jsx";
-import Hangman from "./Hangman.jsx";
+import useGame from "../hooks/useGame";
+import Hangman from "./Hangman";
 
 const Game = () => {
     const {

package/src/components/{Hangman.jsx → Hangman.tsx}

@@ -1,8 +1,12 @@
-import { useEffect } from "react";
+import { ReactElement, useEffect } from "react";
 
-const Hangman = ({failedAttempts}) => {
+type HangmanProps = {
+  failedAttempts: number
+}
+
+const Hangman = ({failedAttempts} : HangmanProps) => {
   useEffect(() => {}, [failedAttempts]);
-  const hangmanParts = [
+  const hangmanParts : ReactElement[] = [
     // ROD
     <line x1="20" y1="230" x2="100" y2="230" stroke="black" />,
     <line x1="60" y1="20" x2="60" y2="230" stroke="black" />,
@@ -18,10 +22,10 @@ const Hangman = ({failedAttempts}) => {
     // LEGS
     <line x1="140" y1="150" x2="120" y2="180" stroke="black" />,
     <line x1="140" y1="150" x2="160" y2="180" stroke="black" />
-  ].subarray(0, failedAttempts)
+  ];
   return (
       <svg height="250" width="200">
-        {hangmanParts}
+        {hangmanParts.slice(0, failedAttempts)}
     </svg>
   )
 }

package/src/hooks/{useGame.jsx → useGame.tsx}

@@ -124,15 +124,15 @@ const wordDictionary = [
 const useGame = () => {
     // Should fetch random word from a dictionary (maybe vary by language)
     const [word, setWord] = useState("");
-    const [guessedLetters, setGuessedLetters] = useState([]);
-    const [failedAttempts, setFailedAttempts] = useState(0);
+    const [guessedLetters, setGuessedLetters] = useState<string[]>([]);
+    const [failedAttempts, setFailedAttempts] = useState<number>(0);
     const [hasEnded, setHasEnded] = useState(false);
     const [hasWon, setHasWon] = useState(false);
 
-    const censorWord = (w) => w.split("").map(x => (guessedLetters.includes(x) || x === " " ? x : "_") + " ").join("");
+    const censorWord = (w: string) => w.split("").map(x => (guessedLetters.includes(x) || x === " " ? x : "_") + " ").join("");
     const newWord = () => setWord( wordDictionary[Math.floor( Math.random() * wordDictionary.length )]);
     
-    const guessLetter = async (letter) => {
+    const guessLetter = async (letter : string) => {
         if(!hasEnded && letter.length === 1){
             if(!word.includes(letter)) 
                 setFailedAttempts(failedAttempts+1);

package/src/index.tsx

@@ -0,0 +1,4 @@
+import Game from "./components/Game";
+import useGame from "./hooks/useGame";
+
+export {Game, useGame};

package/tsconfig.json

@@ -0,0 +1,15 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "module": "ESNext",
+    "jsx": "react-jsx",
+    "declaration": true,
+    "declarationDir": "dist/types",
+    "outDir": "dist",
+    "strict": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "moduleResolution": "node"
+  },
+  "include": ["src"]
+}

package/tsup.config.ts

@@ -0,0 +1,10 @@
+import { defineConfig } from 'tsup';
+
+export default defineConfig({
+  entry: ['src/index.tsx'],
+  format: ['esm'],
+  dts: true,
+  sourcemap: true,
+  clean: true,
+  external: ['react', 'react-dom'],
+});

package/.babelrc

@@ -1,3 +0,0 @@
-{
-  "presets": ["@babel/preset-env", "@babel/preset-react"]
-}