@ab-org/predicate-market-sdk 0.0.1

package/dist/ui/components/CloseButton.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { colors } from "../theme.js";
+export const CloseButton = ({ onClick }) => (_jsx("button", { type: "button", onClick: onClick, "aria-label": "Close", style: {
+        width: 30,
+        height: 30,
+        borderRadius: "50%",
+        background: colors.card,
+        border: "none",
+        cursor: "pointer",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        padding: 0,
+        flexShrink: 0,
+    }, children: _jsx("svg", { width: "17", height: "17", viewBox: "0 0 17 17", fill: "none", children: _jsx("path", { d: "M4.25 4.25L12.75 12.75M12.75 4.25L4.25 12.75", stroke: colors.textPrimary, strokeWidth: "1.5", strokeLinecap: "round" }) }) }));

package/dist/ui/components/Countdown.d.ts

@@ -0,0 +1,16 @@
+export interface CountdownProps {
+    /** 过期时间：ISO 字符串或时间戳（毫秒） */
+    expiresAt: string | number;
+    /** 过期时显示文案，默认 "Expired" */
+    expiredLabel?: string;
+    /** 自定义样式 */
+    style?: React.CSSProperties;
+    /** 是否已过期（由外部控制，用于与 quoteExpired 等联动时不再倒计时） */
+    isExpired?: boolean;
+    /** 倒计时归零时调用一次（可用于自动重新询价等） */
+    onExpired?: () => void;
+}
+/**
+ * 倒计时组件：每秒更新，显示距 expiresAt 的剩余时间（MM:SS）。
+ */
+export declare function Countdown({ expiresAt, expiredLabel, style, isExpired, onExpired, }: CountdownProps): import("react/jsx-runtime.js").JSX.Element;

package/dist/ui/components/Countdown.js

@@ -0,0 +1,42 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect, useRef } from "react";
+import { colors, fonts } from "../theme.js";
+function getRemaining(expiresAt) {
+    const end = typeof expiresAt === "string" ? new Date(expiresAt).getTime() : expiresAt;
+    return Math.max(0, Math.floor((end - Date.now()) / 1000));
+}
+function formatRemaining(seconds) {
+    const m = Math.floor(seconds / 60);
+    const s = seconds % 60;
+    return `${m}:${s.toString().padStart(2, "0")}`;
+}
+/**
+ * 倒计时组件：每秒更新，显示距 expiresAt 的剩余时间（MM:SS）。
+ */
+export function Countdown({ expiresAt, expiredLabel = "Expired", style, isExpired = false, onExpired, }) {
+    const [remaining, setRemaining] = useState(() => getRemaining(expiresAt));
+    const hasFiredExpired = useRef(false);
+    useEffect(() => {
+        hasFiredExpired.current = false;
+    }, [expiresAt]);
+    useEffect(() => {
+        if (isExpired) {
+            setRemaining(0);
+            return;
+        }
+        const tick = () => {
+            const r = getRemaining(expiresAt);
+            setRemaining(r);
+            if (r <= 0 && onExpired && !hasFiredExpired.current) {
+                hasFiredExpired.current = true;
+                onExpired();
+            }
+        };
+        tick();
+        const id = setInterval(tick, 1000);
+        return () => clearInterval(id);
+    }, [expiresAt, isExpired, onExpired]);
+    const text = remaining <= 0 ? expiredLabel : formatRemaining(remaining);
+    const color = remaining <= 0 ? colors.warning : colors.textSecondary;
+    return (_jsxs("span", { style: { fontSize: 12, color, fontFamily: fonts.family, ...style }, children: ["Expires in ", _jsx("span", { style: { fontWeight: 600, color: "#fff" }, children: text })] }));
+}

package/dist/ui/components/DepositDetailsPanel.d.ts

@@ -0,0 +1,8 @@
+import { type ReactNode } from "react";
+export interface DepositDetailsPanelProps {
+    address: string;
+    tokenIcon?: ReactNode;
+    minimumDeposit?: string;
+    onCopyAddress?: () => void;
+}
+export declare const DepositDetailsPanel: ({ address, tokenIcon, minimumDeposit, onCopyAddress, }: DepositDetailsPanelProps) => import("react/jsx-runtime.js").JSX.Element;

package/dist/ui/components/DepositDetailsPanel.js

