jaml-ui 0.24.19 → 0.25.1

package/dist/stories/Page.js

@@ -1,8 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React from 'react';
-import { Header } from './Header';
-import './page.css';
-export const Page = () => {
-    const [user, setUser] = React.useState();
-    return (_jsxs("article", { children: [_jsx(Header, { user: user, onLogin: () => setUser({ name: 'Jane Doe' }), onLogout: () => setUser(undefined), onCreateAccount: () => setUser({ name: 'Jane Doe' }) }), _jsxs("section", { className: "storybook-page", children: [_jsx("h2", { children: "Pages in Storybook" }), _jsxs("p", { children: ["We recommend building UIs with a", ' ', _jsx("a", { href: "https://componentdriven.org", target: "_blank", rel: "noopener noreferrer", children: _jsx("strong", { children: "component-driven" }) }), ' ', "process starting with atomic components and ending with pages."] }), _jsx("p", { children: "Render pages with mock data. This makes it easy to build and review page states without needing to navigate to them in your app. Here are some handy patterns for managing page data in Storybook:" }), _jsxs("ul", { children: [_jsx("li", { children: "Use a higher-level connected component. Storybook helps you compose such data from the \"args\" of child component stories" }), _jsx("li", { children: "Assemble data in the page component from your services. You can mock these services out using Storybook." })] }), _jsxs("p", { children: ["Get a guided tutorial on component-driven development at", ' ', _jsx("a", { href: "https://storybook.js.org/tutorials/", target: "_blank", rel: "noopener noreferrer", children: "Storybook tutorials" }), ". Read more in the", ' ', _jsx("a", { href: "https://storybook.js.org/docs", target: "_blank", rel: "noopener noreferrer", children: "docs" }), "."] }), _jsxs("div", { className: "tip-wrapper", children: [_jsx("span", { className: "tip", children: "Tip" }), " Adjust the width of the canvas with the", ' ', _jsx("svg", { width: "10", height: "10", viewBox: "0 0 12 12", xmlns: "http://www.w3.org/2000/svg", children: _jsx("g", { fill: "none", fillRule: "evenodd", children: _jsx("path", { d: "M1.5 5.2h4.8c.3 0 .5.2.5.4v5.1c-.1.2-.3.3-.4.3H1.4a.5.5 0 01-.5-.4V5.7c0-.3.2-.5.5-.5zm0-2.1h6.9c.3 0 .5.2.5.4v7a.5.5 0 01-1 0V4H1.5a.5.5 0 010-1zm0-2.1h9c.3 0 .5.2.5.4v9.1a.5.5 0 01-1 0V2H1.5a.5.5 0 010-1zm4.3 5.2H2V10h3.8V6.2z", id: "a", fill: "#999" }) }) }), "Viewports addon in the toolbar"] })] })] }));
-};

package/dist/stories/Page.stories.d.ts

@@ -1,12 +0,0 @@
-import type { StoryObj } from '@storybook/react-vite';
-declare const meta: {
-    title: string;
-    component: import("react").FC<{}>;
-    parameters: {
-        layout: string;
-    };
-};
-export default meta;
-type Story = StoryObj<typeof meta>;
-export declare const LoggedOut: Story;
-export declare const LoggedIn: Story;

package/dist/stories/Page.stories.js

@@ -1,24 +0,0 @@
-import { expect, userEvent, within } from 'storybook/test';
-import { Page } from './Page';
-const meta = {
-    title: 'Example/Page',
-    component: Page,
-    parameters: {
-        // More on how to position stories at: https://storybook.js.org/docs/configure/story-layout
-        layout: 'fullscreen',
-    },
-};
-export default meta;
-export const LoggedOut = {};
-// More on component testing: https://storybook.js.org/docs/writing-tests/interaction-testing
-export const LoggedIn = {
-    play: async ({ canvasElement }) => {
-        const canvas = within(canvasElement);
-        const loginButton = canvas.getByRole('button', { name: /Log in/i });
-        await expect(loginButton).toBeInTheDocument();
-        await userEvent.click(loginButton);
-        await expect(loginButton).not.toBeInTheDocument();
-        const logoutButton = canvas.getByRole('button', { name: /Log out/i });
-        await expect(logoutButton).toBeInTheDocument();
-    },
-};

