jaml-ui 0.14.3 → 0.16.0

package/dist/ui/panel.js

@@ -41,10 +41,10 @@ const JIMBO_TONE_PAIRS = {
     gold: [JimboColorOption.GOLD, '#8a6a1e'],
     grey: [JimboColorOption.DARK_GREY, JimboColorOption.DARKEST],
 };
-export function JimboButton({ tone = 'orange', size = 'md', fullWidth = false, disabled = false, onClick, style, children, }) {
+export function JimboButton({ tone = 'orange', size = 'md', fullWidth = false, disabled = false, uppercase = false, onClick, style, children, }) {
     const [pressed, setPressed] = useState(false);
     const [fg, sh] = JIMBO_TONE_PAIRS[tone] ?? JIMBO_TONE_PAIRS.orange;
-    const pad = size === 'xs' ? '2px 8px' : size === 'sm' ? '4px 10px' : size === 'lg' ? '14px 18px' : '9px 14px';
+    const pad = size === 'xs' ? '2px 8px' : size === 'sm' ? '4px 10px' : size === 'lg' ? '10px 18px' : '6px 14px';
     const textSize = size === 'xs' ? 'xs' : size === 'sm' ? 'sm' : size === 'lg' ? 'lg' : 'md';
     return (_jsxs("div", { onMouseDown: () => { if (!disabled)
             setPressed(true); }, onMouseUp: () => setPressed(false), onMouseLeave: () => setPressed(false), onTouchStart: () => { if (!disabled)
@@ -54,10 +54,10 @@ export function JimboButton({ tone = 'orange', size = 'md', fullWidth = false, d
                     transform: pressed ? 'translate(1px, 3px)' : 'translate(0,0)',
                     transition: 'transform 55ms linear',
                     textAlign: 'center',
-                }, children: _jsx(JimboText, { size: textSize, uppercase: true, children: children }) })] }));
+                }, children: _jsx(JimboText, { size: textSize, uppercase: uppercase, children: children }) })] }));
 }
 export function JimboBackButton({ onClick }) {
-    return (_jsx("div", { style: { display: 'flex', justifyContent: 'center', width: '100%', padding: '8px 10px 10px' }, children: _jsx(JimboButton, { tone: "orange", size: "md", onClick: onClick, style: { width: '66.666%' }, children: "Back" }) }));
+    return (_jsx("div", { style: { display: 'flex', justifyContent: 'center', width: '100%', padding: '4px 0' }, children: _jsx(JimboButton, { tone: "orange", size: "md", fullWidth: true, onClick: onClick, children: "Back" }) }));
 }
 export function JimboModal({ children, open, onClose, title, className }) {
     const [visible, setVisible] = useState(open);

package/dist/ui/sprites.d.ts

@@ -8,3 +8,17 @@ export interface JimboSpriteProps {
     style?: React.CSSProperties;
 }
 export declare function JimboSprite({ name, sheet, width, height, style }: JimboSpriteProps): import("react/jsx-runtime").JSX.Element | null;
+export interface StakeSpriteProps {
+    stake: string;
+    width?: number;
+    height?: number;
+    style?: React.CSSProperties;
+}
+export declare function StakeSprite({ stake, width, height, style }: StakeSpriteProps): import("react/jsx-runtime").JSX.Element;
+export interface DeckSpriteProps {
+    deck: string;
+    width?: number;
+    height?: number;
+    style?: React.CSSProperties;
+}
+export declare function DeckSprite({ deck, width, height, style }: DeckSpriteProps): import("react/jsx-runtime").JSX.Element;

package/dist/ui/sprites.js

@@ -1,23 +1,17 @@
 'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { resolveJamlAssetUrl } from '../assets.js';
-import { getSpriteData } from '../sprites/spriteMapper.js';
-const SHEET_META = {
-    Jokers: { cols: 10, rows: 16, assetKey: 'jokers' },
-    Tarots: { cols: 10, rows: 6, assetKey: 'tarots' },
-    Vouchers: { cols: 9, rows: 4, assetKey: 'vouchers' },
-    Boosters: { cols: 4, rows: 9, assetKey: 'boosters' },
-    BlindChips: { cols: 21, rows: 31, assetKey: 'blinds' },
-    tags: { cols: 6, rows: 5, assetKey: 'tags' },
-    Enhancers: { cols: 7, rows: 5, assetKey: 'enhancers' },
-    Editions: { cols: 5, rows: 1, assetKey: 'editions' },
-};
+import { getSpriteData, SHEET_META } from '../sprites/spriteMapper.js';
 export function JimboSprite({ name, sheet, width = 40, height, style }) {
     const sprite = getSpriteData(name);
     const resolvedSheet = sheet ?? sprite?.type ?? 'Jokers';
     const meta = SHEET_META[resolvedSheet];
     const pos = sprite?.pos ?? { x: 0, y: 0 };
-    const h = height ?? width;
+    let defaultH = width;
+    if (["Jokers", "Tarots", "Vouchers", "Boosters", "Decks", "Enhancers", "Editions"].includes(resolvedSheet)) {
+        defaultH = Math.round((width * 95) / 71);
+    }
+    const h = height ?? defaultH;
     if (!meta)
         return null;
     const bgW = width * meta.cols;
@@ -34,3 +28,49 @@ export function JimboSprite({ name, sheet, width = 40, height, style }) {
             ...style,
         } }));
 }