@@ -0,0 +1,117 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo } from "react";
+import qrcode from "qrcode-generator";
+import { colors, fonts, radii } from "../theme.js";
+/* ─── QR matrix generation ──────────────────── */
+function generateMatrix(data) {
+    const qr = qrcode(0, "H");
+    qr.addData(data);
+    qr.make();
+    const count = qr.getModuleCount();
+    const matrix = [];
+    for (let r = 0; r < count; r++) {
+        const row = [];
+        for (let c = 0; c < count; c++) {
+            row.push(qr.isDark(r, c));
+        }
+        matrix.push(row);
+    }
+    return matrix;
+}
+function isFinderZone(row, col, size) {
+    return ((row < 7 && col < 7) ||
+        (row < 7 && col >= size - 7) ||
+        (row >= size - 7 && col < 7));
+}
+/* ─── Styled finder eye (rounded nested rects) ── */
+const FinderEye = ({ ox, oy, s }) => (_jsxs(_Fragment, { children: [_jsx("rect", { x: ox, y: oy, width: 7 * s, height: 7 * s, rx: s * 1.4, ry: s * 1.4, fill: "#fff" }), _jsx("rect", { x: ox + s, y: oy + s, width: 5 * s, height: 5 * s, rx: s * 0.9, ry: s * 0.9, fill: colors.background }), _jsx("rect", { x: ox + 2 * s, y: oy + 2 * s, width: 3 * s, height: 3 * s, rx: s * 0.7, ry: s * 0.7, fill: "#fff" })] }));
+/* ─── Styled SVG QR ─────────────────────────── */
+const SVG_SIZE = 220;
+const QUIET_ZONE = 2;
+const StyledQR = ({ data }) => {
+    const matrix = useMemo(() => generateMatrix(data), [data]);
+    const n = matrix.length;
+    const total = n + QUIET_ZONE * 2;
+    const cell = SVG_SIZE / total;
+    const off = QUIET_ZONE * cell;
+    const dotR = cell * 0.42;
+    const centerClearR = 3;
+    const cx = n / 2;
+    const cy = n / 2;
+    const dots = [];
+    for (let r = 0; r < n; r++) {
+        for (let c = 0; c < n; c++) {
+            if (!matrix[r][c])
+                continue;
+            if (isFinderZone(r, c, n))
+                continue;
+            if (Math.abs(c - cx) < centerClearR && Math.abs(r - cy) < centerClearR)
+                continue;
+            dots.push(_jsx("circle", { cx: off + c * cell + cell / 2, cy: off + r * cell + cell / 2, r: dotR, fill: "#fff" }, `${r}-${c}`));
+        }
+    }
+    return (_jsxs("svg", { width: SVG_SIZE, height: SVG_SIZE, viewBox: `0 0 ${SVG_SIZE} ${SVG_SIZE}`, style: { borderRadius: 12 }, children: [_jsx("rect", { width: SVG_SIZE, height: SVG_SIZE, fill: colors.background }), _jsx(FinderEye, { ox: off, oy: off, s: cell }), _jsx(FinderEye, { ox: off + (n - 7) * cell, oy: off, s: cell }), _jsx(FinderEye, { ox: off, oy: off + (n - 7) * cell, s: cell }), dots] }));
+};
+/* ─── Copy icon ─────────────────────────────── */
+const CopyIcon = () => (_jsxs("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", children: [_jsx("rect", { x: "4.5", y: "4.5", width: "7", height: "7", rx: "1.5", stroke: colors.textPrimary, strokeWidth: "1.2" }), _jsx("path", { d: "M9.5 4.5V3.5C9.5 2.67 8.83 2 8 2H3.5C2.67 2 2 2.67 2 3.5V8C2 8.83 2.67 9.5 3.5 9.5H4.5", stroke: colors.textPrimary, strokeWidth: "1.2" })] }));
+/* ─── Main ──────────────────────────────────── */
+export const DepositDetailsPanel = ({ address, tokenIcon, minimumDeposit, onCopyAddress, }) => {
+    const handleCopy = () => {
+        navigator.clipboard?.writeText(address);
+        onCopyAddress?.();
+    };
+    return (_jsxs("div", { style: {
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "center",
+            gap: 16,
+            padding: "20px",
+            borderRadius: radii.card,
+            border: `1px solid ${colors.border}`,
+            fontFamily: fonts.family,
+        }, children: [_jsxs("div", { style: { position: "relative", display: "inline-flex" }, children: [_jsx(StyledQR, { data: address }), tokenIcon && (_jsx("div", { style: {
+                            position: "absolute",
+                            top: "50%",
+                            left: "50%",
+                            transform: "translate(-50%, -50%)",
+                            width: 36,
+                            height: 36,
+                            borderRadius: "50%",
+                            background: "#3B5998",
+                            display: "flex",
+                            alignItems: "center",
+                            justifyContent: "center",
+                            boxShadow: `0 0 0 3px ${colors.background}`,
+                        }, children: tokenIcon }))] }), _jsx("div", { style: { width: "100%", display: "flex", flexDirection: "column", gap: 8 }, children: _jsx("div", { style: {
+                        padding: "10px 14px",
+                        borderRadius: radii.input,
+                        background: "rgba(255,255,255,0.05)",
+                        fontSize: 13,
+                        color: colors.textPrimary,
+                        wordBreak: "break-all",
+                        lineHeight: 1.5,
+                    }, children: address }) }), minimumDeposit && (_jsxs("div", { style: {
+                    width: "100%",
+                    display: "flex",
+                    justifyContent: "space-between",
+                    fontSize: 13,
+                }, children: [_jsx("span", { style: { color: colors.textSecondary }, children: "Minimum deposit" }), _jsx("span", { style: { color: colors.textPrimary, fontWeight: 500 }, children: minimumDeposit })] })), _jsxs("button", { type: "button", onClick: handleCopy, style: {
+                    display: "flex",
+                    alignItems: "center",
+                    gap: 6,
+                    padding: "10px 28px",
+                    borderRadius: radii.pill,
+                    border: `1px solid ${colors.borderStrong}`,
+                    background: "transparent",
+                    color: colors.textPrimary,
+                    fontSize: 14,
+                    fontWeight: 500,
+                    cursor: "pointer",
+                    fontFamily: fonts.family,
+                    transition: "background .15s",
+                }, onMouseEnter: (e) => {
+                    e.currentTarget.style.background = "rgba(255,255,255,0.06)";
+                }, onMouseLeave: (e) => {
+                    e.currentTarget.style.background = "transparent";
+                }, children: [_jsx(CopyIcon, {}), "Copy address"] })] }));
+};