package/dist/ui/Jimbo.stories.d.ts

@@ -1,7 +0,0 @@
-import type { StoryObj } from '@storybook/react';
-import "./jimbo.css";
-declare const meta: Meta;
-export default meta;
-export declare const Typography: StoryObj;
-export declare const Buttons: StoryObj;
-export declare const Modal: StoryObj;

package/dist/ui/Jimbo.stories.js

@@ -1,28 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { JimboButton, JimboText, JimboModalRoot, useJimboModal } from './index';
-import "./jimbo.css";
-const meta = {
-    title: 'JimboUI/Core',
-    parameters: {
-        layout: 'centered',
-    },
-};
-export default meta;
-export const Typography = {
-    render: () => (_jsxs("div", { className: "j-panel", style: { display: "flex", flexDirection: "column", gap: 10, padding: 20 }, children: [_jsx(JimboText, { size: "title", tone: "white", children: "Title Text" }), _jsx(JimboText, { size: "header", tone: "gold", children: "Header Text (Gold)" }), _jsx(JimboText, { size: "lg", tone: "white", children: "Large Text" }), _jsx(JimboText, { size: "md", tone: "grey", children: "Medium Text (Grey)" }), _jsx(JimboText, { size: "sm", tone: "blue", children: "Small Text (Blue)" }), _jsx(JimboText, { size: "xs", tone: "red", children: "Extra Small (Red)" }), _jsx(JimboText, { size: "micro", tone: "tarot", children: "Micro Text (Tarot)" })] })),
-};
-export const Buttons = {
-    render: () => (_jsxs("div", { className: "j-panel", style: { display: "flex", flexDirection: "column", gap: 10, padding: 20, width: 300 }, children: [_jsx(JimboButton, { tone: "gold", size: "lg", children: "Large Gold Button" }), _jsx(JimboButton, { tone: "blue", size: "md", children: "Medium Blue Button" }), _jsx(JimboButton, { tone: "red", size: "sm", children: "Small Red Button" }), _jsx(JimboButton, { tone: "grey", size: "xs", children: "XS Grey Button" }), _jsxs("div", { style: { display: "flex", gap: 10 }, children: [_jsx(JimboButton, { tone: "tarot", size: "md", style: { flex: 1 }, children: "Flex 1" }), _jsx(JimboButton, { tone: "planet", size: "md", style: { flex: 1 }, children: "Flex 2" })] })] })),
-};
-const ModalDemo = () => {
-    const { openModal, closeModal } = useJimboModal();
-    return (_jsxs("div", { className: "j-panel", style: { padding: 20, textAlign: "center" }, children: [_jsx(JimboText, { size: "lg", tone: "white", children: "Modal Testing" }), _jsx("div", { style: { height: 20 } }), _jsx(JimboButton, { tone: "gold", size: "md", onClick: () => {
-                    openModal("demo-modal", (_jsxs("div", { style: { padding: 20 }, children: [_jsx(JimboText, { size: "md", tone: "white", children: "This is a JimboModal!" }), _jsx("div", { style: { height: 20 } }), _jsx(JimboButton, { tone: "red", size: "sm", onClick: () => closeModal(), children: "Close" })] })));
-                }, children: "Open Modal" })] }));
-};
-export const Modal = {
-    decorators: [
-        (Story) => (_jsxs("div", { style: { width: 375, height: 600, border: "1px solid #333", position: "relative", overflow: "hidden" }, children: [_jsx(Story, {}), _jsx(JimboModalRoot, {})] }))
-    ],
-    render: () => _jsx(ModalDemo, {})
-};