+const STAKE_MAP = ["White", "Red", "Green", "Black", "Blue", "Purple", "Orange", "Gold"];
+export function StakeSprite({ stake, width = 29, height, style }) {
+    const index = STAKE_MAP.indexOf(stake.replace(" Stake", ""));
+    const idx = index >= 0 ? index : 0;
+    const x = idx % 5;
+    const y = Math.floor(idx / 5);
+    const h = height ?? width;
+    const bgW = width * 5;
+    const bgH = h * 2;
+    return (_jsx("div", { style: {
+            width, height: h, flexShrink: 0,
+            backgroundImage: `url(${resolveJamlAssetUrl('stakes')})`,
+            backgroundSize: `${bgW}px ${bgH}px`,
+            backgroundPosition: `-${x * width}px -${y * h}px`,
+            backgroundRepeat: 'no-repeat',
+            imageRendering: 'pixelated',
+            ...style,
+        } }));
+}
+const DECK_ROWS = {
+    Red: 0,
+    Blue: 1,
+    Yellow: 2,
+    Green: 3,
+    Black: 0,
+    Magic: 1,
+    Nebula: 2,
+    Ghost: 3,
+};
+export function DeckSprite({ deck, width = 71, height, style }) {
+    const baseDeck = deck.replace(" Deck", "");
+    const y = DECK_ROWS[baseDeck] ?? 0;
+    const x = 12;
+    const h = height ?? (width * 95 / 71);
+    const bgW = width * 13;
+    const bgH = h * 4;
+    return (_jsx("div", { style: {
+            width, height: h, flexShrink: 0,
+            backgroundImage: `url(${resolveJamlAssetUrl('deck')})`,
+            backgroundSize: `${bgW}px ${bgH}px`,
+            backgroundPosition: `-${x * width}px -${y * h}px`,
+            backgroundRepeat: 'no-repeat',
+            imageRendering: 'pixelated',
+            ...style,
+        } }));
+}

package/dist/ui.d.ts

@@ -2,6 +2,9 @@ export * from './ui/tokens.js';
 export * from './ui/jimboText.js';
 export * from './ui/panel.js';
 export * from './ui/jimboTabs.js';
+export * from './ui/JimboFloating.js';
+export * from './ui/JimboToggleList.js';
+export * from './ui/JimboBadge.js';
 export * from './ui/jimboFlankNav.js';
 export * from './ui/jimboFilterBar.js';
 export * from './ui/jimboBackground.js';

package/dist/ui.js