package/dist/ui/components/DropdownField.d.ts

@@ -0,0 +1,19 @@
+import { type ReactNode } from "react";
+export interface SelectOption {
+    id: string;
+    label: string;
+    subtitle?: string;
+    icon?: ReactNode;
+}
+export interface DropdownFieldProps {
+    label: string;
+    placeholder?: string;
+    value?: string;
+    icon?: ReactNode;
+    focused?: boolean;
+    options?: SelectOption[];
+    onSelect?: (id: string) => void;
+    /** @deprecated Use `options` + `onSelect` instead. */
+    onClick?: () => void;
+}
+export declare const DropdownField: ({ label, placeholder, value, icon, focused, options, onSelect, onClick, }: DropdownFieldProps) => import("react/jsx-runtime.js").JSX.Element;

package/dist/ui/components/DropdownField.js

@@ -0,0 +1,81 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useRef, useEffect } from "react";
+import { colors, fonts, radii } from "../theme.js";
+const Chevron = ({ up }) => (_jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", style: { transition: "transform .2s", transform: up ? "rotate(180deg)" : "none" }, children: _jsx("path", { d: "M4 6L8 10L12 6", stroke: colors.textSecondary, strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }));
+export const DropdownField = ({ label, placeholder, value, icon, focused, options, onSelect, onClick, }) => {
+    const [open, setOpen] = useState(false);
+    const [triggerFocused, setTriggerFocused] = useState(false);
+    const ref = useRef(null);
+    useEffect(() => {
+        if (!open)
+            return;
+        const handler = (e) => {
+            if (ref.current && !ref.current.contains(e.target))
+                setOpen(false);
+        };
+        document.addEventListener("mousedown", handler);
+        return () => document.removeEventListener("mousedown", handler);
+    }, [open]);
+    const hasOptions = options && options.length > 0;
+    const handleClick = () => {
+        if (hasOptions) {
+            setOpen((p) => !p);
+        }
+        else {
+            onClick?.();
+        }
+    };
+    const handleSelect = (id) => {
+        onSelect?.(id);
+        setOpen(false);
+    };
+    const selected = hasOptions ? options.find((o) => o.id === value) : undefined;
+    return (_jsxs("div", { ref: ref, style: { display: "flex", flexDirection: "column", gap: 8, width: "100%", position: "relative" }, children: [_jsx("span", { style: {
+                    fontSize: 14,
+                    fontWeight: 400,
+                    lineHeight: 1.4,
+                    color: colors.textPrimary,
+                    fontFamily: fonts.family,
+                }, children: label }), _jsxs("button", { type: "button", onClick: handleClick, onFocus: () => setTriggerFocused(true), onBlur: () => setTriggerFocused(false), style: {
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "space-between",
+                    height: 44,
+                    padding: "0 16px",
+                    borderRadius: radii.input,
+                    border: `1px solid ${open || triggerFocused ? colors.borderFocused : colors.border}`,
+                    background: "transparent",
+                    cursor: "pointer",
+                    fontFamily: fonts.family,
+                    width: "100%",
+                    boxSizing: "border-box",
+                }, children: [_jsxs("div", { style: { display: "flex", alignItems: "center", gap: 8 }, children: [selected?.icon ?? icon, _jsx("span", { style: {
+                                    fontSize: 14,
+                                    lineHeight: 1.4,
+                                    color: value ? colors.textPrimary : colors.textSecondary,
+                                    fontFamily: fonts.family,
+                                }, children: selected?.label ?? value ?? placeholder })] }), _jsx(Chevron, { up: open })] }), open && hasOptions && (_jsx("div", { className: "dropdown-list-item", style: {
+                    position: "absolute",
+                    top: "calc(100% + 4px)",
+                    left: 0,
+                    right: 0,
+                    zIndex: 10,
+                    borderRadius: radii.input,
+                    border: `1px solid ${colors.border}`,
+                    background: colors.card,
+                    overflow: "hidden",
+                    boxShadow: "0 8px 24px rgba(0,0,0,0.4)",
+                }, children: options.map((opt) => (_jsxs("button", { type: "button", onClick: () => handleSelect(opt.id), style: {
+                        display: "flex",
+                        alignItems: "center",
+                        gap: 10,
+                        width: "100%",
+                        padding: "10px 16px",
+                        border: "none",
+                        background: opt.id === value ? "rgba(255,255,255,0.06)" : "transparent",
+                        cursor: "pointer",
+                        fontFamily: fonts.family,
+                        textAlign: "left",
+                        transition: "background .12s",
+                    }, onMouseEnter: (e) => { e.currentTarget.style.background = "rgba(255,255,255,0.08)"; }, onMouseLeave: (e) => { e.currentTarget.style.background = opt.id === value ? "rgba(255,255,255,0.06)" : "transparent"; }, children: [opt.icon && (_jsx("div", { style: { width: 28, height: 28, flexShrink: 0, display: "flex", alignItems: "center", justifyContent: "center" }, children: opt.icon })), _jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 1 }, children: [_jsx("span", { style: { fontSize: 14, fontWeight: 500, color: colors.textPrimary }, children: opt.label }), opt.subtitle && (_jsx("span", { style: { fontSize: 12, color: colors.textSecondary }, children: opt.subtitle }))] })] }, opt.id))) }))] }));
+};

