jaml-ui 0.9.0 → 0.10.0

package/dist/ui/jimboTabs.d.ts

@@ -0,0 +1,25 @@
+import React from 'react';
+export interface JimboTabItem {
+    id: string;
+    label: string;
+}
+export interface JimboTabsProps {
+    tabs: JimboTabItem[];
+    activeTab: string;
+    onTabChange: (tabId: string) => void;
+    className?: string;
+    style?: React.CSSProperties;
+}
+/**
+ * Horizontal tab navigation with bouncing triangle indicator on the active
+ * tab. Ported from JAMMY's jimbo-ui/Tabs.tsx — triangle attaches to each
+ * button and animates only on the active one.
+ */
+export declare function JimboTabs({ tabs, activeTab, onTabChange, className, style }: JimboTabsProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Vertical tab strip — rotated labels (writing-mode) for space efficiency.
+ * Ported from JAMMY's JimboVerticalTabs. Typical use: inline on the left
+ * side of a content panel to pick between content categories
+ * (e.g. JOKERS / CONSUMABLES / VOUCHERS).
+ */
+export declare function JimboVerticalTabs({ tabs, activeTab, onTabChange, className, style }: JimboTabsProps): import("react/jsx-runtime").JSX.Element;

package/dist/ui/jimboTabs.js

@@ -0,0 +1,59 @@
+'use client';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { JimboColorOption, JIMBO_ANIMATIONS } from './tokens.js';
+import { JimboText } from './jimboText.js';
+/**
+ * Horizontal tab navigation with bouncing triangle indicator on the active
+ * tab. Ported from JAMMY's jimbo-ui/Tabs.tsx — triangle attaches to each
+ * button and animates only on the active one.
+ */
+export function JimboTabs({ tabs, activeTab, onTabChange, className = '', style }) {
+    return (_jsxs(_Fragment, { children: [_jsx("div", { className: className, style: { display: 'flex', gap: 8, alignItems: 'flex-end', ...style }, children: tabs.map((tab) => (_jsx(TabButton, { label: tab.label, active: activeTab === tab.id, onClick: () => onTabChange(tab.id) }, tab.id))) }), _jsx("style", { children: JIMBO_BOUNCE_KEYFRAMES })] }));
+}
+const JIMBO_BOUNCE_KEYFRAMES = `
+  @keyframes jimbo-bounce {
+    0%, 100% { transform: translateY(0); }
+    50%      { transform: translateY(-3px); }
+  }
+`;
+function TabButton({ label, active, onClick }) {
+    const [pressed, setPressed] = useState(false);
+    return (_jsxs("div", { style: { position: 'relative', display: 'flex', flexDirection: 'column', alignItems: 'center' }, children: [_jsx("div", { style: {
+                    marginBottom: 4,
+                    opacity: active ? 1 : 0,
+                    transition: 'opacity 150ms',
+                    animation: active ? 'jimbo-bounce 0.8s cubic-bezier(0.68, 0, 0.68, 1) infinite' : 'none',
+                }, "aria-hidden": true, children: _jsx("svg", { width: 14, height: 10, viewBox: "0 0 14 10", fill: JimboColorOption.RED, children: _jsx("polygon", { points: "7,10 0,0 14,0" }) }) }), _jsx("button", { type: "button", onClick: onClick, onMouseDown: () => setPressed(true), onMouseUp: () => setPressed(false), onMouseLeave: () => setPressed(false), onTouchStart: () => setPressed(true), onTouchEnd: () => setPressed(false), style: {
+                    border: 'none',
+                    cursor: 'pointer',
+                    borderRadius: 8,
+                    padding: '8px 16px',
+                    backgroundColor: JimboColorOption.RED,
+                    transform: pressed ? `translateY(${JIMBO_ANIMATIONS.PRESS_TRANSLATE_Y}px)` : 'translateY(0)',
+                    boxShadow: pressed ? 'none' : `0 ${JIMBO_ANIMATIONS.PRESS_TRANSLATE_Y}px 0 0 ${JimboColorOption.BLACK}80`,
+                    transition: `transform ${JIMBO_ANIMATIONS.PRESS_DURATION}ms ease, box-shadow ${JIMBO_ANIMATIONS.PRESS_DURATION}ms ease`,
+                }, children: _jsx(JimboText, { size: "sm", uppercase: true, children: label }) })] }));
+}
+/**
+ * Vertical tab strip — rotated labels (writing-mode) for space efficiency.
+ * Ported from JAMMY's JimboVerticalTabs. Typical use: inline on the left
+ * side of a content panel to pick between content categories
+ * (e.g. JOKERS / CONSUMABLES / VOUCHERS).
+ */
+export function JimboVerticalTabs({ tabs, activeTab, onTabChange, className = '', style }) {
+    return (_jsx("div", { className: className, style: { display: 'flex', flexDirection: 'column', gap: 4, ...style }, children: tabs.map((tab) => {
+            const isActive = activeTab === tab.id;
+            return (_jsx("button", { type: "button", onClick: () => onTabChange(tab.id), style: {
+                    border: 'none',
+                    cursor: 'pointer',
+                    borderRadius: '8px 0 0 8px',
+                    padding: '16px 8px',
+                    backgroundColor: isActive ? JimboColorOption.DARK_GREY : JimboColorOption.INNER_BORDER,
+                    writingMode: 'vertical-rl',
+                    textOrientation: 'mixed',
+                    transform: 'rotate(180deg)',
+                    transition: 'background-color 120ms ease',
+                }, children: _jsx(JimboText, { size: "sm", uppercase: true, tone: isActive ? 'default' : 'grey', children: tab.label }) }, tab.id));
+        }) }));
+}

package/dist/ui/jimboText.d.ts

@@ -0,0 +1,26 @@
+import React from 'react';
+export type JimboTextTone = 'default' | 'mult' | 'chips' | 'gold' | 'green' | 'red' | 'blue' | 'orange' | 'purple' | 'grey';
+export type JimboTextSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+export interface JimboTextProps extends React.HTMLAttributes<HTMLElement> {
+    tone?: JimboTextTone;
+    size?: JimboTextSize;
+    /** Canonical Balatro drop shadow (1px right, 1px down, ${BLACK}cc). Default true. */
+    shadow?: boolean;
+    /** Uppercase + spacing — Balatro button/pill label treatment. Default false. */
+    uppercase?: boolean;
+    /** Letter-spacing override; defaults depend on uppercase prop. */
+    letterSpacing?: number | string;
+    as?: 'span' | 'p' | 'div' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'label';
+    children?: React.ReactNode;
+}
+/**
+ * Canonical pixel-font text wrapper. Uses `m6x11plus` as its family and
+ * applies the authentic Balatro drop shadow by default. Prefer this over
+ * hand-rolling `fontFamily: 'm6x11plus, monospace'` + `textShadow` strings
+ * throughout consumers — it keeps the styling drift-free.
+ *
+ * Requires `import 'jaml-ui/fonts.css'` somewhere in the consumer bundle
+ * so the @font-face declaration lands (font is base64-embedded, no
+ * runtime fetch).
+ */
+export declare function JimboText({ tone, size, shadow, uppercase, letterSpacing, as: Tag, style, children, ...rest }: JimboTextProps): import("react/jsx-runtime").JSX.Element;

package/dist/ui/jimboText.js

@@ -0,0 +1,45 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { JimboColorOption } from './tokens.js';
+const TONE_COLOR = {
+    default: JimboColorOption.WHITE,
+    mult: JimboColorOption.RED,
+    chips: JimboColorOption.BLUE,
+    gold: JimboColorOption.GOLD_TEXT,
+    green: JimboColorOption.GREEN_TEXT,
+    red: JimboColorOption.RED,
+    blue: JimboColorOption.BLUE,
+    orange: JimboColorOption.ORANGE_TEXT,
+    purple: JimboColorOption.PURPLE,
+    grey: JimboColorOption.GREY,
+};
+const SIZE_PX = {
+    xs: 10,
+    sm: 12,
+    md: 14,
+    lg: 18,
+    xl: 24,
+};
+/**
+ * Canonical pixel-font text wrapper. Uses `m6x11plus` as its family and
+ * applies the authentic Balatro drop shadow by default. Prefer this over
+ * hand-rolling `fontFamily: 'm6x11plus, monospace'` + `textShadow` strings
+ * throughout consumers — it keeps the styling drift-free.
+ *
+ * Requires `import 'jaml-ui/fonts.css'` somewhere in the consumer bundle
+ * so the @font-face declaration lands (font is base64-embedded, no
+ * runtime fetch).
+ */
+export function JimboText({ tone = 'default', size = 'md', shadow = true, uppercase = false, letterSpacing, as: Tag = 'span', style, children, ...rest }) {
+    const resolvedLetterSpacing = letterSpacing ?? (uppercase ? 2 : undefined);
+    return (_jsx(Tag, { style: {
+            fontFamily: "'m6x11plus', 'Courier New', monospace",
+            fontSize: SIZE_PX[size],
+            color: TONE_COLOR[tone],
+            textShadow: shadow ? `1px 1px 0 ${JimboColorOption.BLACK}cc` : 'none',
+            textTransform: uppercase ? 'uppercase' : 'none',
+            letterSpacing: resolvedLetterSpacing,
+            lineHeight: 1.2,
+            ...style,
+        }, ...rest, children: children }));
+}

package/dist/ui/jimboTooltip.d.ts

@@ -0,0 +1,35 @@
+import React from 'react';
+export type JimboTooltipMode = 'snap' | 'mouse';
+export type JimboTooltipPlacement = 'top' | 'bottom' | 'auto';
+export interface JimboTooltipProps {
+    /** Content rendered inside the tooltip panel. Typically a card's ability text, joker description, etc. */
+    content: React.ReactNode;
+    /** The target element the tooltip anchors to. */
+    children: React.ReactElement;
+    /** `snap` (default): tooltip sits above/below the target's bounding rect.
+     *  `mouse`: tooltip follows the mouse position while hovering. */
+    mode?: JimboTooltipMode;
+    /** Only used in `snap` mode. Default `auto` picks top if there's room, else bottom. */
+    placement?: JimboTooltipPlacement;
+    /** Hover delay in ms before the tooltip appears. Default 80. */
+    delay?: number;
+    /** Max width of the tooltip panel (px). Default 280. */
+    maxWidth?: number;
+    /** Disable the tooltip entirely (e.g. when the target is disabled). */
+    disabled?: boolean;
+}
+/**
+ * Canonical Balatro-style tooltip: dark panel, silver border, pixel font.
+ * Wrap any target to get a hover/focus popover.
+ *
+ *   <JimboTooltip content={<JimboText size="sm">Gains +4 mult per face card</JimboText>}>
+ *     <GameCard joker="Blueprint" />
+ *   </JimboTooltip>
+ *
+ * Modes:
+ *  - `snap` (default): anchored to the target's bounding rect, chooses
+ *    top or bottom automatically so it stays in viewport.
+ *  - `mouse`: follows the mouse position — useful for large targets
+ *    (full card fans, zone rails) where "above the element" is imprecise.
+ */
+export declare function JimboTooltip({ content, children, mode, placement, delay, maxWidth, disabled, }: JimboTooltipProps): import("react/jsx-runtime").JSX.Element;

package/dist/ui/jimboTooltip.js

@@ -0,0 +1,109 @@
+'use client';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useEffect, useRef, useState } from 'react';
+import { JimboColorOption } from './tokens.js';
+/**
+ * Canonical Balatro-style tooltip: dark panel, silver border, pixel font.
+ * Wrap any target to get a hover/focus popover.
+ *
+ *   <JimboTooltip content={<JimboText size="sm">Gains +4 mult per face card</JimboText>}>
+ *     <GameCard joker="Blueprint" />
+ *   </JimboTooltip>
+ *
+ * Modes:
+ *  - `snap` (default): anchored to the target's bounding rect, chooses
+ *    top or bottom automatically so it stays in viewport.
+ *  - `mouse`: follows the mouse position — useful for large targets
+ *    (full card fans, zone rails) where "above the element" is imprecise.
+ */
+export function JimboTooltip({ content, children, mode = 'snap', placement = 'auto', delay = 80, maxWidth = 280, disabled = false, }) {
+    const [visible, setVisible] = useState(false);
+    const [pos, setPos] = useState(null);
+    const targetRef = useRef(null);
+    const tooltipRef = useRef(null);
+    const delayTimerRef = useRef(null);
+    useEffect(() => () => {
+        if (delayTimerRef.current)
+            clearTimeout(delayTimerRef.current);
+    }, []);
+    const show = () => {
+        if (disabled)
+            return;
+        if (delayTimerRef.current)
+            clearTimeout(delayTimerRef.current);
+        delayTimerRef.current = setTimeout(() => setVisible(true), delay);
+    };
+    const hide = () => {
+        if (delayTimerRef.current)
+            clearTimeout(delayTimerRef.current);
+        setVisible(false);
+        setPos(null);
+    };
+    const computeSnapPos = () => {
+        const el = targetRef.current;
+        const tip = tooltipRef.current;
+        if (!el || !tip)
+            return;
+        const rect = el.getBoundingClientRect();
+        const tipRect = tip.getBoundingClientRect();
+        const roomAbove = rect.top;
+        const align = placement === 'top' ? 'top'
+            : placement === 'bottom' ? 'bottom'
+                : roomAbove >= tipRect.height + 12 ? 'top' : 'bottom';
+        const left = rect.left + rect.width / 2 - tipRect.width / 2;
+        const top = align === 'top' ? rect.top - tipRect.height - 8 : rect.bottom + 8;
+        setPos({ left: Math.max(8, Math.min(window.innerWidth - tipRect.width - 8, left)), top, align });
+    };
+    useEffect(() => {
+        if (!visible || mode !== 'snap')
+            return;
+        // Recompute after the tooltip renders so its size is known.
+        const raf = requestAnimationFrame(computeSnapPos);
+        window.addEventListener('resize', computeSnapPos);
+        window.addEventListener('scroll', computeSnapPos, true);
+        return () => {
+            cancelAnimationFrame(raf);
+            window.removeEventListener('resize', computeSnapPos);
+            window.removeEventListener('scroll', computeSnapPos, true);
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [visible, mode, placement]);
+    const handleMouseMove = (e) => {
+        if (mode !== 'mouse')
+            return;
+        setPos({ left: e.clientX + 12, top: e.clientY + 16, align: 'bottom' });
+    };
+    const child = React.Children.only(children);
+    const refHandler = (node) => {
+        targetRef.current = node;
+        const childRef = child.ref;
+        if (typeof childRef === 'function')
+            childRef(node);
+        else if (childRef && 'current' in childRef)
+            childRef.current = node;
+    };
+    const wrapped = React.cloneElement(child, {
+        ref: refHandler,
+        onMouseEnter: (e) => { show(); child.props.onMouseEnter?.(e); },
+        onMouseLeave: (e) => { hide(); child.props.onMouseLeave?.(e); },
+        onFocus: (e) => { show(); child.props.onFocus?.(e); },
+        onBlur: (e) => { hide(); child.props.onBlur?.(e); },
+        onMouseMove: (e) => { handleMouseMove(e); child.props.onMouseMove?.(e); },
+    });
+    return (_jsxs(_Fragment, { children: [wrapped, visible ? (_jsx("div", { ref: tooltipRef, role: "tooltip", style: {
+                    position: 'fixed',
+                    left: pos?.left ?? -9999,
+                    top: pos?.top ?? -9999,
+                    maxWidth,
+                    padding: '6px 10px',
+                    borderRadius: 6,
+                    background: JimboColorOption.DARKEST,
+                    border: `2px solid ${JimboColorOption.BORDER_SILVER}`,
+                    boxShadow: `0 2px 0 ${JimboColorOption.BLACK}cc`,
+                    color: JimboColorOption.WHITE,
+                    pointerEvents: 'none',
+                    zIndex: 10000,
+                    opacity: pos ? 1 : 0,
+                    transition: 'opacity 120ms ease',
+                }, children: content })) : null] }));
+}

package/dist/ui/panel.js

@@ -2,6 +2,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState, useEffect, useRef, memo } from 'react';
 import { JimboColorOption, JIMBO_ANIMATIONS } from './tokens.js';
+import { JimboText } from './jimboText.js';
 export const JimboPanel = memo(({ children, className = '', sway = false, onBack, hideBack = false, style, ...props }) => {
     const panelRef = useRef(null);
     useEffect(() => {
@@ -44,7 +45,7 @@ export function JimboButton({ tone = 'orange', size = 'md', fullWidth = false, d
     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 fs = size === 'xs' ? 10 : size === 'sm' ? 12 : size === 'lg' ? 18 : 14;
+    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)
             setPressed(true); }, onTouchEnd: () => setPressed(false), onClick: () => { if (!disabled)
@@ -53,10 +54,7 @@ export function JimboButton({ tone = 'orange', size = 'md', fullWidth = false, d
                     transform: pressed ? 'translate(1px, 3px)' : 'translate(0,0)',
                     transition: 'transform 55ms linear',
                     textAlign: 'center',
-                    fontFamily: 'm6x11plus, monospace', fontSize: fs, letterSpacing: 2,
-                    color: '#fff', textShadow: '1px 1px 0 rgba(0,0,0,0.8)',
-                    textTransform: 'uppercase', lineHeight: 1.1,
-                }, children: children })] }));
+                }, children: _jsx(JimboText, { size: textSize, uppercase: true, 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" }) }));
@@ -77,5 +75,5 @@ export function JimboModal({ children, open, onClose, title, className }) {
     }, [open]);
     if (!visible)
         return null;
-    return (_jsx("div", { style: { position: 'fixed', inset: 0, zIndex: 50, display: 'flex', alignItems: 'center', justifyContent: 'center', padding: '1rem', background: 'rgba(0,0,0,0.7)', opacity, transition: `opacity ${JIMBO_ANIMATIONS.MENU_SINK_DURATION}ms ease` }, onClick: onClose, children: _jsxs(JimboPanel, { sway: true, onBack: onClose, className: 'w-full flex flex-col max-h-[90vh] ' + (className ?? 'max-w-lg'), onClick: (e) => e.stopPropagation(), children: [title && _jsx("h2", { style: { fontFamily: 'm6x11plus, monospace', color: '#fff', textAlign: 'center', margin: '0 0 1rem', fontSize: '1.25rem' }, children: title }), children] }) }));
+    return (_jsx("div", { style: { position: 'fixed', inset: 0, zIndex: 50, display: 'flex', alignItems: 'center', justifyContent: 'center', padding: '1rem', background: 'rgba(0,0,0,0.7)', opacity, transition: `opacity ${JIMBO_ANIMATIONS.MENU_SINK_DURATION}ms ease` }, onClick: onClose, children: _jsxs(JimboPanel, { sway: true, onBack: onClose, className: 'w-full flex flex-col max-h-[90vh] ' + (className ?? 'max-w-lg'), onClick: (e) => e.stopPropagation(), children: [title && _jsx(JimboText, { as: "h2", size: "lg", style: { textAlign: 'center', margin: '0 0 1rem' }, children: title }), children] }) }));
 }

