bits-lab 0.1.0 → 0.1.2

package/README.md

@@ -1,8 +1,8 @@
 # Bits Lab
 
-159 original React components with an 8-bit soul: text effects, animated backgrounds, game UI, inputs, data displays, overlays, navigation and playful toys. Every component brings its own styles, so there is nothing else to import or configure.
+**Game feel for real products.** 159 original React components that bring game design to everyday software: onboarding as a quest, milestones as achievements, progress bars, combos, streaks, loading screens with tips and hold-to-confirm for risky actions, plus everything around them (inputs, overlays, navigation, data and motion), in a playful 8-bit style. Every component brings its own styles, so there is nothing else to import or configure.
 
-Browse them all, tweak their props and copy the code at **https://bits-lab.vercel.app**.
+Play with them all, tweak their props and copy the code at **https://bits-lab.vercel.app**.
 
 ## Install
 
@@ -23,14 +23,20 @@ import GravityBox from "bits-lab/GravityBox";
 ## Use
 
 ```jsx
-import { FocusPull, HoldToConfirm, PixelSpinners } from "bits-lab";
+import { AchievementToast, HoldToConfirm, QuestLog, achievement } from "bits-lab";
 
-export default function Page() {
+const quests = [
+  { id: "profile", title: "Create your profile", xp: 50 },
+  { id: "invite", title: "Invite a teammate", xp: 100, requires: ["profile"] }
+];
+
+// Onboarding as a quest: finishing a task pops an achievement.
+export function Onboarding({ onDeleteDraft }) {
   return (
     <>
-      <FocusPull as="h1" text="Every pixel snaps into focus" />
-      <HoldToConfirm onConfirm={() => console.log("Deleted")}>Hold to delete</HoldToConfirm>
-      <PixelSpinners type="hourglass" label="Loading" showLabel />
+      <QuestLog quests={quests} onQuestComplete={quest => achievement({ title: quest.title, xp: quest.xp, tier: "gold" })} />
+      <HoldToConfirm onConfirm={onDeleteDraft}>Hold to delete draft</HoldToConfirm>
+      <AchievementToast />
     </>
   );
 }

package/dist/SignalText.js

@@ -5,7 +5,7 @@ const STYLE_ID = "bl-signal-text";
 const CSS = `
 .bl-signal { position: relative; margin: 0; color: var(--bl-ink); }
 .bl-signal__glyphs { display: inline; }
-.bl-signal__ch { white-space: pre; }
+.bl-signal__ch { white-space: pre-wrap; }
 .bl-signal__ch[data-noise] { color: var(--bl-noise); }
 .bl-signal[data-mode="flap"] .bl-signal__glyphs { display: inline-flex; flex-wrap: wrap; gap: var(--bl-cell-gap); }
 .bl-signal[data-mode="flap"] .bl-signal__word { display: inline-flex; gap: var(--bl-cell-gap); }

package/package.json

@@ -1,11 +1,31 @@
 {
   "name": "bits-lab",
-  "version": "0.1.0",
-  "description": "159 original 8-bit React components: text effects, backgrounds, game UI, inputs, data, overlays and more. Zero dependencies, styles included.",
+  "version": "0.1.2",
+  "description": "Game feel for real products: 159 original React components for quests, achievements, progress, combos, streaks and hold-to-confirm, in a playful 8-bit style. Zero dependencies, styles included.",
   "license": "MIT",
   "author": "Steven Phung",
   "homepage": "https://bits-lab.vercel.app",
-  "keywords": ["react", "components", "pixel", "8-bit", "retro", "animation", "ui"],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/stevenphung/bits-lab.git",
+    "directory": "packages/bits-lab"
+  },
+  "bugs": {
+    "url": "https://github.com/stevenphung/bits-lab/issues"
+  },
+  "keywords": [
+    "react",
+    "components",
+    "gamification",
+    "game-ui",
+    "onboarding",
+    "achievements",
+    "micro-interactions",
+    "animation",
+    "pixel",
+    "8-bit",
+    "ui"
+  ],
   "type": "module",
   "sideEffects": false,
   "main": "./dist/index.js",
@@ -22,7 +42,11 @@
     },
     "./package.json": "./package.json"
   },
-  "files": ["dist", "README.md", "LICENSE"],
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE"
+  ],
   "peerDependencies": {
     "matter-js": ">=0.19",
     "react": "^19.0.0",