package/dist/ui/components/Field.d.ts

@@ -0,0 +1,10 @@
+import type { ChangeEventHandler } from "react";
+export interface FieldProps {
+    label: string;
+    placeholder?: string;
+    value?: string;
+    onChange?: ChangeEventHandler<HTMLInputElement>;
+    prefix?: React.ReactNode;
+    suffix?: React.ReactNode;
+}
+export declare const Field: ({ label, placeholder, value, onChange, prefix, suffix }: FieldProps) => import("react/jsx-runtime.js").JSX.Element;

package/dist/ui/components/Field.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { colors, fonts, radii } from "../theme.js";
+export const Field = ({ label, placeholder, value, onChange, prefix, suffix }) => {
+    return (_jsxs("label", { style: { display: "flex", flexDirection: "column", gap: 8, fontFamily: fonts.family }, children: [_jsx("span", { style: { fontSize: 14, color: colors.textSecondary }, children: label }), _jsxs("div", { style: {
+                    display: "flex",
+                    alignItems: "center",
+                    background: colors.cardRaised,
+                    borderRadius: radii.md,
+                    border: `1px solid ${colors.borderStrong}`,
+                    padding: "0 14px",
+                }, children: [prefix && _jsx("span", { style: { marginRight: 8, color: colors.textSecondary }, children: prefix }), _jsx("input", { value: value, onChange: onChange, placeholder: placeholder, style: {
+                            flex: 1,
+                            border: "none",
+                            outline: "none",
+                            background: "transparent",
+                            color: colors.textPrimary,
+                            fontSize: 16,
+                            fontFamily: fonts.family,
+                            padding: "16px 0",
+                        } }), suffix && _jsx("span", { style: { marginLeft: 8 }, children: suffix })] })] }));
+};