package/dist/ui/tokens.d.ts

@@ -61,10 +61,11 @@ export declare const JIMBO_ANIMATIONS: {
     readonly CARD_TILT_MAX: 6;
     readonly MENU_SINK_DURATION: 200;
     readonly MENU_RISE_DURATION: 300;
+    readonly MENU_ORBIT_DURATION: 320;
     readonly LETTER_POP_RATE: 3;
     readonly LETTER_BUMP_RATE: 2.666;
 };
-export type ButtonVariant = 'primary' | 'secondary' | 'danger' | 'back' | 'ghost';
+export type ButtonVariant = 'primary' | 'secondary' | 'danger' | 'action' | 'back' | 'ghost';
 export declare const BUTTON_COLORS: Record<ButtonVariant, {
     bg: string;
     hover: string;

package/dist/ui/tokens.js

@@ -66,6 +66,7 @@ export const JIMBO_ANIMATIONS = {
     CARD_TILT_MAX: 6,
     MENU_SINK_DURATION: 200,
     MENU_RISE_DURATION: 300,
+    MENU_ORBIT_DURATION: 320,
     LETTER_POP_RATE: 3,
     LETTER_BUMP_RATE: 2.666,
 };
@@ -73,6 +74,7 @@ export const BUTTON_COLORS = {
     primary: { bg: JimboColorOption.RED, hover: JimboColorOption.DARK_RED, text: JimboColorOption.WHITE },
     secondary: { bg: JimboColorOption.BLUE, hover: JimboColorOption.DARK_BLUE, text: JimboColorOption.WHITE },
     danger: { bg: JimboColorOption.RED, hover: JimboColorOption.DARK_RED, text: JimboColorOption.WHITE },
+    action: { bg: JimboColorOption.RED, hover: JimboColorOption.DARK_RED, text: JimboColorOption.WHITE },
     back: { bg: JimboColorOption.ORANGE, hover: JimboColorOption.DARK_ORANGE, text: JimboColorOption.WHITE },
     ghost: { bg: 'transparent', hover: 'rgba(255,255,255,0.1)', text: JimboColorOption.WHITE },
 };

package/dist/ui.d.ts

@@ -1,5 +1,11 @@
 export * from './ui/tokens.js';
+export * from './ui/jimboText.js';
 export * from './ui/panel.js';
+export * from './ui/jimboTabs.js';
+export * from './ui/jimboFlankNav.js';
+export * from './ui/jimboFilterBar.js';
+export * from './ui/jimboBackground.js';
+export * from './ui/jimboTooltip.js';
 export * from './ui/codeBlock.js';
 export * from './ui/footer.js';
 export * from './ui/sprites.js';

package/dist/ui.js

@@ -1,5 +1,11 @@
 export * from './ui/tokens.js';
+export * from './ui/jimboText.js';
 export * from './ui/panel.js';
+export * from './ui/jimboTabs.js';
+export * from './ui/jimboFlankNav.js';
+export * from './ui/jimboFilterBar.js';
+export * from './ui/jimboBackground.js';
+export * from './ui/jimboTooltip.js';
 export * from './ui/codeBlock.js';
 export * from './ui/footer.js';
 export * from './ui/sprites.js';