@@ -2,6 +2,9 @@ export * from './ui/tokens.js';
 export * from './ui/jimboText.js';
 export * from './ui/panel.js';
 export * from './ui/jimboTabs.js';
+export * from './ui/JimboFloating.js';
+export * from './ui/JimboToggleList.js';
+export * from './ui/JimboBadge.js';
 export * from './ui/jimboFlankNav.js';
 export * from './ui/jimboFilterBar.js';
 export * from './ui/jimboBackground.js';

package/package.json

@@ -1,122 +1,129 @@
-{
-  "name": "jaml-ui",
-  "version": "0.14.3",
-  "description": "Balatro rendering components, sprite metadata, and optional Motely helpers for React apps.",
-  "type": "module",
-  "main": "./dist/index.js",
-  "types": "./dist/index.d.ts",
-  "exports": {
-    ".": {
-      "types": "./dist/index.d.ts",
-      "import": "./dist/index.js"
-    },
-    "./core": {
-      "types": "./dist/core.d.ts",
-      "import": "./dist/core.js"
-    },
-    "./motely": {
-      "types": "./dist/motely.d.ts",
-      "import": "./dist/motely.js"
-    },
-    "./ui": {
-      "types": "./dist/ui.d.ts",
-      "import": "./dist/ui.js"
-    },
-    "./r3f": {
-      "types": "./dist/r3f.d.ts",
-      "import": "./dist/r3f.js"
-    },
-    "./fonts.css": "./fonts.css",
-    "./package.json": "./package.json"
-  },
-  "sideEffects": [
-    "./fonts.css"
-  ],
-  "files": [
-    "dist",
-    "assets",
-    "fonts.css",
-    "README.md",
-    "LICENSE"
-  ],
-  "scripts": {
-    "build": "tsc --pretty false",
-    "dev": "tsc --watch",
-    "demo": "vite --config demo/vite.config.ts",
-    "typecheck": "tsc --noEmit --pretty false",
-    "prepack": "npm run build"
-  },
-  "engines": {
-    "node": ">=18"
-  },
-  "publishConfig": {
-    "access": "public"
-  },
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/OptimusPi/jaml-ui"
-  },
-  "homepage": "https://github.com/OptimusPi/jaml-ui#readme",
-  "bugs": {
-    "url": "https://github.com/OptimusPi/jaml-ui/issues"
-  },
-  "keywords": [
-    "balatro",
-    "jaml",
-    "motely",
-    "seed",
-    "card",
-    "sprite",
-    "ui"
-  ],
-  "author": "pifreak",
-  "license": "MIT",
-  "peerDependencies": {
-    "@monaco-editor/react": ">=4.0.0",
-    "@react-spring/three": ">=9.0.0",
-    "@react-three/fiber": ">=8.0.0",
-    "monaco-editor": ">=0.50.0",
-    "motely-wasm": "^10.2.0 || ^11.0.0 || ^12.0.0 || ^13.0.0 || ^14.0.0",
-    "react": "^18.2.0 || ^19.0.0",
-    "react-dom": "^18.2.0 || ^19.0.0",
-    "react-icons": ">=5.0.0",
-    "three": ">=0.150.0"
-  },
-  "peerDependenciesMeta": {
-    "@react-spring/three": {
-      "optional": true
-    },
-    "@react-three/fiber": {
-      "optional": true
-    },
-    "motely-wasm": {
-      "optional": true
-    },
-    "react-icons": {
-      "optional": true
-    },
-    "three": {
-      "optional": true
-    }
-  },
-  "devDependencies": {
-    "@monaco-editor/react": "^4.7.0",
-    "@react-spring/three": "^10.0.3",
-    "@react-three/fiber": "^9.6.0",
-    "@types/react": "^19.2.14",
-    "@types/react-dom": "^19.2.3",
-    "@types/three": "^0.184.0",
-    "@vitejs/plugin-react": "^5.0.4",
-    "monaco-editor": "^0.55.1",
-    "motely-wasm": "^14.0.2",
-    "react": "^19.2.4",
-    "react-dom": "^19.2.4",
-    "react-icons": "^5.6.0",
-    "three": "^0.184.0",
-    "typescript": "^5.9.3",
-    "vite": "^8.0.9"
-  },
-  "dependencies": {
-    "@google/design.md": "^0.1.1"
-  }
-}
+{
+  "name": "jaml-ui",
+  "version": "0.16.0",
+  "description": "Balatro rendering components, sprite metadata, and optional Motely helpers for React apps.",
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./core": {
+      "types": "./dist/core.d.ts",
+      "import": "./dist/core.js"
+    },
+    "./motely": {
+      "types": "./dist/motely.d.ts",
+      "import": "./dist/motely.js"
+    },
+    "./ui": {
+      "types": "./dist/ui.d.ts",
+      "import": "./dist/ui.js"
+    },
+    "./r3f": {
+      "types": "./dist/r3f.d.ts",
+      "import": "./dist/r3f.js"
+    },
+    "./fonts.css": "./fonts.css",
+    "./package.json": "./package.json"
+  },
+  "sideEffects": [
+    "./fonts.css"
+  ],
+  "files": [
+    "dist",
+    "assets/*.png",
+    "assets/fonts",
+    "fonts.css",
+    "README.md",
+    "DESIGN.md",
+    "LICENSE"
+  ],
+  "scripts": {
+    "build": "tsc --pretty false",
+    "dev": "tsc --watch",
+    "demo": "vite --config demo/vite.config.ts",
+    "typecheck": "tsc --noEmit --pretty false",
+    "prepack": "npm run build"
+  },
+  "engines": {
+    "node": ">=18"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/OptimusPi/jaml-ui"
+  },
+  "homepage": "https://github.com/OptimusPi/jaml-ui#readme",
+  "bugs": {
+    "url": "https://github.com/OptimusPi/jaml-ui/issues"
+  },
+  "keywords": [
+    "balatro",
+    "jaml",
+    "motely",
+    "seed",
+    "card",
+    "sprite",
+    "ui"
+  ],
+  "author": "pifreak",
+  "license": "MIT",
+  "peerDependencies": {
+    "@monaco-editor/react": ">=4.0.0",
+    "@react-spring/three": ">=9.0.0",
+    "@react-three/fiber": ">=8.0.0",
+    "monaco-editor": ">=0.50.0",
+    "motely-wasm": "^10.2.0 || ^11.0.0 || ^12.0.0 || ^13.0.0 || ^14.0.0",
+    "react": "^18.2.0 || ^19.0.0",
+    "react-dom": "^18.2.0 || ^19.0.0",
+    "react-icons": ">=5.0.0",
+    "three": ">=0.150.0",
+    "@react-three/drei": ">=9.0.0"
+  },
+  "peerDependenciesMeta": {
+    "@react-spring/three": {
+      "optional": true
+    },
+    "@react-three/fiber": {
+      "optional": true
+    },
+    "motely-wasm": {
+      "optional": true
+    },
+    "react-icons": {
+      "optional": true
+    },
+    "three": {
+      "optional": true
+    },
+    "@react-three/drei": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@google/design.md": "^0.1.1",
+    "@monaco-editor/react": "^4.7.0",
+    "@react-spring/three": "^10.0.3",
+    "@react-three/fiber": "^9.6.0",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
+    "@types/three": "^0.184.0",
+    "@vitejs/plugin-react": "^5.0.4",
+    "monaco-editor": "^0.55.1",
+    "motely-wasm": "^14.0.2",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4",
+    "react-icons": "^5.6.0",
+    "three": "^0.184.0",
+    "typescript": "^5.9.3",
+    "vite": "^8.0.9"
+  },
+  "dependencies": {
+    "@react-three/drei": "^10.7.7"
+  }
+}

package/assets/Balatro Seed Curator (DesignsV2)/.design-canvas.state.json

@@ -1 +0,0 @@
-{"sections":{"seed-detail":{"labels":{"hifi":"Hi-fi · Balatro native"}}}}