bongocat-react 1.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +21 -0
- package/README.md +70 -0
- package/assets/base.png +0 -0
- package/assets/left-down.png +0 -0
- package/assets/left-up.png +0 -0
- package/assets/right-down.png +0 -0
- package/assets/right-up.png +0 -0
- package/dist/index.d.mts +28 -0
- package/dist/index.d.ts +28 -0
- package/dist/index.js +230 -0
- package/dist/index.js.map +1 -0
- package/dist/index.mjs +203 -0
- package/dist/index.mjs.map +1 -0
- package/package.json +50 -0
package/LICENSE
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2026 kaustubhxd
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
package/README.md
ADDED
|
@@ -0,0 +1,70 @@
|
|
|
1
|
+
# bongocat-react
|
|
2
|
+
|
|
3
|
+
A React component that adds an animated BongoCat overlay to your app. The cat reacts to keyboard typing and mouse clicks in real-time.
|
|
4
|
+
|
|
5
|
+
Based on the sprite system from [BongoCat-mac](https://github.com/Gamma-Software/BongoCat-mac) (MIT licensed).
|
|
6
|
+
|
|
7
|
+
## Install
|
|
8
|
+
|
|
9
|
+
```bash
|
|
10
|
+
npm install bongocat-react
|
|
11
|
+
```
|
|
12
|
+
|
|
13
|
+
## Setup
|
|
14
|
+
|
|
15
|
+
1. Copy the 5 sprite PNGs into your public directory (e.g. `public/bongo-cat/`):
|
|
16
|
+
- `base.png` — cat body
|
|
17
|
+
- `left-up.png` / `left-down.png` — left paw states
|
|
18
|
+
- `right-up.png` / `right-down.png` — right paw states
|
|
19
|
+
|
|
20
|
+
You can find the original sprites in the `assets/` folder of this repo.
|
|
21
|
+
|
|
22
|
+
2. Add the component:
|
|
23
|
+
|
|
24
|
+
```tsx
|
|
25
|
+
import { BongoCat } from "bongocat-react";
|
|
26
|
+
|
|
27
|
+
function App() {
|
|
28
|
+
return (
|
|
29
|
+
<div>
|
|
30
|
+
<BongoCat />
|
|
31
|
+
</div>
|
|
32
|
+
);
|
|
33
|
+
}
|
|
34
|
+
```
|
|
35
|
+
|
|
36
|
+
## Props
|
|
37
|
+
|
|
38
|
+
| Prop | Type | Default | Description |
|
|
39
|
+
|------|------|---------|-------------|
|
|
40
|
+
| `assetsPath` | `string` | `"/bongo-cat"` | Base URL path to sprite PNGs |
|
|
41
|
+
| `bottom` | `number \| string` | `16` | CSS bottom offset |
|
|
42
|
+
| `right` | `number \| string` | `16` | CSS right offset |
|
|
43
|
+
| `width` | `number` | `65` | Container width in px |
|
|
44
|
+
| `height` | `number` | `40` | Container height in px |
|
|
45
|
+
| `zIndex` | `number` | `9998` | z-index of the overlay |
|
|
46
|
+
| `pulse` | `boolean` | `true` | Scale pulse animation on input |
|
|
47
|
+
| `spriteMarginTop` | `string \| number` | `"37%"` | Margin-top on sprites to ground the cat visually |
|
|
48
|
+
| `className` | `string` | `""` | Additional CSS class |
|
|
49
|
+
| `style` | `CSSProperties` | — | Additional inline styles |
|
|
50
|
+
|
|
51
|
+
## Privacy
|
|
52
|
+
|
|
53
|
+
This package does not track, collect, or transmit any data. No analytics, no telemetry, no cookies. It's intentionally kept simple — just a lil kitty reacting to your keystrokes and clicks, entirely client-side.
|
|
54
|
+
|
|
55
|
+
## How it works
|
|
56
|
+
|
|
57
|
+
- Listens to `keydown`/`keyup` on `document` and `mousedown`/`mouseup` on `window` (capture phase)
|
|
58
|
+
- Maps physical key positions (`event.code`) to left/right paw — left-half keyboard keys move the left paw, right-half keys move the right paw
|
|
59
|
+
- Left mouse click → left paw, right click → right paw
|
|
60
|
+
- `pointer-events: none` — the cat never intercepts your clicks
|
|
61
|
+
- Handles context menu stealing mouseup events
|
|
62
|
+
|
|
63
|
+
## Credits
|
|
64
|
+
|
|
65
|
+
- Built using [BongoCat-mac](https://github.com/Gamma-Software/BongoCat-mac) by Valentin Rudloff as reference — the sprite system and paw state machine were adapted from that project (MIT licensed)
|
|
66
|
+
- Original BongoCat meme by [@DitzyFlama](https://twitter.com/DitzyFlama), cat art by [@StrayRogue](https://twitter.com/StrayRogue)
|
|
67
|
+
|
|
68
|
+
## License
|
|
69
|
+
|
|
70
|
+
MIT
|
package/assets/base.png
ADDED
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
package/dist/index.d.mts
ADDED
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
+
import { CSSProperties } from 'react';
|
|
3
|
+
|
|
4
|
+
interface BongoCatProps {
|
|
5
|
+
/** Base URL path to the sprite assets directory (must contain base.png, left-up.png, left-down.png, right-up.png, right-down.png). Defaults to "/bongo-cat" */
|
|
6
|
+
assetsPath?: string;
|
|
7
|
+
/** CSS bottom offset. Defaults to 16 */
|
|
8
|
+
bottom?: number | string;
|
|
9
|
+
/** CSS right offset. Defaults to 16 */
|
|
10
|
+
right?: number | string;
|
|
11
|
+
/** Width in px. Defaults to 65 */
|
|
12
|
+
width?: number;
|
|
13
|
+
/** Height in px. Defaults to 40 */
|
|
14
|
+
height?: number;
|
|
15
|
+
/** z-index. Defaults to 9998 */
|
|
16
|
+
zIndex?: number;
|
|
17
|
+
/** Enable scale pulse on input. Defaults to true */
|
|
18
|
+
pulse?: boolean;
|
|
19
|
+
/** Margin-top applied to each sprite image to ground the cat visually. Defaults to "37%" */
|
|
20
|
+
spriteMarginTop?: string | number;
|
|
21
|
+
/** Additional className on the container */
|
|
22
|
+
className?: string;
|
|
23
|
+
/** Additional inline styles on the container */
|
|
24
|
+
style?: CSSProperties;
|
|
25
|
+
}
|
|
26
|
+
declare function BongoCat({ assetsPath, bottom, right, width, height, zIndex, pulse: pulseEnabled, spriteMarginTop, className, style: userStyle, }?: BongoCatProps): react_jsx_runtime.JSX.Element;
|
|
27
|
+
|
|
28
|
+
export { BongoCat, type BongoCatProps };
|
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
+
import { CSSProperties } from 'react';
|
|
3
|
+
|
|
4
|
+
interface BongoCatProps {
|
|
5
|
+
/** Base URL path to the sprite assets directory (must contain base.png, left-up.png, left-down.png, right-up.png, right-down.png). Defaults to "/bongo-cat" */
|
|
6
|
+
assetsPath?: string;
|
|
7
|
+
/** CSS bottom offset. Defaults to 16 */
|
|
8
|
+
bottom?: number | string;
|
|
9
|
+
/** CSS right offset. Defaults to 16 */
|
|
10
|
+
right?: number | string;
|
|
11
|
+
/** Width in px. Defaults to 65 */
|
|
12
|
+
width?: number;
|
|
13
|
+
/** Height in px. Defaults to 40 */
|
|
14
|
+
height?: number;
|
|
15
|
+
/** z-index. Defaults to 9998 */
|
|
16
|
+
zIndex?: number;
|
|
17
|
+
/** Enable scale pulse on input. Defaults to true */
|
|
18
|
+
pulse?: boolean;
|
|
19
|
+
/** Margin-top applied to each sprite image to ground the cat visually. Defaults to "37%" */
|
|
20
|
+
spriteMarginTop?: string | number;
|
|
21
|
+
/** Additional className on the container */
|
|
22
|
+
className?: string;
|
|
23
|
+
/** Additional inline styles on the container */
|
|
24
|
+
style?: CSSProperties;
|
|
25
|
+
}
|
|
26
|
+
declare function BongoCat({ assetsPath, bottom, right, width, height, zIndex, pulse: pulseEnabled, spriteMarginTop, className, style: userStyle, }?: BongoCatProps): react_jsx_runtime.JSX.Element;
|
|
27
|
+
|
|
28
|
+
export { BongoCat, type BongoCatProps };
|
package/dist/index.js
ADDED
|
@@ -0,0 +1,230 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __defProp = Object.defineProperty;
|
|
3
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
6
|
+
var __export = (target, all) => {
|
|
7
|
+
for (var name in all)
|
|
8
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
9
|
+
};
|
|
10
|
+
var __copyProps = (to, from, except, desc) => {
|
|
11
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
12
|
+
for (let key of __getOwnPropNames(from))
|
|
13
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
14
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
15
|
+
}
|
|
16
|
+
return to;
|
|
17
|
+
};
|
|
18
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
19
|
+
|
|
20
|
+
// src/index.ts
|
|
21
|
+
var index_exports = {};
|
|
22
|
+
__export(index_exports, {
|
|
23
|
+
BongoCat: () => BongoCat
|
|
24
|
+
});
|
|
25
|
+
module.exports = __toCommonJS(index_exports);
|
|
26
|
+
|
|
27
|
+
// src/bongo-cat.tsx
|
|
28
|
+
var import_react = require("react");
|
|
29
|
+
var import_jsx_runtime = require("react/jsx-runtime");
|
|
30
|
+
var LEFT_KEYS = /* @__PURE__ */ new Set([
|
|
31
|
+
"Digit1",
|
|
32
|
+
"Digit2",
|
|
33
|
+
"Digit3",
|
|
34
|
+
"Digit4",
|
|
35
|
+
"Digit5",
|
|
36
|
+
"KeyQ",
|
|
37
|
+
"KeyW",
|
|
38
|
+
"KeyE",
|
|
39
|
+
"KeyR",
|
|
40
|
+
"KeyT",
|
|
41
|
+
"KeyA",
|
|
42
|
+
"KeyS",
|
|
43
|
+
"KeyD",
|
|
44
|
+
"KeyF",
|
|
45
|
+
"KeyG",
|
|
46
|
+
"KeyZ",
|
|
47
|
+
"KeyX",
|
|
48
|
+
"KeyC",
|
|
49
|
+
"KeyV",
|
|
50
|
+
"KeyB",
|
|
51
|
+
"Tab",
|
|
52
|
+
"CapsLock",
|
|
53
|
+
"ShiftLeft",
|
|
54
|
+
"ControlLeft",
|
|
55
|
+
"AltLeft",
|
|
56
|
+
"MetaLeft",
|
|
57
|
+
"Backquote",
|
|
58
|
+
"Escape"
|
|
59
|
+
]);
|
|
60
|
+
var RIGHT_KEYS = /* @__PURE__ */ new Set([
|
|
61
|
+
"Digit6",
|
|
62
|
+
"Digit7",
|
|
63
|
+
"Digit8",
|
|
64
|
+
"Digit9",
|
|
65
|
+
"Digit0",
|
|
66
|
+
"KeyY",
|
|
67
|
+
"KeyU",
|
|
68
|
+
"KeyI",
|
|
69
|
+
"KeyO",
|
|
70
|
+
"KeyP",
|
|
71
|
+
"KeyH",
|
|
72
|
+
"KeyJ",
|
|
73
|
+
"KeyK",
|
|
74
|
+
"KeyL",
|
|
75
|
+
"KeyN",
|
|
76
|
+
"KeyM",
|
|
77
|
+
"Enter",
|
|
78
|
+
"Backspace",
|
|
79
|
+
"Delete",
|
|
80
|
+
"ShiftRight",
|
|
81
|
+
"ControlRight",
|
|
82
|
+
"AltRight",
|
|
83
|
+
"MetaRight",
|
|
84
|
+
"BracketLeft",
|
|
85
|
+
"BracketRight",
|
|
86
|
+
"Backslash",
|
|
87
|
+
"Semicolon",
|
|
88
|
+
"Quote",
|
|
89
|
+
"Comma",
|
|
90
|
+
"Period",
|
|
91
|
+
"Slash",
|
|
92
|
+
"Minus",
|
|
93
|
+
"Equal",
|
|
94
|
+
"ArrowUp",
|
|
95
|
+
"ArrowDown",
|
|
96
|
+
"ArrowLeft",
|
|
97
|
+
"ArrowRight"
|
|
98
|
+
]);
|
|
99
|
+
var MIN_ANIMATION_MS = 100;
|
|
100
|
+
var baseImgStyle = {
|
|
101
|
+
position: "absolute",
|
|
102
|
+
inset: 0,
|
|
103
|
+
width: "100%",
|
|
104
|
+
height: "100%",
|
|
105
|
+
objectFit: "contain",
|
|
106
|
+
pointerEvents: "none"
|
|
107
|
+
};
|
|
108
|
+
function BongoCat({
|
|
109
|
+
assetsPath = "/bongo-cat",
|
|
110
|
+
bottom = 16,
|
|
111
|
+
right = 16,
|
|
112
|
+
width = 65,
|
|
113
|
+
height = 40,
|
|
114
|
+
zIndex = 9998,
|
|
115
|
+
pulse: pulseEnabled = true,
|
|
116
|
+
spriteMarginTop = "37%",
|
|
117
|
+
className = "",
|
|
118
|
+
style: userStyle
|
|
119
|
+
} = {}) {
|
|
120
|
+
const [state, setState] = (0, import_react.useState)("idle");
|
|
121
|
+
const [pulse, setPulse] = (0, import_react.useState)(false);
|
|
122
|
+
const pawDownTimeRef = (0, import_react.useRef)(0);
|
|
123
|
+
const idleTimerRef = (0, import_react.useRef)(void 0);
|
|
124
|
+
const basePath = assetsPath.replace(/\/$/, "");
|
|
125
|
+
const imgStyle = {
|
|
126
|
+
...baseImgStyle,
|
|
127
|
+
marginTop: typeof spriteMarginTop === "number" ? `${spriteMarginTop}px` : spriteMarginTop
|
|
128
|
+
};
|
|
129
|
+
const returnToIdle = (0, import_react.useCallback)(() => {
|
|
130
|
+
const elapsed = Date.now() - pawDownTimeRef.current;
|
|
131
|
+
const remaining = Math.max(0, MIN_ANIMATION_MS - elapsed);
|
|
132
|
+
clearTimeout(idleTimerRef.current);
|
|
133
|
+
idleTimerRef.current = setTimeout(() => setState("idle"), remaining);
|
|
134
|
+
}, []);
|
|
135
|
+
const triggerPulse = (0, import_react.useCallback)(() => {
|
|
136
|
+
if (!pulseEnabled) return;
|
|
137
|
+
setPulse(true);
|
|
138
|
+
requestAnimationFrame(() => {
|
|
139
|
+
setTimeout(() => setPulse(false), 150);
|
|
140
|
+
});
|
|
141
|
+
}, [pulseEnabled]);
|
|
142
|
+
(0, import_react.useEffect)(() => {
|
|
143
|
+
const onKeyDown = (e) => {
|
|
144
|
+
if (e.repeat) return;
|
|
145
|
+
pawDownTimeRef.current = Date.now();
|
|
146
|
+
clearTimeout(idleTimerRef.current);
|
|
147
|
+
triggerPulse();
|
|
148
|
+
if (LEFT_KEYS.has(e.code)) {
|
|
149
|
+
setState("leftPawDown");
|
|
150
|
+
} else if (RIGHT_KEYS.has(e.code)) {
|
|
151
|
+
setState("rightPawDown");
|
|
152
|
+
} else {
|
|
153
|
+
setState(e.code.charCodeAt(0) % 2 === 0 ? "leftPawDown" : "rightPawDown");
|
|
154
|
+
}
|
|
155
|
+
};
|
|
156
|
+
const onKeyUp = () => {
|
|
157
|
+
returnToIdle();
|
|
158
|
+
};
|
|
159
|
+
const onMouseDown = (e) => {
|
|
160
|
+
pawDownTimeRef.current = Date.now();
|
|
161
|
+
clearTimeout(idleTimerRef.current);
|
|
162
|
+
triggerPulse();
|
|
163
|
+
if (e.button === 2) {
|
|
164
|
+
setState("rightPawDown");
|
|
165
|
+
} else {
|
|
166
|
+
setState("leftPawDown");
|
|
167
|
+
}
|
|
168
|
+
};
|
|
169
|
+
const onMouseUp = () => {
|
|
170
|
+
returnToIdle();
|
|
171
|
+
};
|
|
172
|
+
const onContextMenu = () => {
|
|
173
|
+
returnToIdle();
|
|
174
|
+
};
|
|
175
|
+
document.addEventListener("keydown", onKeyDown);
|
|
176
|
+
document.addEventListener("keyup", onKeyUp);
|
|
177
|
+
window.addEventListener("mousedown", onMouseDown, true);
|
|
178
|
+
window.addEventListener("mouseup", onMouseUp, true);
|
|
179
|
+
window.addEventListener("contextmenu", onContextMenu, true);
|
|
180
|
+
return () => {
|
|
181
|
+
document.removeEventListener("keydown", onKeyDown);
|
|
182
|
+
document.removeEventListener("keyup", onKeyUp);
|
|
183
|
+
window.removeEventListener("mousedown", onMouseDown, true);
|
|
184
|
+
window.removeEventListener("mouseup", onMouseUp, true);
|
|
185
|
+
window.removeEventListener("contextmenu", onContextMenu, true);
|
|
186
|
+
clearTimeout(idleTimerRef.current);
|
|
187
|
+
};
|
|
188
|
+
}, [returnToIdle, triggerPulse]);
|
|
189
|
+
const leftDown = state === "leftPawDown" || state === "bothPawsDown";
|
|
190
|
+
const rightDown = state === "rightPawDown" || state === "bothPawsDown";
|
|
191
|
+
const containerStyle = {
|
|
192
|
+
position: "fixed",
|
|
193
|
+
bottom: typeof bottom === "number" ? `${bottom}px` : bottom,
|
|
194
|
+
right: typeof right === "number" ? `${right}px` : right,
|
|
195
|
+
width,
|
|
196
|
+
height,
|
|
197
|
+
zIndex,
|
|
198
|
+
pointerEvents: "none",
|
|
199
|
+
userSelect: "none",
|
|
200
|
+
transform: pulse ? "scale(1.08)" : "scale(1)",
|
|
201
|
+
transition: "transform 0.1s ease-out",
|
|
202
|
+
...userStyle
|
|
203
|
+
};
|
|
204
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className, style: containerStyle, children: [
|
|
205
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("img", { src: `${basePath}/base.png`, alt: "", draggable: false, style: imgStyle }),
|
|
206
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
207
|
+
"img",
|
|
208
|
+
{
|
|
209
|
+
src: leftDown ? `${basePath}/left-down.png` : `${basePath}/left-up.png`,
|
|
210
|
+
alt: "",
|
|
211
|
+
draggable: false,
|
|
212
|
+
style: imgStyle
|
|
213
|
+
}
|
|
214
|
+
),
|
|
215
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
216
|
+
"img",
|
|
217
|
+
{
|
|
218
|
+
src: rightDown ? `${basePath}/right-down.png` : `${basePath}/right-up.png`,
|
|
219
|
+
alt: "",
|
|
220
|
+
draggable: false,
|
|
221
|
+
style: imgStyle
|
|
222
|
+
}
|
|
223
|
+
)
|
|
224
|
+
] });
|
|
225
|
+
}
|
|
226
|
+
// Annotate the CommonJS export names for ESM import in node:
|
|
227
|
+
0 && (module.exports = {
|
|
228
|
+
BongoCat
|
|
229
|
+
});
|
|
230
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/index.ts","../src/bongo-cat.tsx"],"sourcesContent":["export { BongoCat } from \"./bongo-cat\";\nexport type { BongoCatProps } from \"./bongo-cat\";\n","import { useState, useEffect, useRef, useCallback, CSSProperties } from \"react\";\n\ntype CatState = \"idle\" | \"leftPawDown\" | \"rightPawDown\" | \"bothPawsDown\";\n\nexport interface BongoCatProps {\n /** Base URL path to the sprite assets directory (must contain base.png, left-up.png, left-down.png, right-up.png, right-down.png). Defaults to \"/bongo-cat\" */\n assetsPath?: string;\n /** CSS bottom offset. Defaults to 16 */\n bottom?: number | string;\n /** CSS right offset. Defaults to 16 */\n right?: number | string;\n /** Width in px. Defaults to 65 */\n width?: number;\n /** Height in px. Defaults to 40 */\n height?: number;\n /** z-index. Defaults to 9998 */\n zIndex?: number;\n /** Enable scale pulse on input. Defaults to true */\n pulse?: boolean;\n /** Margin-top applied to each sprite image to ground the cat visually. Defaults to \"37%\" */\n spriteMarginTop?: string | number;\n /** Additional className on the container */\n className?: string;\n /** Additional inline styles on the container */\n style?: CSSProperties;\n}\n\n// Physical key codes for the left side of the keyboard\nconst LEFT_KEYS = new Set([\n \"Digit1\", \"Digit2\", \"Digit3\", \"Digit4\", \"Digit5\",\n \"KeyQ\", \"KeyW\", \"KeyE\", \"KeyR\", \"KeyT\",\n \"KeyA\", \"KeyS\", \"KeyD\", \"KeyF\", \"KeyG\",\n \"KeyZ\", \"KeyX\", \"KeyC\", \"KeyV\", \"KeyB\",\n \"Tab\", \"CapsLock\", \"ShiftLeft\", \"ControlLeft\", \"AltLeft\", \"MetaLeft\",\n \"Backquote\", \"Escape\",\n]);\n\nconst RIGHT_KEYS = new Set([\n \"Digit6\", \"Digit7\", \"Digit8\", \"Digit9\", \"Digit0\",\n \"KeyY\", \"KeyU\", \"KeyI\", \"KeyO\", \"KeyP\",\n \"KeyH\", \"KeyJ\", \"KeyK\", \"KeyL\",\n \"KeyN\", \"KeyM\",\n \"Enter\", \"Backspace\", \"Delete\", \"ShiftRight\", \"ControlRight\", \"AltRight\", \"MetaRight\",\n \"BracketLeft\", \"BracketRight\", \"Backslash\", \"Semicolon\", \"Quote\",\n \"Comma\", \"Period\", \"Slash\", \"Minus\", \"Equal\",\n \"ArrowUp\", \"ArrowDown\", \"ArrowLeft\", \"ArrowRight\",\n]);\n\nconst MIN_ANIMATION_MS = 100;\n\nconst baseImgStyle: CSSProperties = {\n position: \"absolute\",\n inset: 0,\n width: \"100%\",\n height: \"100%\",\n objectFit: \"contain\",\n pointerEvents: \"none\",\n};\n\nexport function BongoCat({\n assetsPath = \"/bongo-cat\",\n bottom = 16,\n right = 16,\n width = 65,\n height = 40,\n zIndex = 9998,\n pulse: pulseEnabled = true,\n spriteMarginTop = \"37%\",\n className = \"\",\n style: userStyle,\n}: BongoCatProps = {}) {\n const [state, setState] = useState<CatState>(\"idle\");\n const [pulse, setPulse] = useState(false);\n const pawDownTimeRef = useRef(0);\n const idleTimerRef = useRef<ReturnType<typeof setTimeout>>(undefined);\n\n const basePath = assetsPath.replace(/\\/$/, \"\");\n\n const imgStyle: CSSProperties = {\n ...baseImgStyle,\n marginTop: typeof spriteMarginTop === \"number\" ? `${spriteMarginTop}px` : spriteMarginTop,\n };\n\n const returnToIdle = useCallback(() => {\n const elapsed = Date.now() - pawDownTimeRef.current;\n const remaining = Math.max(0, MIN_ANIMATION_MS - elapsed);\n\n clearTimeout(idleTimerRef.current);\n idleTimerRef.current = setTimeout(() => setState(\"idle\"), remaining);\n }, []);\n\n const triggerPulse = useCallback(() => {\n if (!pulseEnabled) return;\n setPulse(true);\n requestAnimationFrame(() => {\n setTimeout(() => setPulse(false), 150);\n });\n }, [pulseEnabled]);\n\n useEffect(() => {\n const onKeyDown = (e: KeyboardEvent) => {\n if (e.repeat) return;\n\n pawDownTimeRef.current = Date.now();\n clearTimeout(idleTimerRef.current);\n triggerPulse();\n\n if (LEFT_KEYS.has(e.code)) {\n setState(\"leftPawDown\");\n } else if (RIGHT_KEYS.has(e.code)) {\n setState(\"rightPawDown\");\n } else {\n setState(e.code.charCodeAt(0) % 2 === 0 ? \"leftPawDown\" : \"rightPawDown\");\n }\n };\n\n const onKeyUp = () => {\n returnToIdle();\n };\n\n const onMouseDown = (e: MouseEvent) => {\n pawDownTimeRef.current = Date.now();\n clearTimeout(idleTimerRef.current);\n triggerPulse();\n\n if (e.button === 2) {\n setState(\"rightPawDown\");\n } else {\n setState(\"leftPawDown\");\n }\n };\n\n const onMouseUp = () => {\n returnToIdle();\n };\n\n const onContextMenu = () => {\n returnToIdle();\n };\n\n document.addEventListener(\"keydown\", onKeyDown);\n document.addEventListener(\"keyup\", onKeyUp);\n window.addEventListener(\"mousedown\", onMouseDown, true);\n window.addEventListener(\"mouseup\", onMouseUp, true);\n window.addEventListener(\"contextmenu\", onContextMenu, true);\n\n return () => {\n document.removeEventListener(\"keydown\", onKeyDown);\n document.removeEventListener(\"keyup\", onKeyUp);\n window.removeEventListener(\"mousedown\", onMouseDown, true);\n window.removeEventListener(\"mouseup\", onMouseUp, true);\n window.removeEventListener(\"contextmenu\", onContextMenu, true);\n clearTimeout(idleTimerRef.current);\n };\n }, [returnToIdle, triggerPulse]);\n\n const leftDown = state === \"leftPawDown\" || state === \"bothPawsDown\";\n const rightDown = state === \"rightPawDown\" || state === \"bothPawsDown\";\n\n const containerStyle: CSSProperties = {\n position: \"fixed\",\n bottom: typeof bottom === \"number\" ? `${bottom}px` : bottom,\n right: typeof right === \"number\" ? `${right}px` : right,\n width,\n height,\n zIndex,\n pointerEvents: \"none\",\n userSelect: \"none\",\n transform: pulse ? \"scale(1.08)\" : \"scale(1)\",\n transition: \"transform 0.1s ease-out\",\n ...userStyle,\n };\n\n return (\n <div className={className} style={containerStyle}>\n <img src={`${basePath}/base.png`} alt=\"\" draggable={false} style={imgStyle} />\n <img\n src={leftDown ? `${basePath}/left-down.png` : `${basePath}/left-up.png`}\n alt=\"\"\n draggable={false}\n style={imgStyle}\n />\n <img\n src={rightDown ? `${basePath}/right-down.png` : `${basePath}/right-up.png`}\n alt=\"\"\n draggable={false}\n style={imgStyle}\n />\n </div>\n );\n}\n"],"mappings":"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","names":[]}
|
package/dist/index.mjs
ADDED
|
@@ -0,0 +1,203 @@
|
|
|
1
|
+
// src/bongo-cat.tsx
|
|
2
|
+
import { useState, useEffect, useRef, useCallback } from "react";
|
|
3
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
4
|
+
var LEFT_KEYS = /* @__PURE__ */ new Set([
|
|
5
|
+
"Digit1",
|
|
6
|
+
"Digit2",
|
|
7
|
+
"Digit3",
|
|
8
|
+
"Digit4",
|
|
9
|
+
"Digit5",
|
|
10
|
+
"KeyQ",
|
|
11
|
+
"KeyW",
|
|
12
|
+
"KeyE",
|
|
13
|
+
"KeyR",
|
|
14
|
+
"KeyT",
|
|
15
|
+
"KeyA",
|
|
16
|
+
"KeyS",
|
|
17
|
+
"KeyD",
|
|
18
|
+
"KeyF",
|
|
19
|
+
"KeyG",
|
|
20
|
+
"KeyZ",
|
|
21
|
+
"KeyX",
|
|
22
|
+
"KeyC",
|
|
23
|
+
"KeyV",
|
|
24
|
+
"KeyB",
|
|
25
|
+
"Tab",
|
|
26
|
+
"CapsLock",
|
|
27
|
+
"ShiftLeft",
|
|
28
|
+
"ControlLeft",
|
|
29
|
+
"AltLeft",
|
|
30
|
+
"MetaLeft",
|
|
31
|
+
"Backquote",
|
|
32
|
+
"Escape"
|
|
33
|
+
]);
|
|
34
|
+
var RIGHT_KEYS = /* @__PURE__ */ new Set([
|
|
35
|
+
"Digit6",
|
|
36
|
+
"Digit7",
|
|
37
|
+
"Digit8",
|
|
38
|
+
"Digit9",
|
|
39
|
+
"Digit0",
|
|
40
|
+
"KeyY",
|
|
41
|
+
"KeyU",
|
|
42
|
+
"KeyI",
|
|
43
|
+
"KeyO",
|
|
44
|
+
"KeyP",
|
|
45
|
+
"KeyH",
|
|
46
|
+
"KeyJ",
|
|
47
|
+
"KeyK",
|
|
48
|
+
"KeyL",
|
|
49
|
+
"KeyN",
|
|
50
|
+
"KeyM",
|
|
51
|
+
"Enter",
|
|
52
|
+
"Backspace",
|
|
53
|
+
"Delete",
|
|
54
|
+
"ShiftRight",
|
|
55
|
+
"ControlRight",
|
|
56
|
+
"AltRight",
|
|
57
|
+
"MetaRight",
|
|
58
|
+
"BracketLeft",
|
|
59
|
+
"BracketRight",
|
|
60
|
+
"Backslash",
|
|
61
|
+
"Semicolon",
|
|
62
|
+
"Quote",
|
|
63
|
+
"Comma",
|
|
64
|
+
"Period",
|
|
65
|
+
"Slash",
|
|
66
|
+
"Minus",
|
|
67
|
+
"Equal",
|
|
68
|
+
"ArrowUp",
|
|
69
|
+
"ArrowDown",
|
|
70
|
+
"ArrowLeft",
|
|
71
|
+
"ArrowRight"
|
|
72
|
+
]);
|
|
73
|
+
var MIN_ANIMATION_MS = 100;
|
|
74
|
+
var baseImgStyle = {
|
|
75
|
+
position: "absolute",
|
|
76
|
+
inset: 0,
|
|
77
|
+
width: "100%",
|
|
78
|
+
height: "100%",
|
|
79
|
+
objectFit: "contain",
|
|
80
|
+
pointerEvents: "none"
|
|
81
|
+
};
|
|
82
|
+
function BongoCat({
|
|
83
|
+
assetsPath = "/bongo-cat",
|
|
84
|
+
bottom = 16,
|
|
85
|
+
right = 16,
|
|
86
|
+
width = 65,
|
|
87
|
+
height = 40,
|
|
88
|
+
zIndex = 9998,
|
|
89
|
+
pulse: pulseEnabled = true,
|
|
90
|
+
spriteMarginTop = "37%",
|
|
91
|
+
className = "",
|
|
92
|
+
style: userStyle
|
|
93
|
+
} = {}) {
|
|
94
|
+
const [state, setState] = useState("idle");
|
|
95
|
+
const [pulse, setPulse] = useState(false);
|
|
96
|
+
const pawDownTimeRef = useRef(0);
|
|
97
|
+
const idleTimerRef = useRef(void 0);
|
|
98
|
+
const basePath = assetsPath.replace(/\/$/, "");
|
|
99
|
+
const imgStyle = {
|
|
100
|
+
...baseImgStyle,
|
|
101
|
+
marginTop: typeof spriteMarginTop === "number" ? `${spriteMarginTop}px` : spriteMarginTop
|
|
102
|
+
};
|
|
103
|
+
const returnToIdle = useCallback(() => {
|
|
104
|
+
const elapsed = Date.now() - pawDownTimeRef.current;
|
|
105
|
+
const remaining = Math.max(0, MIN_ANIMATION_MS - elapsed);
|
|
106
|
+
clearTimeout(idleTimerRef.current);
|
|
107
|
+
idleTimerRef.current = setTimeout(() => setState("idle"), remaining);
|
|
108
|
+
}, []);
|
|
109
|
+
const triggerPulse = useCallback(() => {
|
|
110
|
+
if (!pulseEnabled) return;
|
|
111
|
+
setPulse(true);
|
|
112
|
+
requestAnimationFrame(() => {
|
|
113
|
+
setTimeout(() => setPulse(false), 150);
|
|
114
|
+
});
|
|
115
|
+
}, [pulseEnabled]);
|
|
116
|
+
useEffect(() => {
|
|
117
|
+
const onKeyDown = (e) => {
|
|
118
|
+
if (e.repeat) return;
|
|
119
|
+
pawDownTimeRef.current = Date.now();
|
|
120
|
+
clearTimeout(idleTimerRef.current);
|
|
121
|
+
triggerPulse();
|
|
122
|
+
if (LEFT_KEYS.has(e.code)) {
|
|
123
|
+
setState("leftPawDown");
|
|
124
|
+
} else if (RIGHT_KEYS.has(e.code)) {
|
|
125
|
+
setState("rightPawDown");
|
|
126
|
+
} else {
|
|
127
|
+
setState(e.code.charCodeAt(0) % 2 === 0 ? "leftPawDown" : "rightPawDown");
|
|
128
|
+
}
|
|
129
|
+
};
|
|
130
|
+
const onKeyUp = () => {
|
|
131
|
+
returnToIdle();
|
|
132
|
+
};
|
|
133
|
+
const onMouseDown = (e) => {
|
|
134
|
+
pawDownTimeRef.current = Date.now();
|
|
135
|
+
clearTimeout(idleTimerRef.current);
|
|
136
|
+
triggerPulse();
|
|
137
|
+
if (e.button === 2) {
|
|
138
|
+
setState("rightPawDown");
|
|
139
|
+
} else {
|
|
140
|
+
setState("leftPawDown");
|
|
141
|
+
}
|
|
142
|
+
};
|
|
143
|
+
const onMouseUp = () => {
|
|
144
|
+
returnToIdle();
|
|
145
|
+
};
|
|
146
|
+
const onContextMenu = () => {
|
|
147
|
+
returnToIdle();
|
|
148
|
+
};
|
|
149
|
+
document.addEventListener("keydown", onKeyDown);
|
|
150
|
+
document.addEventListener("keyup", onKeyUp);
|
|
151
|
+
window.addEventListener("mousedown", onMouseDown, true);
|
|
152
|
+
window.addEventListener("mouseup", onMouseUp, true);
|
|
153
|
+
window.addEventListener("contextmenu", onContextMenu, true);
|
|
154
|
+
return () => {
|
|
155
|
+
document.removeEventListener("keydown", onKeyDown);
|
|
156
|
+
document.removeEventListener("keyup", onKeyUp);
|
|
157
|
+
window.removeEventListener("mousedown", onMouseDown, true);
|
|
158
|
+
window.removeEventListener("mouseup", onMouseUp, true);
|
|
159
|
+
window.removeEventListener("contextmenu", onContextMenu, true);
|
|
160
|
+
clearTimeout(idleTimerRef.current);
|
|
161
|
+
};
|
|
162
|
+
}, [returnToIdle, triggerPulse]);
|
|
163
|
+
const leftDown = state === "leftPawDown" || state === "bothPawsDown";
|
|
164
|
+
const rightDown = state === "rightPawDown" || state === "bothPawsDown";
|
|
165
|
+
const containerStyle = {
|
|
166
|
+
position: "fixed",
|
|
167
|
+
bottom: typeof bottom === "number" ? `${bottom}px` : bottom,
|
|
168
|
+
right: typeof right === "number" ? `${right}px` : right,
|
|
169
|
+
width,
|
|
170
|
+
height,
|
|
171
|
+
zIndex,
|
|
172
|
+
pointerEvents: "none",
|
|
173
|
+
userSelect: "none",
|
|
174
|
+
transform: pulse ? "scale(1.08)" : "scale(1)",
|
|
175
|
+
transition: "transform 0.1s ease-out",
|
|
176
|
+
...userStyle
|
|
177
|
+
};
|
|
178
|
+
return /* @__PURE__ */ jsxs("div", { className, style: containerStyle, children: [
|
|
179
|
+
/* @__PURE__ */ jsx("img", { src: `${basePath}/base.png`, alt: "", draggable: false, style: imgStyle }),
|
|
180
|
+
/* @__PURE__ */ jsx(
|
|
181
|
+
"img",
|
|
182
|
+
{
|
|
183
|
+
src: leftDown ? `${basePath}/left-down.png` : `${basePath}/left-up.png`,
|
|
184
|
+
alt: "",
|
|
185
|
+
draggable: false,
|
|
186
|
+
style: imgStyle
|
|
187
|
+
}
|
|
188
|
+
),
|
|
189
|
+
/* @__PURE__ */ jsx(
|
|
190
|
+
"img",
|
|
191
|
+
{
|
|
192
|
+
src: rightDown ? `${basePath}/right-down.png` : `${basePath}/right-up.png`,
|
|
193
|
+
alt: "",
|
|
194
|
+
draggable: false,
|
|
195
|
+
style: imgStyle
|
|
196
|
+
}
|
|
197
|
+
)
|
|
198
|
+
] });
|
|
199
|
+
}
|
|
200
|
+
export {
|
|
201
|
+
BongoCat
|
|
202
|
+
};
|
|
203
|
+
//# sourceMappingURL=index.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/bongo-cat.tsx"],"sourcesContent":["import { useState, useEffect, useRef, useCallback, CSSProperties } from \"react\";\n\ntype CatState = \"idle\" | \"leftPawDown\" | \"rightPawDown\" | \"bothPawsDown\";\n\nexport interface BongoCatProps {\n /** Base URL path to the sprite assets directory (must contain base.png, left-up.png, left-down.png, right-up.png, right-down.png). Defaults to \"/bongo-cat\" */\n assetsPath?: string;\n /** CSS bottom offset. Defaults to 16 */\n bottom?: number | string;\n /** CSS right offset. Defaults to 16 */\n right?: number | string;\n /** Width in px. Defaults to 65 */\n width?: number;\n /** Height in px. Defaults to 40 */\n height?: number;\n /** z-index. Defaults to 9998 */\n zIndex?: number;\n /** Enable scale pulse on input. Defaults to true */\n pulse?: boolean;\n /** Margin-top applied to each sprite image to ground the cat visually. Defaults to \"37%\" */\n spriteMarginTop?: string | number;\n /** Additional className on the container */\n className?: string;\n /** Additional inline styles on the container */\n style?: CSSProperties;\n}\n\n// Physical key codes for the left side of the keyboard\nconst LEFT_KEYS = new Set([\n \"Digit1\", \"Digit2\", \"Digit3\", \"Digit4\", \"Digit5\",\n \"KeyQ\", \"KeyW\", \"KeyE\", \"KeyR\", \"KeyT\",\n \"KeyA\", \"KeyS\", \"KeyD\", \"KeyF\", \"KeyG\",\n \"KeyZ\", \"KeyX\", \"KeyC\", \"KeyV\", \"KeyB\",\n \"Tab\", \"CapsLock\", \"ShiftLeft\", \"ControlLeft\", \"AltLeft\", \"MetaLeft\",\n \"Backquote\", \"Escape\",\n]);\n\nconst RIGHT_KEYS = new Set([\n \"Digit6\", \"Digit7\", \"Digit8\", \"Digit9\", \"Digit0\",\n \"KeyY\", \"KeyU\", \"KeyI\", \"KeyO\", \"KeyP\",\n \"KeyH\", \"KeyJ\", \"KeyK\", \"KeyL\",\n \"KeyN\", \"KeyM\",\n \"Enter\", \"Backspace\", \"Delete\", \"ShiftRight\", \"ControlRight\", \"AltRight\", \"MetaRight\",\n \"BracketLeft\", \"BracketRight\", \"Backslash\", \"Semicolon\", \"Quote\",\n \"Comma\", \"Period\", \"Slash\", \"Minus\", \"Equal\",\n \"ArrowUp\", \"ArrowDown\", \"ArrowLeft\", \"ArrowRight\",\n]);\n\nconst MIN_ANIMATION_MS = 100;\n\nconst baseImgStyle: CSSProperties = {\n position: \"absolute\",\n inset: 0,\n width: \"100%\",\n height: \"100%\",\n objectFit: \"contain\",\n pointerEvents: \"none\",\n};\n\nexport function BongoCat({\n assetsPath = \"/bongo-cat\",\n bottom = 16,\n right = 16,\n width = 65,\n height = 40,\n zIndex = 9998,\n pulse: pulseEnabled = true,\n spriteMarginTop = \"37%\",\n className = \"\",\n style: userStyle,\n}: BongoCatProps = {}) {\n const [state, setState] = useState<CatState>(\"idle\");\n const [pulse, setPulse] = useState(false);\n const pawDownTimeRef = useRef(0);\n const idleTimerRef = useRef<ReturnType<typeof setTimeout>>(undefined);\n\n const basePath = assetsPath.replace(/\\/$/, \"\");\n\n const imgStyle: CSSProperties = {\n ...baseImgStyle,\n marginTop: typeof spriteMarginTop === \"number\" ? `${spriteMarginTop}px` : spriteMarginTop,\n };\n\n const returnToIdle = useCallback(() => {\n const elapsed = Date.now() - pawDownTimeRef.current;\n const remaining = Math.max(0, MIN_ANIMATION_MS - elapsed);\n\n clearTimeout(idleTimerRef.current);\n idleTimerRef.current = setTimeout(() => setState(\"idle\"), remaining);\n }, []);\n\n const triggerPulse = useCallback(() => {\n if (!pulseEnabled) return;\n setPulse(true);\n requestAnimationFrame(() => {\n setTimeout(() => setPulse(false), 150);\n });\n }, [pulseEnabled]);\n\n useEffect(() => {\n const onKeyDown = (e: KeyboardEvent) => {\n if (e.repeat) return;\n\n pawDownTimeRef.current = Date.now();\n clearTimeout(idleTimerRef.current);\n triggerPulse();\n\n if (LEFT_KEYS.has(e.code)) {\n setState(\"leftPawDown\");\n } else if (RIGHT_KEYS.has(e.code)) {\n setState(\"rightPawDown\");\n } else {\n setState(e.code.charCodeAt(0) % 2 === 0 ? \"leftPawDown\" : \"rightPawDown\");\n }\n };\n\n const onKeyUp = () => {\n returnToIdle();\n };\n\n const onMouseDown = (e: MouseEvent) => {\n pawDownTimeRef.current = Date.now();\n clearTimeout(idleTimerRef.current);\n triggerPulse();\n\n if (e.button === 2) {\n setState(\"rightPawDown\");\n } else {\n setState(\"leftPawDown\");\n }\n };\n\n const onMouseUp = () => {\n returnToIdle();\n };\n\n const onContextMenu = () => {\n returnToIdle();\n };\n\n document.addEventListener(\"keydown\", onKeyDown);\n document.addEventListener(\"keyup\", onKeyUp);\n window.addEventListener(\"mousedown\", onMouseDown, true);\n window.addEventListener(\"mouseup\", onMouseUp, true);\n window.addEventListener(\"contextmenu\", onContextMenu, true);\n\n return () => {\n document.removeEventListener(\"keydown\", onKeyDown);\n document.removeEventListener(\"keyup\", onKeyUp);\n window.removeEventListener(\"mousedown\", onMouseDown, true);\n window.removeEventListener(\"mouseup\", onMouseUp, true);\n window.removeEventListener(\"contextmenu\", onContextMenu, true);\n clearTimeout(idleTimerRef.current);\n };\n }, [returnToIdle, triggerPulse]);\n\n const leftDown = state === \"leftPawDown\" || state === \"bothPawsDown\";\n const rightDown = state === \"rightPawDown\" || state === \"bothPawsDown\";\n\n const containerStyle: CSSProperties = {\n position: \"fixed\",\n bottom: typeof bottom === \"number\" ? `${bottom}px` : bottom,\n right: typeof right === \"number\" ? `${right}px` : right,\n width,\n height,\n zIndex,\n pointerEvents: \"none\",\n userSelect: \"none\",\n transform: pulse ? \"scale(1.08)\" : \"scale(1)\",\n transition: \"transform 0.1s ease-out\",\n ...userStyle,\n };\n\n return (\n <div className={className} style={containerStyle}>\n <img src={`${basePath}/base.png`} alt=\"\" draggable={false} style={imgStyle} />\n <img\n src={leftDown ? `${basePath}/left-down.png` : `${basePath}/left-up.png`}\n alt=\"\"\n draggable={false}\n style={imgStyle}\n />\n <img\n src={rightDown ? `${basePath}/right-down.png` : `${basePath}/right-up.png`}\n alt=\"\"\n draggable={false}\n style={imgStyle}\n />\n </div>\n );\n}\n"],"mappings":"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","names":[]}
|
package/package.json
ADDED
|
@@ -0,0 +1,50 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "bongocat-react",
|
|
3
|
+
"version": "1.0.0",
|
|
4
|
+
"description": "A React component that adds an animated BongoCat to your app — reacts to typing and mouse clicks",
|
|
5
|
+
"main": "dist/index.js",
|
|
6
|
+
"module": "dist/index.mjs",
|
|
7
|
+
"types": "dist/index.d.ts",
|
|
8
|
+
"exports": {
|
|
9
|
+
".": {
|
|
10
|
+
"types": "./dist/index.d.ts",
|
|
11
|
+
"import": "./dist/index.mjs",
|
|
12
|
+
"require": "./dist/index.js"
|
|
13
|
+
}
|
|
14
|
+
},
|
|
15
|
+
"files": [
|
|
16
|
+
"dist",
|
|
17
|
+
"assets"
|
|
18
|
+
],
|
|
19
|
+
"scripts": {
|
|
20
|
+
"build": "tsup",
|
|
21
|
+
"dev": "tsup --watch",
|
|
22
|
+
"prepublishOnly": "npm run build"
|
|
23
|
+
},
|
|
24
|
+
"keywords": [
|
|
25
|
+
"react",
|
|
26
|
+
"bongocat",
|
|
27
|
+
"bongo-cat",
|
|
28
|
+
"typing",
|
|
29
|
+
"animation",
|
|
30
|
+
"overlay",
|
|
31
|
+
"mascot"
|
|
32
|
+
],
|
|
33
|
+
"author": "kaustubhxd",
|
|
34
|
+
"license": "MIT",
|
|
35
|
+
"repository": {
|
|
36
|
+
"type": "git",
|
|
37
|
+
"url": "git+https://github.com/kaustubhxd/bongocat-react.git"
|
|
38
|
+
},
|
|
39
|
+
"peerDependencies": {
|
|
40
|
+
"react": ">=18",
|
|
41
|
+
"react-dom": ">=18"
|
|
42
|
+
},
|
|
43
|
+
"devDependencies": {
|
|
44
|
+
"@types/react": "^19.0.0",
|
|
45
|
+
"react": "^19.0.0",
|
|
46
|
+
"tsup": "^8.0.0",
|
|
47
|
+
"typescript": "^5.0.0"
|
|
48
|
+
},
|
|
49
|
+
"packageManager": "pnpm@10.14.0+sha512.ad27a79641b49c3e481a16a805baa71817a04bbe06a38d17e60e2eaee83f6a146c6a688125f5792e48dd5ba30e7da52a5cda4c3992b9ccf333f9ce223af84748"
|
|
50
|
+
}
|