@a2zb/react 1.0.0

package/dist/src/components/data-display/ArrowRow.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import clsx from 'clsx';
+import { useEffect, useRef } from 'react';
+export function ArrowRow({ isSelected, onSelect, children, className, dataId, dataTestId, }) {
+    const ref = useRef(null);
+    useEffect(() => {
+        if (isSelected) {
+            ref.current?.focus();
+        }
+    }, [isSelected]);
+    const appliedClasses = className ??
+        clsx(
+        // default
+        !isSelected && 'hover:bg-white/15 bg-secondary/80', 
+        // selected
+        isSelected && 'bg-accent/20');
+    return (_jsx("li", { ref: ref, "data-id": dataId, "data-testid": dataTestId, tabIndex: isSelected ? 0 : -1, onClick: onSelect, onKeyDown: e => {
+            if (e.key === 'Enter' || e.key === ' ') {
+                e.preventDefault();
+                onSelect();
+            }
+        }, className: appliedClasses, children: children }));
+}

package/dist/src/components/data-display/Copyable.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState } from "react";
+export function Copyable({ value, children, className = "" }) {
+    const [copied, setCopied] = useState(false);
+    async function handleCopy(e) {
+        e.stopPropagation();
+        // for safe context -> copy to clipboard
+        await navigator.clipboard.writeText(value);
+        setCopied(true);
+        setTimeout(() => setCopied(false), 1000);
+    }
+    return (_jsx("span", { onClick: handleCopy, tabIndex: 0, onKeyDown: (e) => {
+            if (e.key === "Enter" || e.key === " ") {
+                e.preventDefault();
+                handleCopy(e);
+            }
+        }, className: `
+        cursor-pointer
+        text-accent
+        underline underline-offset-2 decoration-dotted
+        hover:decoration-solid
+        hover:text-accent-strong
+        transition-colors
+        ${className}
+        `, title: "Click to copy", children: copied ? "copied" : (children ?? value) }));
+}

package/dist/src/components/data-display/DetailFields.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+function DetailRow({ label, value, className, }) {
+    return (_jsxs("div", { className: "flex justify-between", children: [_jsx("span", { className: "truncate", children: label }), _jsx("span", { className: `whitespace-nowrap ${className ?? ''}`, children: value })] }));
+}
+export function DetailFields({ data, fields }) {
+    return (_jsx(_Fragment, { children: fields.map((field, i) => (_jsx(DetailRow, { label: field.label, value: field.getValue(data), className: field.className }, i))) }));
+}

package/dist/src/components/data-display/Details.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { truncateHex } from "@a2zb/lib";
+import { Copyable } from "./Copyable";
+import { DetailFields } from "./DetailFields";
+const Badge = ({ label }) => (_jsx("span", { className: `text-xs font-semibold px-2 py-1 rounded classes`, children: label.toUpperCase() }));
+// --- copyable field ---
+export const HexDetailField = (value, className) => (_jsx(Copyable, { className: className, value: value, children: truncateHex(value) }));
+export function Details({ item, title, detailsFields, bottomFields, }) {
+    if (!item) {
+        return _jsx("div", { className: `p-4 text-sm`, children: "select a BIPBAPBOP" });
+    }
+    return (_jsxs("div", { className: `h-full flex flex-col p-4 text-sm justify-between`, tabIndex: -1, children: [title && (_jsxs("div", { className: "flex justify-between text-start", children: [_jsxs("div", { className: "flex flex-col", children: [_jsx("span", { className: "text-xs", children: title.field.label }), _jsx("span", { className: "font-medium", children: title.field.getValue(item) })] }), _jsx(Badge, { label: title.badge.label })] })), _jsx("div", { className: "flex flex-col gap-4", children: _jsx(DetailFields, { data: item, fields: detailsFields }) }), bottomFields && (_jsx("div", { className: "pt-2 border-t border-white/5 flex flex-col gap-2", children: _jsx(DetailFields, { data: item, fields: bottomFields }) }))] }));
+}

package/dist/src/components/data-display/index.js

@@ -0,0 +1,4 @@
+export * from "./ArrowRow";
+export * from "./Copyable";
+export * from "./DetailFields";
+export * from "./Details";

package/dist/src/components/feedback/Spinner.js

@@ -0,0 +1,2 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export const Spinner = ({ size = 16 }) => (_jsx("div", { style: { width: size, height: size }, className: "animate-spin rounded-full border-2 border-accent/80 border-t-transparent" }));