package/dist/ui/components/LoginRequiredOverlay.d.ts

@@ -0,0 +1,6 @@
+export interface LoginRequiredOverlayProps {
+    title: string;
+    onSignIn?: () => void;
+    onClose?: () => void;
+}
+export declare const LoginRequiredOverlay: ({ title, onSignIn, onClose, }: LoginRequiredOverlayProps) => import("react/jsx-runtime.js").JSX.Element;

package/dist/ui/components/LoginRequiredOverlay.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ModalFrame } from "./ModalFrame.js";
+import { colors, fonts, radii } from "../theme.js";
+const LockIcon = () => (_jsxs("svg", { width: "48", height: "48", viewBox: "0 0 48 48", fill: "none", children: [_jsx("rect", { x: "10", y: "22", width: "28", height: "20", rx: "4", stroke: colors.textSecondary, strokeWidth: "2" }), _jsx("path", { d: "M16 22V16C16 11.5817 19.5817 8 24 8C28.4183 8 32 11.5817 32 16V22", stroke: colors.textSecondary, strokeWidth: "2", strokeLinecap: "round" }), _jsx("circle", { cx: "24", cy: "33", r: "3", fill: colors.textSecondary })] }));
+export const LoginRequiredOverlay = ({ title, onSignIn, onClose, }) => (_jsx(ModalFrame, { onClose: onClose, contentStyle: { padding: "48px 24px" }, children: _jsxs("div", { style: {
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "center",
+            gap: 24,
+            textAlign: "center",
+        }, children: [_jsx(LockIcon, {}), _jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 8 }, children: [_jsx("h2", { style: {
+                            margin: 0,
+                            fontSize: 20,
+                            fontWeight: 600,
+                            color: colors.textPrimary,
+                        }, children: title }), _jsx("p", { style: {
+                            margin: 0,
+                            fontSize: 14,
+                            color: colors.textSecondary,
+                            lineHeight: 1.5,
+                        }, children: "Please sign in to continue" })] }), onSignIn && (_jsx("button", { type: "button", onClick: onSignIn, style: {
+                    padding: "12px 48px",
+                    borderRadius: radii.full,
+                    border: "none",
+                    background: colors.textPrimary,
+                    color: "#15181D",
+                    fontSize: 16,
+                    fontWeight: 500,
+                    fontFamily: fonts.family,
+                    cursor: "pointer",
+                }, children: "Sign In" }))] }) }));

package/dist/ui/components/ModalCard.d.ts

@@ -0,0 +1,9 @@
+import type { PropsWithChildren, ReactNode } from "react";
+export interface ModalCardProps extends PropsWithChildren {
+    title: string;
+    subtitle?: string;
+    icon?: ReactNode;
+    width?: number | string;
+    footer?: ReactNode;
+}
+export declare const ModalCard: ({ title, subtitle, icon, width, footer, children }: ModalCardProps) => import("react/jsx-runtime.js").JSX.Element;

package/dist/ui/components/ModalCard.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { colors, fonts, radii } from "../theme.js";
+export const ModalCard = ({ title, subtitle, icon, width = 420, footer, children }) => {
+    return (_jsxs("div", { style: {
+            width,
+            borderRadius: radii.xl,
+            background: colors.card,
+            border: `1px solid ${colors.border}`,
+            padding: "32px",
+            color: colors.textPrimary,
+            fontFamily: fonts.family,
+            boxShadow: "0 30px 90px rgba(0,0,0,0.55)",
+        }, children: [_jsxs("header", { style: { display: "flex", alignItems: "center", gap: 16, marginBottom: 24 }, children: [icon && _jsx("div", { children: icon }), _jsxs("div", { children: [_jsx("div", { style: { fontSize: 22, fontWeight: 600 }, children: title }), subtitle && (_jsx("div", { style: { fontSize: 14, color: colors.textSecondary, marginTop: 4 }, children: subtitle }))] })] }), _jsx("div", { style: { display: "flex", flexDirection: "column", gap: 20 }, children: children }), footer && _jsx("div", { style: { marginTop: 32 }, children: footer })] }));
+};