package/dist/ui/JimboBadge.js

@@ -1,8 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-/**
- * Small colored label pill. Matches Balatro's in-game tag/rarity badges.
- * All styling via jimbo.css `.j-badge` classes.
- */
-export function JimboBadge({ size = 'sm', tone = 'dark', className, children }) {
-    return (_jsx("span", { className: `j-badge j-badge--${size} j-badge--${tone} ${className ?? ''}`, children: children }));
-}

package/dist/ui/JimboFloating.js

@@ -1,17 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-export function JimboFloating({ anchor = 'top-right', offset = 12, zIndex = 20, children }) {
-    const pos = { position: 'absolute', zIndex };
-    if (anchor.includes('top'))
-        pos.top = offset;
-    if (anchor.includes('bottom'))
-        pos.bottom = offset;
-    if (anchor.includes('left'))
-        pos.left = offset;
-    if (anchor.includes('right'))
-        pos.right = offset;
-    if (anchor.includes('center')) {
-        pos.left = '50%';
-        pos.transform = 'translateX(-50%)';
-    }
-    return (_jsx("div", { style: pos, children: children }));
-}

package/dist/ui/JimboIconButton.js

@@ -1,28 +0,0 @@
-// PORTABLE — intended for jaml-ui/src/ui/jimboIconButton.tsx
-// On paste, replace `from 'jaml-ui'` with `from './tokens.js'`.
-"use client";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { JimboColorOption } from "./tokens.js";
-import { useState } from "react";
-const C = JimboColorOption;
-export function JimboIconButton({ onClick, title, "aria-label": ariaLabel, disabled = false, size = "md", children, }) {
-    const [hover, setHover] = useState(false);
-    const side = size === "sm" ? 26 : 30;
-    return (_jsx("button", { "aria-label": ariaLabel ?? title, disabled: disabled, onClick: () => !disabled && onClick?.(), onMouseEnter: () => setHover(true), onMouseLeave: () => setHover(false), style: {
-            width: side,
-            height: side,
-            display: "inline-flex",
-            alignItems: "center",
-            justifyContent: "center",
-            background: hover && !disabled ? C.DARK_GREY : C.DARKEST,
-            color: C.WHITE,
-            border: `1px solid ${C.PANEL_EDGE}`,
-            borderRadius: 4,
-            cursor: disabled ? "not-allowed" : "pointer",
-            opacity: disabled ? 0.55 : 1,
-            padding: 0,
-            fontSize: 14,
-            lineHeight: 1,
-            transition: "background 80ms ease",
-        }, title: title, type: "button", children: children }));
-}

package/dist/ui/JimboInputModal.js