package/dist/src/components/feedback/Toast.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { toast as sonnerToast } from 'sonner';
+function getTitleColor(variant) {
+    switch (variant) {
+        case 'error':
+            return 'text-failure';
+        case 'success':
+            return 'text-success';
+        default:
+            return 'text-accent-weak';
+    }
+}
+/*  so that you can call it without having to use toast.custom everytime. */
+export function toast(toast) {
+    return sonnerToast.custom(id => (_jsx(Toast, { id: id, title: toast.title, description: toast.description, variant: toast.variant, toastAction: toast.toastAction })));
+}
+export function Toast({ title, description, variant, toastAction }) {
+    return (_jsxs("div", { className: "flex items-start gap-3 w-full md:max-w-[360px] rounded-xl border border-default bg-surface p-4 shadow-[var(--panel-shadow)]", children: [_jsx("div", { className: "mt-1 h-2 w-2 rounded-full bg-accent" }), _jsxs("div", { className: "flex-1", children: [_jsx("p", { className: `text-sm font-semibold ${getTitleColor(variant)}`, children: title }), _jsxs("p", { className: "mt-1 text-xs text-muted", children: [description, ' ', toastAction && (_jsx("button", { onClick: () => toastAction.fn(), className: "text-accent underline", children: toastAction.text }))] })] }), _jsx("button", { className: "text-xs text-muted hover:text-accent transition-colors", onClick: () => sonnerToast.dismiss(), children: "\u2715" })] }));
+}

package/dist/src/components/feedback/index.js

@@ -0,0 +1,2 @@
+export * from './Spinner';
+export * from './Toast';

package/dist/src/components/forms/Checkbox.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function Checkbox({ label, checked, onChange }) {
+    return (_jsxs("label", { className: "flex items-center gap-3 cursor-pointer select-none relative", children: [_jsxs("div", { className: "relative w-4 h-4 flex items-center justify-center", children: [_jsx("input", { type: "checkbox", checked: checked, onChange: e => onChange?.(e.target.checked), className: "\n            peer w-4 h-4 rounded-sm \n            border border-accent/50 \n            bg-transparent\n            cursor-pointer \n            appearance-none\n            transition-all\n\n            hover:border-accent/80\n            checked:border-accent\n          " }), _jsx("span", { className: "\n            absolute text-accent text-[14px] leading-none\n            pointer-events-none\n            opacity-0 peer-checked:opacity-100 \n            transition-opacity\n          ", children: "\u2713" })] }), _jsx("span", { className: "text-sm text-subtle peer-hover:text-accent transition-colors", children: label })] }));
+}

package/dist/src/components/forms/Select.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export function Select({ options, value, onChange }) {
+    return (_jsx("select", { className: "border border-default rounded px-2 py-1 text-sm bg-surface", value: value, onChange: e => onChange?.(e.target.value), children: options.map(option => (_jsx("option", { value: option, children: option }, option))) }));
+}

package/dist/src/components/forms/TextInput.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState } from 'react';
+// merketplaceView is a heavy component and shouldnt rerender on every keystroke
+// so internal state is added. then render only happens on submit
+export function TextInput({ placeholder, value, onChange, onSubmit, ref, numeric }) {
+    const [internal, setInternal] = useState(value ?? '');
+    const [prevValue, setPrevValue] = useState(value);
+    // if parent changed value prop - sync internal to match
+    if (prevValue !== value) {
+        setPrevValue(value);
+        setInternal(value ?? '');
+    }
+    return (_jsx("input", { ref: ref, className: "px-4 py-2 w-full bg-black/10 text-muted rounded-lg border border-default", placeholder: placeholder, value: internal, ...(numeric && { inputMode: 'decimal', pattern: '[0-9.]*', 'data-numeric': true }), onChange: e => {
+            const value = numeric
+                ? e.currentTarget.value.replace(/[^0-9.]/g, '')
+                : e.currentTarget.value;
+            setInternal(value);
+            onChange?.(value);
+        }, onKeyDown: e => {
+            if (e.key === 'Enter') {
+                e.preventDefault();
+                onSubmit?.(internal);
+            }
+            else if (e.key === 'Escape') {
+                setInternal('');
+            }
+        } }));
+}

package/dist/src/components/forms/index.js

@@ -0,0 +1,3 @@
+export * from './Checkbox';
+export * from './Select';
+export * from './TextInput';