package/dist/ui/components/ModalFrame.d.ts

@@ -0,0 +1,9 @@
+import type { CSSProperties, ReactNode } from "react";
+export interface ModalFrameProps {
+    onClose?: () => void;
+    width?: number;
+    cardStyle?: CSSProperties;
+    contentStyle?: CSSProperties;
+    children: ReactNode;
+}
+export declare const ModalFrame: ({ onClose, width, cardStyle, contentStyle, children, }: ModalFrameProps) => import("react/jsx-runtime.js").JSX.Element;

package/dist/ui/components/ModalFrame.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CloseButton } from "./CloseButton.js";
+import { colors, fonts, radii } from "../theme.js";
+export const ModalFrame = ({ onClose, width = 500, cardStyle, contentStyle, children, }) => (_jsx("div", { style: { display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center" }, children: _jsxs("div", { style: { display: "flex", gap: 14, alignItems: "flex-start" }, children: [_jsx("div", { style: {
+                    width,
+                    background: colors.card,
+                    borderRadius: radii.card,
+                    overflow: "hidden",
+                    ...cardStyle,
+                }, children: _jsx("div", { style: {
+                        display: "flex",
+                        flexDirection: "column",
+                        minHeight: 0,
+                        fontFamily: fonts.family,
+                        color: colors.textPrimary,
+                        boxSizing: "border-box",
+                        ...contentStyle,
+                    }, children: children }) }), _jsx(CloseButton, { onClick: onClose })] }) }));

package/dist/ui/components/PrimaryButton.d.ts

@@ -0,0 +1,2 @@
+import type { ButtonHTMLAttributes } from "react";
+export declare const PrimaryButton: ({ children, ...rest }: ButtonHTMLAttributes<HTMLButtonElement>) => import("react/jsx-runtime.js").JSX.Element;

package/dist/ui/components/PrimaryButton.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { colors, fonts, radii } from "../theme.js";
+export const PrimaryButton = ({ children, ...rest }) => (_jsx("button", { ...rest, style: {
+        width: "100%",
+        padding: "16px 20px",
+        borderRadius: radii.md,
+        border: "none",
+        background: `linear-gradient(135deg, ${colors.accent} 0%, ${colors.accentStrong} 100%)`,
+        color: colors.background,
+        fontSize: 16,
+        fontWeight: 600,
+        fontFamily: fonts.family,
+        cursor: "pointer",
+    }, children: children }));

package/dist/ui/components/QRCodePanel.d.ts

@@ -0,0 +1,4 @@
+export interface QRCodePanelProps {
+    address: string;
+}
+export declare const QRCodePanel: ({ address }: QRCodePanelProps) => import("react/jsx-runtime.js").JSX.Element;

package/dist/ui/components/QRCodePanel.js

@@ -0,0 +1,43 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { colors, fonts, radii } from "../theme.js";
+const generateBlocks = (address) => {
+    const chars = Array.from(address.replace(/[^0-9a-f]/gi, ""));
+    return chars.map((char, index) => {
+        const intensity = (parseInt(char, 16) / 15) * 100;
+        return (_jsx("div", { style: {
+                width: 10,
+                height: 10,
+                background: `rgba(255,255,255,${intensity / 140})`,
+            } }, `${char}-${index}`));
+    });
+};
+export const QRCodePanel = ({ address }) => {
+    return (_jsxs("div", { style: {
+            borderRadius: radii.lg,
+            border: `1px solid ${colors.border}`,
+            padding: 20,
+            width: 200,
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "center",
+            gap: 12,
+            background: colors.cardRaised,
+        }, children: [_jsx("div", { style: {
+                    width: 160,
+                    height: 160,
+                    borderRadius: radii.sm,
+                    background: colors.background,
+                    padding: 12,
+                    display: "grid",
+                    gridTemplateColumns: "repeat(12, 10px)",
+                    gap: 2,
+                }, children: generateBlocks(address) }), _jsx("button", { type: "button", style: {
+                    borderRadius: radii.sm,
+                    border: `1px solid ${colors.borderStrong}`,
+                    background: "transparent",
+                    color: colors.textSecondary,
+                    padding: "6px 12px",
+                    cursor: "pointer",
+                    fontFamily: fonts.family,
+                }, onClick: () => navigator.clipboard?.writeText(address), children: "Copy address" })] }));
+};