@@ -1,66 +0,0 @@
-// PORTABLE — intended for jaml-ui/src/ui/jimboInputModal.tsx
-// On paste, replace `from 'jaml-ui'` with `from './panel.js'`/`./tokens.js` as appropriate.
-"use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { JimboButton, JimboModal } from "./panel.js";
-import { JimboColorOption } from "./tokens.js";
-import { JimboText } from "./jimboText.js";
-import { useEffect, useRef, useState } from "react";
-const C = JimboColorOption;
-export function JimboInputModal({ open, title, message, placeholder, initialValue = "", confirmLabel = "Confirm", cancelLabel = "Cancel", validate, onConfirm, onCancel, }) {
-    const [value, setValue] = useState(initialValue);
-    const [error, setError] = useState(null);
-    const inputRef = useRef(null);
-    const [prevOpen, setPrevOpen] = useState(open);
-    if (open !== prevOpen) {
-        setPrevOpen(open);
-        if (open) {
-            setValue(initialValue);
-            setError(null);
-        }
-    }
-    useEffect(() => {
-        if (open) {
-            const t = setTimeout(() => inputRef.current?.focus(), 30);
-            return () => clearTimeout(t);
-        }
-    }, [open]);
-    function submit() {
-        const err = validate?.(value) ?? null;
-        if (err) {
-            setError(err);
-            return;
-        }
-        onConfirm(value);
-    }
-    return (_jsxs(JimboModal, { onClose: onCancel, open: open, title: title, children: [message && (_jsx(JimboText, { size: "sm", style: { display: "block", marginBottom: 8 }, tone: "grey", children: message })), _jsx("input", { "aria-invalid": error ? "true" : "false", onChange: (e) => {
-                    setValue(e.target.value);
-                    if (error) {
-                        setError(null);
-                    }
-                }, onKeyDown: (e) => {
-                    if (e.key === "Enter") {
-                        submit();
-                    }
-                    if (e.key === "Escape") {
-                        onCancel();
-                    }
-                }, placeholder: placeholder, ref: inputRef, style: {
-                    width: "100%",
-                    padding: "8px 10px",
-                    background: C.DARKEST,
-                    color: C.WHITE,
-                    border: `1px solid ${error ? C.RED : C.PANEL_EDGE}`,
-                    borderRadius: 4,
-                    fontSize: 13,
-                    fontFamily: "m6x11plus, monospace",
-                    letterSpacing: 1,
-                    outline: "none",
-                    boxSizing: "border-box",
-                }, type: "text", value: value }), error && (_jsx(JimboText, { size: "sm", style: { display: "block", marginTop: 6 }, tone: "red", children: error })), _jsxs("div", { style: {
-                    display: "flex",
-                    justifyContent: "flex-end",
-                    gap: 8,
-                    marginTop: 14,
-                }, children: [_jsx(JimboButton, { onClick: onCancel, size: "sm", tone: "red", children: cancelLabel }), _jsx(JimboButton, { onClick: submit, size: "sm", tone: "blue", children: confirmLabel })] })] }));
-}

package/dist/ui/JimboSelect.js

@@ -1,43 +0,0 @@
-// PORTABLE — intended for jaml-ui/src/ui/jimboSelect.tsx
-// On paste, replace `from 'jaml-ui'` with `from './tokens.js'`.
-"use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { JimboColorOption } from "./tokens.js";
-const C = JimboColorOption;
-export function JimboSelect({ value, options, onChange, placeholder, disabled = false, fullWidth = true, size = "md", style, "aria-label": ariaLabel, }) {
-    let normalized;
-    if (options.length === 0) {
-        normalized = [];
-    }
-    else if (typeof options[0] === "string") {
-        normalized = options.map((v) => ({ value: v }));
-    }
-    else {
-        normalized = options;
-    }
-    const pad = size === "sm" ? "4px 8px" : "6px 10px";
-    const fontSize = size === "sm" ? 11 : 12;
-    return (_jsxs("select", { "aria-label": ariaLabel, disabled: disabled, onChange: (e) => onChange(e.target.value), style: {
-            width: fullWidth ? "100%" : undefined,
-            padding: pad,
-            background: C.DARKEST,
-            color: C.WHITE,
-            border: `1px solid ${C.PANEL_EDGE}`,
-            borderRadius: 4,
-            fontSize,
-            fontFamily: "m6x11plus, monospace",
-            cursor: disabled ? "not-allowed" : "pointer",
-            opacity: disabled ? 0.55 : 1,
-            appearance: "none",
-            backgroundImage: "linear-gradient(45deg, transparent 50%, " +
-                C.GOLD_TEXT +
-                " 50%), linear-gradient(135deg, " +
-                C.GOLD_TEXT +
-                " 50%, transparent 50%)",
-            backgroundPosition: "calc(100% - 12px) 50%, calc(100% - 7px) 50%",
-            backgroundSize: "5px 5px, 5px 5px",
-            backgroundRepeat: "no-repeat",
-            paddingRight: 22,
-            ...style,
-        }, value: value, children: [placeholder !== undefined && (_jsx("option", { disabled: true, value: "", children: placeholder })), normalized.map((opt) => (_jsx("option", { disabled: opt.disabled, value: opt.value, children: opt.label ?? opt.value }, opt.value)))] }));
-}