package/dist/src/components/input/Checkbox.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function Checkbox({ label, checked, onChange }) {
+    return (_jsxs("label", { className: "flex items-center gap-3 cursor-pointer select-none relative", children: [_jsxs("div", { className: "relative w-4 h-4 flex items-center justify-center", children: [_jsx("input", { type: "checkbox", checked: checked, onChange: e => onChange?.(e.target.checked), className: "\n            peer w-4 h-4 rounded-sm \n            border border-accent/50 \n            bg-transparent\n            cursor-pointer \n            appearance-none\n            transition-all\n\n            hover:border-accent/80\n            checked:border-accent\n          " }), _jsx("span", { className: "\n            absolute text-accent text-[14px] leading-none\n            pointer-events-none\n            opacity-0 peer-checked:opacity-100 \n            transition-opacity\n          ", children: "\u2713" })] }), _jsx("span", { className: "text-sm text-subtle peer-hover:text-accent transition-colors", children: label })] }));
+}

package/dist/src/components/input/Select.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export function Select({ options, value, onChange }) {
+    return (_jsx("select", { className: "border border-default rounded px-2 py-1 text-sm bg-surface", value: value, onChange: e => onChange?.(e.target.value), children: options.map(option => (_jsx("option", { value: option, children: option }, option))) }));
+}

package/dist/src/components/input/TextInput.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState } from 'react';
+// merketplaceView is a heavy component and shouldnt rerender on every keystroke
+// so internal state is added. then render only happens on submit
+export function TextInput({ placeholder, value, onChange, onSubmit, ref, numeric }) {
+    const [internal, setInternal] = useState(value ?? '');
+    const [prevValue, setPrevValue] = useState(value);
+    // if parent changed value prop - sync internal to match
+    if (prevValue !== value) {
+        setPrevValue(value);
+        setInternal(value ?? '');
+    }
+    return (_jsx("input", { ref: ref, className: "px-4 py-2 w-full bg-black/10 text-muted rounded-lg border border-default", placeholder: placeholder, value: internal, ...(numeric && { inputMode: 'decimal', pattern: '[0-9.]*', 'data-numeric': true }), onChange: e => {
+            const value = numeric
+                ? e.currentTarget.value.replace(/[^0-9.]/g, '')
+                : e.currentTarget.value;
+            setInternal(value);
+            onChange?.(value);
+        }, onKeyDown: e => {
+            if (e.key === 'Enter') {
+                e.preventDefault();
+                onSubmit?.(internal);
+            }
+            else if (e.key === 'Escape') {
+                setInternal('');
+            }
+        } }));
+}

package/dist/src/components/input/index.js

@@ -0,0 +1,3 @@
+export * from './Checkbox';
+export * from './Select';
+export * from './TextInput';

package/dist/src/components/media/Gallery.js

@@ -0,0 +1,71 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect } from "react";
+import { ArrowRow } from "../data-display";
+import { ArrowList } from "../navigation";
+import clsx from "clsx";
+export function Gallery({ items, galleryItem, selected, onSelect, isFresh, galleryView = "list", ref, onLoadMore, isLoading, hasMore, }) {
+    // load more on 'regular' scroll
+    useEffect(() => {
+        const el = ref?.current;
+        if (!el || !onLoadMore)
+            return;
+        const handleScroll = () => {
+            const distance = el.scrollHeight - (el.scrollTop + el.clientHeight);
+            if (distance < 100 && !isLoading && hasMore) {
+                onLoadMore();
+            }
+        };
+        el.addEventListener("scroll", handleScroll);
+        return () => el.removeEventListener("scroll", handleScroll);
+    }, [ref, onLoadMore, isLoading, hasMore]);
+    // load more for keyboard
+    useEffect(() => {
+        if (!selected || !onLoadMore || isLoading || !hasMore)
+            return;
+        const index = items.findIndex((i) => i.id === selected.id);
+        if (index === -1)
+            return;
+        if (items.length - index < 5) {
+            onLoadMore();
+        }
+    }, [
+        selected?.id,
+        items.length,
+        hasMore,
+        isLoading,
+        items,
+        onLoadMore,
+        selected,
+    ]);
+    useEffect(() => {
+        if (!selected || !ref?.current)
+            return;
+        const el = ref.current.querySelector(`[data-id="${selected.id}"]`);
+        if (!el)
+            return;
+        el.scrollIntoView({
+            block: "center",
+            inline: "center",
+            behavior: "smooth",
+        });
+        el.scrollTop -= 40;
+    }, [selected, ref]);
+    const galleryClasses = galleryView === "list"
+        ? {
+            arrowList: "flex flex-col gap-4",
+            arrowRow: "border border-default/65 rounded-xl transition",
+        }
+        : {
+            arrowList: "grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-4 lg-rounded",
+            arrowRow: "outline-none focus-visible:ring-0.5 focus-visible:ring-accent rounded-lg block",
+        };
+    return (_jsx("div", { className: "flex h-full min-h-0 gap-4", children: _jsx("div", { className: "flex min-h-0 flex-1 flex-col gap-4", children: _jsx(ArrowList, { ref: ref, items: items, getId: (c) => c.id, selectedId: selected?.id, onSelect: onSelect, className: `${galleryClasses.arrowList} min-h-0 flex-1 rounded-lg p-1`, children: ({ item, isSelected, onSelect }) => (_jsx(ArrowRow, { isSelected: isSelected, onSelect: onSelect, dataId: item.id, className: clsx(galleryClasses.arrowRow, 
+                    // default
+                    !isSelected &&
+                        !isFresh?.(item) &&
+                        "hover:bg-white/15 bg-surface/75", 
+                    // fresh
+                    isFresh?.(item) && "fresh", 
+                    // selected
+                    isSelected && "bg-accent/25"), children: galleryItem(item) }, item.id)) }) }) }));
+}