package/dist/ui/components/Select.d.ts

@@ -0,0 +1,12 @@
+export interface SelectOption {
+    label: string;
+    value: string;
+    badge?: string;
+}
+export interface SelectProps {
+    label: string;
+    value: string;
+    options: SelectOption[];
+    onChange?: (value: string) => void;
+}
+export declare const Select: ({ label, value, options, onChange }: SelectProps) => import("react/jsx-runtime.js").JSX.Element;

package/dist/ui/components/Select.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { colors, fonts, radii } from "../theme.js";
+export const Select = ({ label, value, options, onChange }) => {
+    const handleChange = (event) => onChange?.(event.target.value);
+    return (_jsxs("label", { style: { display: "flex", flexDirection: "column", gap: 8, fontFamily: fonts.family }, children: [_jsx("span", { style: { fontSize: 14, color: colors.textSecondary }, children: label }), _jsxs("div", { style: {
+                    position: "relative",
+                    borderRadius: radii.md,
+                    background: colors.cardRaised,
+                    border: `1px solid ${colors.borderStrong}`,
+                }, children: [_jsx("select", { value: value, onChange: handleChange, style: {
+                            width: "100%",
+                            appearance: "none",
+                            border: "none",
+                            outline: "none",
+                            background: "transparent",
+                            color: colors.textPrimary,
+                            fontSize: 16,
+                            padding: "16px 48px 16px 16px",
+                            fontFamily: fonts.family,
+                        }, children: options.map((option) => (_jsxs("option", { value: option.value, style: { color: "black" }, children: [option.label, option.badge ? ` (${option.badge})` : ""] }, option.value))) }), _jsx("span", { style: {
+                            position: "absolute",
+                            right: 16,
+                            top: 0,
+                            bottom: 0,
+                            display: "flex",
+                            alignItems: "center",
+                            color: colors.textSecondary,
+                        }, children: "\u25BE" })] })] }));
+};

package/dist/ui/components/StepIndicator.d.ts

@@ -0,0 +1,7 @@
+export interface StepIndicatorProps {
+    steps: number;
+    /** When provided, each dot is highlighted when the corresponding value is true; otherwise uses activeStep (i <= activeStep). */
+    stepActive?: boolean[];
+    activeStep?: number;
+}
+export declare const StepIndicator: ({ steps, stepActive, activeStep }: StepIndicatorProps) => import("react/jsx-runtime.js").JSX.Element;

package/dist/ui/components/StepIndicator.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { colors } from "../theme.js";
+export const StepIndicator = ({ steps, stepActive, activeStep = 0 }) => {
+    return (_jsx("div", { style: {
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "center",
+            width: 20,
+            paddingTop: 4,
+            flexShrink: 0,
+        }, children: Array.from({ length: steps }, (_, i) => {
+            const isActive = stepActive && stepActive.length > i ? stepActive[i] : i <= activeStep;
+            const isLast = i === steps - 1;
+            return (_jsxs("div", { style: { display: "flex", flexDirection: "column", alignItems: "center" }, children: [_jsx("div", { style: {
+                            width: 20,
+                            height: 20,
+                            borderRadius: "50%",
+                            border: `2px solid ${isActive ? colors.stepActive : colors.stepInactive}`,
+                            display: "flex",
+                            alignItems: "center",
+                            justifyContent: "center",
+                            boxSizing: "border-box",
+                        }, children: _jsx("div", { style: {
+                                width: 7.5,
+                                height: 7.5,
+                                borderRadius: "50%",
+                                background: isActive ? colors.stepActive : colors.stepInactive,
+                            } }) }), !isLast && (_jsx("div", { style: {
+                            width: 1,
+                            height: 87,
+                            background: isActive ? colors.stepActive : colors.stepInactive,
+                            opacity: 0.3,
+                        } }))] }, i));
+        }) }));
+};

package/dist/ui/components/Success.d.ts