package/dist/ui/JimboToggleList.js

@@ -1,5 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { JimboPanel } from './panel.js';
-export function JimboToggleList({ items, onToggle, title }) {
-    return (_jsx(JimboPanel, { children: _jsxs("div", { className: "j-toggle-list", children: [title && _jsx("div", { className: "j-toggle-list__title", children: title }), items.map(item => (_jsxs("button", { type: "button", className: "j-toggle-item", onClick: () => onToggle(item.id), children: [_jsx("div", { className: "j-toggle-check", "data-on": item.on }), item.label] }, item.id)))] }) }));
-}

package/dist/ui/PanelSplitter.js

@@ -1,78 +0,0 @@
-// PORTABLE — intended for jaml-ui/src/ui/panelSplitter.tsx
-// On paste, replace `from 'jaml-ui'` with `from './tokens.js'`.
-"use client";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { JimboColorOption } from "./tokens.js";
-import { useCallback, useEffect, useRef, useLayoutEffect } from "react";
-const C = JimboColorOption;
-export function PanelSplitter({ orientation = "vertical", onDrag, onKeyAdjust, "aria-label": ariaLabel, }) {
-    const draggingRef = useRef(false);
-    const lastRef = useRef(0);
-    const onDragRef = useRef(onDrag);
-    useLayoutEffect(() => {
-        onDragRef.current = onDrag;
-    });
-    const handlePointerDown = useCallback((e) => {
-        e.preventDefault();
-        e.target.setPointerCapture(e.pointerId);
-        draggingRef.current = true;
-        lastRef.current = orientation === "vertical" ? e.clientX : e.clientY;
-    }, [orientation]);
-    useEffect(() => {
-        function move(e) {
-            if (!draggingRef.current) {
-                return;
-            }
-            const cur = orientation === "vertical" ? e.clientX : e.clientY;
-            const delta = cur - lastRef.current;
-            if (delta !== 0) {
-                lastRef.current = cur;
-                onDragRef.current(delta);
-            }
-        }
-        function up() {
-            draggingRef.current = false;
-        }
-        window.addEventListener("pointermove", move);
-        window.addEventListener("pointerup", up);
-        window.addEventListener("pointercancel", up);
-        return () => {
-            window.removeEventListener("pointermove", move);
-            window.removeEventListener("pointerup", up);
-            window.removeEventListener("pointercancel", up);
-        };
-    }, [orientation]);
-    const step = 16;
-    const isVertical = orientation === "vertical";
-    return (_jsx("button", { "aria-label": ariaLabel ?? "Resize panel", onKeyDown: (e) => {
-            if (!onKeyAdjust) {
-                return;
-            }
-            if (isVertical && e.key === "ArrowLeft") {
-                onKeyAdjust(-step);
-            }
-            if (isVertical && e.key === "ArrowRight") {
-                onKeyAdjust(step);
-            }
-            if (!isVertical && e.key === "ArrowUp") {
-                onKeyAdjust(-step);
-            }
-            if (!isVertical && e.key === "ArrowDown") {
-                onKeyAdjust(step);
-            }
-        }, onPointerDown: handlePointerDown, style: {
-            all: "unset",
-            display: "block",
-            flex: "0 0 auto",
-            width: isVertical ? 6 : undefined,
-            height: isVertical ? undefined : 6,
-            cursor: isVertical ? "col-resize" : "row-resize",
-            background: C.PANEL_EDGE,
-            borderLeft: isVertical ? `1px solid ${C.BLACK}` : undefined,
-            borderRight: isVertical ? `1px solid ${C.BLACK}` : undefined,
-            borderTop: isVertical ? undefined : `1px solid ${C.BLACK}`,
-            borderBottom: isVertical ? undefined : `1px solid ${C.BLACK}`,
-            touchAction: "none",
-            userSelect: "none",
-        }, type: "button" }));
-}