package/dist/src/components/media/GalleryItem.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function GalleryItem({ image, imgWidth = 250, imgHeight = 250, title, details }) {
+    return (_jsxs("div", { className: "card group hover:-translate-y-1 transition-transform hover:text-accent", children: [_jsx("img", { src: image, alt: title ?? '', className: "border-b border-default object-cover bg-primary", width: imgWidth, height: imgHeight, loading: "eager" }), _jsxs("div", { className: "flex flex-col", children: [title && (_jsx("span", { className: "h-[40px] grid place-items-center border-b border-default", children: title })), _jsx("div", { className: "transition-colors", children: details })] })] }));
+}

package/dist/src/components/media/index.js

@@ -0,0 +1,2 @@
+export * from './Gallery';
+export * from './GalleryItem';

package/dist/src/components/navigation/ArrowList.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export function ArrowList({ items, getId, selectedId, onSelect, children, className = '', ref, }) {
+    const base = 'overflow-y-auto no-scrollbar';
+    return (_jsx("ul", { ref: ref, className: `${base} ${className}`, tabIndex: 0, onKeyDown: e => {
+            if (!items.length)
+                return;
+            if (e.key === 'Home') {
+                e.preventDefault();
+                onSelect(items[0]);
+                return;
+            }
+            if (e.key === 'End') {
+                e.preventDefault();
+                onSelect(items[items.length - 1]);
+                return;
+            }
+            if (e.key !== 'ArrowDown' && e.key !== 'ArrowUp')
+                return;
+            e.preventDefault();
+            const index = selectedId === undefined ? 0 : items.findIndex(it => getId(it) === selectedId);
+            if (index === -1)
+                return;
+            let next = index;
+            if (e.key === 'ArrowDown')
+                next = Math.min(index + 1, items.length - 1);
+            if (e.key === 'ArrowUp')
+                next = Math.max(index - 1, 0);
+            onSelect(items[next]);
+        }, children: items.map(item => {
+            const isSelected = selectedId !== undefined && getId(item) === selectedId;
+            return children({ item, isSelected, onSelect: () => onSelect(item) });
+        }) }));
+}

package/dist/src/components/navigation/SelectableList.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export function ArrowList({ items, getId, selectedId, onSelect, children, className = '', ref, }) {
+    const base = 'overflow-y-auto no-scrollbar';
+    return (_jsx("ul", { ref: ref, className: `${base} ${className}`, tabIndex: 0, onKeyDown: e => {
+            if (!items.length)
+                return;
+            if (e.key === 'Home') {
+                e.preventDefault();
+                onSelect(items[0]);
+                return;
+            }
+            if (e.key === 'End') {
+                e.preventDefault();
+                onSelect(items[items.length - 1]);
+                return;
+            }
+            if (e.key !== 'ArrowDown' && e.key !== 'ArrowUp')
+                return;
+            e.preventDefault();
+            const index = selectedId === undefined ? 0 : items.findIndex(it => getId(it) === selectedId);
+            if (index === -1)
+                return;
+            let next = index;
+            if (e.key === 'ArrowDown')
+                next = Math.min(index + 1, items.length - 1);
+            if (e.key === 'ArrowUp')
+                next = Math.max(index - 1, 0);
+            onSelect(items[next]);
+        }, children: items.map(item => {
+            const isSelected = selectedId !== undefined && getId(item) === selectedId;
+            return children({ item, isSelected, onSelect: () => onSelect(item) });
+        }) }));
+}