@@ -0,0 +1 @@
+export declare const SuccessIcon: () => import("react/jsx-runtime").JSX.Element;

package/dist/ui/components/Success.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const SuccessIcon = () => {
+    return (_jsxs("svg", { width: "80", height: "81", viewBox: "0 0 80 81", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [_jsx("path", { d: "M40 80.5C62.0914 80.5 80 62.5914 80 40.5C80 18.4086 62.0914 0.5 40 0.5C17.9086 0.5 0 18.4086 0 40.5C0 62.5914 17.9086 80.5 40 80.5Z", fill: "#627EEA" }), _jsx("path", { d: "M38.999 16.5V34.2437L53.9962 40.9451L38.999 16.5Z", fill: "white", fillOpacity: "0.602" }), _jsx("path", { d: "M38.9991 16.5L24 40.9451L38.9991 34.2437V16.5Z", fill: "white" }), _jsx("path", { d: "M38.999 52.4434V64.4999L54.0061 43.7376L38.999 52.4434Z", fill: "white", fillOpacity: "0.602" }), _jsx("path", { d: "M38.9991 64.4999V52.4414L24 43.7376L38.9991 64.4999Z", fill: "white" }), _jsx("path", { d: "M38.999 49.653L53.9962 40.9451L38.999 34.2477V49.653Z", fill: "white", fillOpacity: "0.2" }), _jsx("path", { d: "M24 40.9451L38.9991 49.653V34.2477L24 40.9451Z", fill: "white", fillOpacity: "0.602" }), _jsx("g", { filter: "url(#filter0_ii_34_1690)", children: _jsx("circle", { cx: "40", cy: "40", r: "40", fill: "url(#paint0_linear_34_1690)" }) }), _jsx("path", { d: "M25.8057 35.9858L38.7921 49.0324L56.7734 30.9678", stroke: "#58AE36", strokeWidth: "5.16129", fill: "none" }), _jsxs("defs", { children: [_jsxs("filter", { id: "filter0_ii_34_1690", x: "0", y: "0", width: "80", height: "80", filterUnits: "userSpaceOnUse", colorInterpolationFilters: "sRGB", children: [_jsx("feFlood", { floodOpacity: "0", result: "BackgroundImageFix" }), _jsx("feBlend", { mode: "normal", in: "SourceGraphic", in2: "BackgroundImageFix", result: "shape" }), _jsx("feColorMatrix", { in: "SourceAlpha", type: "matrix", values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0", result: "hardAlpha" }), _jsx("feOffset", { dx: "-1.29032", dy: "-1.29032" }), _jsx("feComposite", { in2: "hardAlpha", operator: "arithmetic", k2: "-1", k3: "1" }), _jsx("feColorMatrix", { type: "matrix", values: "0 0 0 0 0.584745 0 0 0 0 1 0 0 0 0 0.420982 0 0 0 1 0" }), _jsx("feBlend", { mode: "multiply", in2: "shape", result: "effect1_innerShadow_34_1690" }), _jsx("feColorMatrix", { in: "SourceAlpha", type: "matrix", values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0", result: "hardAlpha" }), _jsx("feOffset", { dx: "1.29032", dy: "1.29032" }), _jsx("feComposite", { in2: "hardAlpha", operator: "arithmetic", k2: "-1", k3: "1" }), _jsx("feColorMatrix", { type: "matrix", values: "0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0" }), _jsx("feBlend", { mode: "normal", in2: "effect1_innerShadow_34_1690", result: "effect2_innerShadow_34_1690" })] }), _jsxs("linearGradient", { id: "paint0_linear_34_1690", x1: "27.4722", y1: "7.62951", x2: "70.4313", y2: "26.563", gradientUnits: "userSpaceOnUse", children: [_jsx("stop", { stopColor: "#BBFFA1" }), _jsx("stop", { offset: "1", stopColor: "#ACFE8B" })] })] })] }));
+};

package/dist/ui/components/Toast.d.ts

@@ -0,0 +1,8 @@
+export type ToastVariant = "success" | "error" | "info";
+export interface ToastProps {
+    message: string;
+    variant?: ToastVariant;
+    duration?: number;
+    onClose?: () => void;
+}
+export declare const Toast: ({ message, variant, duration, onClose }: ToastProps) => import("react/jsx-runtime.js").JSX.Element;