package/dist/ui/codeBlock.js

@@ -1,14 +0,0 @@
-'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState } from 'react';
-export function JimboCodeBlock({ code, language, filename, className = '' }) {
-    const [copied, setCopied] = useState(false);
-    const copy = () => {
-        void navigator.clipboard.writeText(code);
-        setCopied(true);
-        setTimeout(() => setCopied(false), 2000);
-    };
-    return (_jsxs("div", { className: `j-code-block ${className}`, children: [_jsxs("div", { className: "j-code-block__header", children: [_jsxs("div", { className: "j-code-block__meta", children: [filename && _jsx("span", { className: "j-code-block__filename", children: filename }), language && _jsx("span", { className: "j-code-block__lang", children: language })] }), _jsx("button", { onClick: copy, title: "Copy", className: "j-code-block__copy", "data-copied": copied, children: copied
-                            ? _jsx("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: _jsx("polyline", { points: "20 6 9 17 4 12" }) })
-                            : _jsxs("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("rect", { x: "9", y: "9", width: "13", height: "13", rx: "2" }), _jsx("path", { d: "M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" })] }) })] }), _jsx("pre", { className: "j-code-block__pre", children: _jsx("code", { children: code }) })] }));
-}

package/dist/ui/footer.js

@@ -1,20 +0,0 @@
-'use client';
-import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
-const SUITS = [
-    { char: '♥️', kf: 'jaml-heart' },
-    { char: '♠️', kf: 'jaml-spade' },
-    { char: '♦️', kf: 'jaml-diamond' },
-    { char: '♣️', kf: 'jaml-club' },
-];
-/**
- * Attribution footer with animated suit cycle.
- * All styling via jimbo.css `.j-footer` classes — zero inline styles.
- */
-export function JimboBalatroFooter({ hidden = false, className = '' }) {
-    return (_jsxs("div", { className: `j-footer ${hidden ? 'j-footer--hidden' : ''} ${className}`, children: [_jsx("div", { className: "j-footer__bar", children: _jsxs("p", { className: "j-footer__text", children: [_jsxs("span", { children: ["Not affiliated with LocalThunk or PlayStack \u2022", ' '] }), _jsx("a", { href: "https://store.steampowered.com/app/2379780/Balatro/", target: "_blank", rel: "noopener noreferrer", className: "j-footer__link", children: "BUY BALATRO" }), _jsxs("span", { children: [' ', "\u2022 Created with", ' '] }), _jsxs("span", { className: "j-footer__suits", children: [_jsx("span", { className: "j-footer__suit-stage", children: SUITS.map(({ char, kf }) => (_jsx("span", { className: "j-footer__suit-char", style: { animationName: kf }, children: char }, char))) }), ' ', "for the Balatro community"] })] }) }), _jsx("style", { children: `
-        @keyframes jaml-heart   { 0%{opacity:0;transform:scale(1)} 1%{opacity:1;transform:scale(1.45)} 3.5%{opacity:1;transform:scale(1)} 61.5%{opacity:1;transform:scale(1)} 62%{opacity:0} 100%{opacity:0} }
-        @keyframes jaml-spade   { 0%,61.5%{opacity:0} 62%{opacity:1;transform:scale(1.45)} 64.5%{opacity:1;transform:scale(1)} 71.5%{opacity:1} 72%{opacity:0} 100%{opacity:0} }
-        @keyframes jaml-diamond { 0%,71.5%{opacity:0} 72%{opacity:1;transform:scale(1.45)} 74.5%{opacity:1;transform:scale(1)} 81.5%{opacity:1} 82%{opacity:0} 100%{opacity:0} }
-        @keyframes jaml-club    { 0%,81.5%{opacity:0} 82%{opacity:1;transform:scale(1.45)} 84.5%{opacity:1;transform:scale(1)} 95%{opacity:1}  96%{opacity:0} 100%{opacity:0} }
-      ` })] }));
-}