package/dist/src/components/navigation/Tabs.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export function Tabs({ value, onChange, items }) {
+    return (_jsx("div", { className: "flex w-full border-b border-soft", children: items.map(item => {
+            const active = item === value;
+            return (_jsx("button", { onClick: () => onChange(item), className: `
+              flex-1 py-2 text-center border-b-2 transition-colors duration-200 cursor-pointer
+              ${active
+                    ? 'border-accent/60 text-accent-weak'
+                    : 'border-transparent text-subtle hover:border-accent/30'}
+            `, children: item }, item));
+        }) }));
+}

package/dist/src/components/navigation/index.js

@@ -0,0 +1,2 @@
+export * from "./ArrowList";
+export * from "./Tabs";

package/dist/src/components/overlays/Modal.js

@@ -0,0 +1,38 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef } from "react";
+import { FocusTrap } from "focus-trap-react";
+export function Modal({ isOpen, onClose, children, escTxt = "Close", selfManagesFocus, }) {
+    const lastFocusedRef = useRef(null);
+    // close on Escape always, close on X unless focus is on a non-numeric text input
+    const handler = (e) => {
+        const target = e.target;
+        const isNumeric = target.dataset?.numeric !== undefined;
+        const typingText = !isNumeric &&
+            (target.tagName === "INPUT" ||
+                target.tagName === "TEXTAREA" ||
+                target.isContentEditable);
+        if (e.key === "Escape") {
+            onClose();
+            return;
+        }
+        if (!typingText && e.key.toLowerCase() === "x") {
+            onClose();
+        }
+    };
+    // Close on ESC key
+    useEffect(() => {
+        if (!isOpen)
+            return;
+        lastFocusedRef.current = document.activeElement;
+        document.addEventListener("keydown", handler);
+        return () => {
+            document.removeEventListener("keydown", handler);
+            lastFocusedRef.current?.focus();
+        };
+    }, [onClose, isOpen]);
+    if (!isOpen)
+        return null;
+    return (_jsx("div", { className: "\n        fixed inset-0 z-[999] flex items-center justify-center\n        bg-black/50 backdrop-blur-sm animate-fadeIn\n      ", role: "dialog", onClick: onClose, children: _jsx(FocusTrap, { focusTrapOptions: {
+                initialFocus: selfManagesFocus ? false : "#modal-close-btn",
+            }, children: _jsxs("div", { className: "\n            flex flex-col gap-2\n            bg-primary/60 backdrop-blur-lg\n            border border-default\n            rounded-lg\n            shadow-lg p-2", onClick: (e) => e.stopPropagation(), children: [children, _jsx("button", { id: "modal-close-btn", className: "btn btn-secondary outline-none", onClick: onClose, children: escTxt })] }) }) }));
+}

package/dist/src/components/overlays/Popover.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from 'react';
+export function Popover({ trigger, children, align = 'right' }) {
+    const [open, setOpen] = useState(false);
+    const ref = useRef(null);
+    useEffect(() => {
+        if (!open)
+            return;
+        function handleClick(e) {
+            if (ref.current && !ref.current.contains(e.target))
+                setOpen(false);
+        }
+        document.addEventListener('mousedown', handleClick);
+        return () => document.removeEventListener('mousedown', handleClick);
+    }, [open]);
+    return (_jsxs("div", { ref: ref, className: "relative", children: [_jsx("div", { onClick: () => setOpen(v => !v), className: "cursor-pointer flex items-center", children: trigger }), open && (_jsx("div", { className: `absolute top-full mt-1 z-50 whitespace-nowrap p-2 ${align === 'right' ? 'right-0' : 'left-0'}`, style: {
+                    background: 'var(--bg-surface)',
+                    border: '1px solid var(--border-soft)',
+                }, children: children }))] }));
+}

package/dist/src/components/overlays/index.js

@@ -0,0 +1,2 @@
+export * from './Modal';
+export * from './Popover';

package/dist/src/index.js

@@ -0,0 +1,6 @@
+export * from "./components/data-display";
+export * from "./components/feedback";
+export * from "./components/input";
+export * from "./components/media";
+export * from "./components/navigation";
+export * from "./components/overlays";

package/dist/src/types/eth.js

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "@a2zb/react",
+  "version": "1.0.0",
+  "type": "module",
+  "files": [
+    "dist"
+  ],
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "dependencies": {
+    "clsx": "^2.1.1",
+    "focus-trap-react": "^12.0.0",
+    "sonner": "^2.0.7",
+    "@a2zb/lib": "1.0.0"
+  },
+  "peerDependencies": {
+    "react": "^19",
+    "@a2zb/styles": "^1.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19.2.17",
+    "react": "^19.2.7",
+    "typescript": "^6.0.3",
+    "@a2zb/styles": "1.0.0"
+  },
+  "scripts": {
+    "build": "tsc"
+  }
+}