@silentswap/ui-kit 0.0.41

package/dist/components/AssetTile.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import type { ReactNode } from 'react';
+export interface AssetTileProps {
+    caip19: string;
+    onClick?: () => void;
+    className?: string;
+    children?: ReactNode;
+    size?: 'small' | 'medium' | 'large';
+}
+export declare const AssetTile: React.FC<AssetTileProps>;

package/dist/components/AssetTile.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { asset_get, chain_get } from '../data';
+export const AssetTile = ({ caip19, onClick, className = '', children, size = 'medium' }) => {
+    const asset = asset_get(caip19);
+    const chain = asset?.caip2 ? chain_get(asset.caip2) : undefined;
+    const sizeClasses = {
+        small: 'w-8 h-8',
+        medium: 'w-12 h-12',
+        large: 'w-16 h-16'
+    };
+    if (!asset) {
+        return (_jsx("div", { className: `flex items-center justify-center bg-gray-600 rounded-full ${sizeClasses[size]} ${className}`, children: _jsx("span", { className: "text-white text-xs", children: "?" }) }));
+    }
+    return (_jsxs("div", { className: `relative cursor-pointer ${className}`, onClick: onClick, children: [_jsx("div", { className: `flex items-center justify-center rounded-full ${sizeClasses[size]}`, style: {
+                    background: asset.gradient ? `linear-gradient(135deg, ${asset.gradient.map((g) => `#${g}`).join(', ')})` : 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)'
+                }, children: _jsx("img", { src: `/images/tokens/${asset.coingeckoId}.${asset.ext || 'svg'}`, alt: asset.symbol, className: "w-3/4 h-3/4 object-contain", style: asset.style ? JSON.parse(asset.style) : {} }) }), chain && (_jsx("div", { className: "absolute -bottom-1 -right-1 w-4 h-4 bg-black rounded-full flex items-center justify-center", children: _jsx("img", { src: `/images/chains/${chain.coingeckoPlatformId}.${chain.ext || 'svg'}`, alt: chain.name, className: "w-3 h-3 rounded-full object-cover" }) })), children] }));
+};

package/dist/components/Button.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import type { ButtonHTMLAttributes, ReactNode } from 'react';
+export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    /** Visual variant of the button */
+    variant?: 'primary' | 'secondary' | 'call-to-action' | 'link' | 'purple' | 'green';
+    /** Size of the button */
+    size?: 'small' | 'medium' | 'large';
+    /** Button content */
+    children: ReactNode;
+}
+/**
+ * Simple button component with different variants
+ * Based on SilentSwap Form.svelte and Plate.svelte styles
+ */
+export declare const Button: React.FC<ButtonProps>;

package/dist/components/Button.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+/**
+ * Simple button component with different variants
+ * Based on SilentSwap Form.svelte and Plate.svelte styles
+ */
+export const Button = ({ variant = 'primary', size = 'medium', className = '', children, ...props }) => {
+    const baseClasses = 'cursor-pointer select-none transition-all focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed rounded-lg border-none';
+    const variantClasses = {
+        primary: 'bg-[var(--color-yellow)] hover:opacity-80 text-black font-semibold focus:ring-[var(--color-yellow)]',
+        secondary: 'bg-[var(--color-dim-light)] hover:opacity-80 text-white focus:ring-[var(--color-dim-light)]',
+        'call-to-action': 'call-to-action', // Uses CSS class from styles.css
+        link: 'button-link bg-transparent text-[var(--color-yellow)] p-0 hover:opacity-80',
+        purple: 'bg-[var(--color-purple)] hover:opacity-80 text-white focus:ring-[var(--color-purple)]',
+        green: 'bg-[var(--color-green)] hover:opacity-80 text-black font-semibold focus:ring-[var(--color-green)]',
+    };
+    const sizeClasses = {
+        small: 'px-2 py-1 text-xs',
+        medium: 'px-4 py-2 text-sm',
+        large: 'px-6 py-3 text-base',
+    };
+    // Don't apply size classes to link variant
+    const applySizeClasses = variant !== 'link' && variant !== 'call-to-action';
+    const classes = `${baseClasses} ${variantClasses[variant]} ${applySizeClasses ? sizeClasses[size] : ''} ${className}`.trim();
+    return (_jsx("button", { className: classes, ...props, children: children }));
+};

package/dist/components/Card.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import type { HTMLAttributes, ReactNode } from 'react';
+export interface CardProps extends HTMLAttributes<HTMLDivElement> {
+    children: ReactNode;
+    /** Visual variant of the card */
+    variant?: 'default' | 'section' | 'elevated' | 'dark';
+    /** Whether to center the card */
+    centered?: boolean;
+}
+/**
+ * Simple card component with different variants
+ * Based on SilentSwap Form.svelte and Plate.svelte styles
+ */
+export declare const Card: React.ForwardRefExoticComponent<CardProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/Card.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React, { forwardRef } from 'react';
+/**
+ * Simple card component with different variants
+ * Based on SilentSwap Form.svelte and Plate.svelte styles
+ */
+export const Card = forwardRef(({ children, variant = 'default', centered = false, className = '', style, ...props }, ref) => {
+    const baseClasses = 'rounded-lg';
+    const variantClasses = {
+        default: 'bg-[var(--color-dim-med)] p-4',
+        section: 'card-section', // Uses CSS class from styles.css
+        elevated: 'bg-[var(--color-dim-med)] p-4 shadowed-box',
+        dark: 'bg-[var(--color-black)] p-4',
+    };
+    const centeredClasses = centered ? 'mx-auto' : '';
+    const classes = `${baseClasses} ${variantClasses[variant]} ${centeredClasses} ${className}`.trim();
+    return (_jsx("div", { ref: ref, className: classes, style: style, ...props, children: children }));
+});
+Card.displayName = 'Card';

package/dist/components/Input.d.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+import type { InputHTMLAttributes } from 'react';
+export interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
+    /** Visual variant of the input */
+    variant?: 'default' | 'digital' | 'amount';
+    /** Whether the input has an error */
+    error?: boolean;
+    /** Whether the input is loading */
+    loading?: boolean;
+    /** Optional label text */
+    label?: string;
+    /** Prefix text shown before input */
+    prefix?: string;
+}
+/**
+ * Simple input component with different variants
+ * Based on SilentSwap Form.svelte and Plate.svelte styles
+ */
+export declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;

package/dist/components/Input.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { forwardRef } from 'react';
+/**
+ * Simple input component with different variants
+ * Based on SilentSwap Form.svelte and Plate.svelte styles
+ */
+export const Input = forwardRef(({ variant = 'default', error = false, loading = false, label, prefix, className = '', ...props }, ref) => {
+    const baseClasses = 'w-full border-0 rounded-lg transition-all focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed';
+    const variantClasses = {
+        default: 'px-3 py-2 text-base bg-black text-white',
+        digital: 'digital-input', // Uses CSS class from styles.css
+        amount: 'text-[28px] font-bold text-white px-3 py-1 bg-black rounded-t-lg rounded-b-none',
+    };
+    const errorClasses = error ? 'focus:ring-red-500' : 'focus:ring-[var(--color-yellow)]';
+    const loadingClasses = loading ? 'animate-[trill_350ms_linear_infinite] bg-[var(--color-gray-dark)]' : '';
+    const classes = `${baseClasses} ${variantClasses[variant]} ${errorClasses} ${loadingClasses} ${className}`.trim();
+    const inputElement = (_jsxs("div", { className: "relative flex items-center", children: [prefix && (_jsx("span", { className: "absolute left-3 text-gray-400 font-medium", children: prefix })), _jsx("input", { ref: ref, className: `${classes} ${prefix ? 'pl-8' : ''}`, ...props })] }));
+    if (label) {
+        return (_jsxs("div", { className: "w-full", children: [_jsx("label", { className: "block text-sm font-medium mb-1 text-gray-300", children: label }), inputElement] }));
+    }
+    return inputElement;
+});
+Input.displayName = 'Input';

package/dist/components/PopularTokensArea.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+export interface PopularTokensAreaProps {
+    onTokenSelect?: (caip19: string) => void;
+    title?: string;
+    tokens?: string[];
+    className?: string;
+}
+export declare const PopularTokensArea: React.FC<PopularTokensAreaProps>;

package/dist/components/PopularTokensArea.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { S_CAIP19_USDC_AVALANCHE } from '../constants';
+import { asset_get } from '../data';
+import { AssetTile } from './AssetTile';
+export const PopularTokensArea = ({ onTokenSelect, title = 'Popular Tokens', tokens, className = '' }) => {
+    const defaultTokens = [
+        'eip155:1/slip44:60', // ETH on Ethereum
+        'eip155:1/erc20:0xdAC17F958D2ee523a2206206994597C13D831ec7', // USDT on Ethereum
+        'eip155:1/erc20:0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48', // USDC on Ethereum
+        'eip155:1/erc20:0xC02aaA39b223FE8D0A0e5C4F27eAD9083C756Cc2', // WETH on Ethereum
+        'eip155:1/erc20:0x2260FAC5E5542a773Aa44fBCfeDf7C193bc2C599', // WBTC on Ethereum
+        'eip155:56/slip44:714', // BNB on BSC
+        'eip155:56/erc20:0xbb4CdB9CBd36B01bD1cBaEBF2De08d9173bc095c', // WBNB on BSC
+        'eip155:8453/slip44:60', // ETH on Base
+        'eip155:8453/erc20:0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913', // USDC on Base
+        'eip155:43114/slip44:9005', // WAVAX on Avalanche
+        S_CAIP19_USDC_AVALANCHE, // USDC on Avalanche
+        'eip155:137/slip44:966', // WMATIC/WPOL on Polygon
+        'eip155:137/erc20:0xc2132D05D31c914a87C6611C10748AEb04B58e8F', // USDT0 on Polygon
+        'eip155:137/erc20:0x3c499c542cEF5E3811e1192ce70d8cC03d5c3359', // USDC on Polygon
+        'eip155:10/slip44:60', // WETH on Optimism
+        'eip155:10/erc20:0x0b2C639c533813f4Aa9D7837CAf62653d097Ff85', // USDC on Optimism
+        'eip155:42161/slip44:60', // WETH on Arbitrum
+        'eip155:42161/erc20:0xaf88d065e77c8cC2239327C5EDb3A432268e5831', // USDC on Arbitrum
+    ];
+    const popularTokens = tokens || defaultTokens;
+    return (_jsxs("div", { className: `${className}`, children: [_jsx("div", { className: "font-orbitron text-lg font-bold text-white mb-3", children: title }), _jsx("div", { className: "flex gap-2 overflow-x-auto pb-2", children: popularTokens.map((caip19) => {
+                    const asset = asset_get(caip19);
+                    if (!asset)
+                        return null;
+                    return (_jsxs("div", { className: "flex flex-col items-center gap-2 bg-dim-med rounded-lg p-2 cursor-pointer hover:bg-dim-light transition-colors min-w-fit", onClick: () => onTokenSelect?.(caip19), role: "button", tabIndex: 0, "aria-label": `Select ${asset.symbol}`, children: [_jsx(AssetTile, { caip19: caip19, size: "small" }), _jsx("div", { className: "text-text-dim text-xs text-center", children: asset.symbol?.toUpperCase() })] }, caip19));
+                }) })] }));
+};

package/dist/components/ProgressBar.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+import type { HTMLAttributes } from 'react';
+export interface ProgressBarProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+    /** Progress value from 0 to 1 (0 = 0%, 1 = 100%) */
+    value: number;
+    /** Height of the progress bar in pixels */
+    height?: number;
+    /** Color of the progress fill */
+    color?: 'green' | 'yellow' | 'purple' | 'orange';
+    /** Whether to show the progress bar (animates height) */
+    show?: boolean;
+}
+/**
+ * Simple progress bar component
+ * Based on SilentSwap Plate.svelte progress styles
+ */
+export declare const ProgressBar: React.FC<ProgressBarProps>;

package/dist/components/ProgressBar.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+/**
+ * Simple progress bar component
+ * Based on SilentSwap Plate.svelte progress styles
+ */
+export const ProgressBar = ({ value, height = 6, color = 'green', show = true, className = '', style, ...props }) => {
+    const colorClasses = {
+        green: 'bg-[var(--color-green)]',
+        yellow: 'bg-[var(--color-yellow)]',
+        purple: 'bg-[var(--color-purple)]',
+        orange: 'bg-[var(--color-orange)]',
+    };
+    // Clamp value between 0 and 1
+    const clampedValue = Math.max(0, Math.min(1, value));
+    const containerStyle = {
+        height: show ? `${height}px` : '0px',
+        width: '100%',
+        backgroundColor: 'var(--color-gray-dark)',
+        transition: 'height 500ms linear',
+        overflow: 'hidden',
+        ...style,
+    };
+    const fillStyle = {
+        width: `${clampedValue * 100}%`,
+        height: '100%',
+        transition: 'width 490ms linear',
+    };
+    return (_jsx("div", { className: className, style: containerStyle, role: "progressbar", "aria-valuenow": clampedValue * 100, "aria-valuemin": 0, "aria-valuemax": 100, ...props, children: _jsx("div", { className: colorClasses[color], style: fillStyle }) }));
+};

package/dist/components/Select.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import type { SelectHTMLAttributes } from 'react';
+export interface SelectOption {
+    value: string;
+    label: string;
+    disabled?: boolean;
+}
+export interface SelectProps extends Omit<SelectHTMLAttributes<HTMLSelectElement>, 'children'> {
+    options: SelectOption[];
+    placeholder?: string;
+}
+export declare const Select: React.ForwardRefExoticComponent<SelectProps & React.RefAttributes<HTMLSelectElement>>;

package/dist/components/Select.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { forwardRef } from 'react';
+export const Select = forwardRef(({ options, placeholder, className = '', ...props }, ref) => {
+    const classes = `bg-black border-0 rounded-lg text-white px-3 py-2 cursor-pointer transition-colors focus:outline-none focus:ring-2 focus:ring-yellow focus:ring-offset-2 hover:bg-dim-dark ${className}`.trim();
+    return (_jsxs("select", { ref: ref, className: classes, ...props, children: [placeholder && (_jsx("option", { value: "", disabled: true, children: placeholder })), options.map((option) => (_jsx("option", { value: option.value, disabled: option.disabled, className: "bg-black text-text-bright", children: option.label }, option.value)))] }));
+});
+Select.displayName = 'Select';

package/dist/components/Warning.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import type { HTMLAttributes, ReactNode } from 'react';
+export interface WarningProps extends HTMLAttributes<HTMLDivElement> {
+    /** Warning content */
+    children: ReactNode;
+    /** Variant of the warning */
+    variant?: 'warning' | 'error' | 'info' | 'success';
+    /** Whether to show a dot indicator */
+    showDot?: boolean;
+}
+/**
+ * Simple warning/notice component
+ * Based on SilentSwap Plate.svelte input-notice styles
+ */
+export declare const Warning: React.FC<WarningProps>;

package/dist/components/Warning.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+/**
+ * Simple warning/notice component
+ * Based on SilentSwap Plate.svelte input-notice styles
+ */
+export const Warning = ({ children, variant = 'warning', showDot = true, className = '', ...props }) => {
+    const baseClasses = 'text-xs bg-black/80 rounded px-2 py-1 flex items-center gap-1';
+    const variantClasses = {
+        warning: 'text-[#FED703]',
+        error: 'text-red-500',
+        info: 'text-blue-400',
+        success: 'text-[var(--color-green)]',
+    };
+    const dotColor = {
+        warning: '#FED703',
+        error: '#ef4444',
+        info: '#60a5fa',
+        success: 'var(--color-green)',
+    };
+    const classes = `${baseClasses} ${variantClasses[variant]} ${className}`.trim();
+    return (_jsxs("div", { className: classes, ...props, children: [showDot && (_jsx("span", { className: "inline-block w-[5px] h-[6px] rounded-full", style: { backgroundColor: dotColor[variant] } })), _jsx("span", { children: children })] }));
+};

package/dist/constants.d.ts

@@ -0,0 +1,2 @@
+export declare const S_CAIP19_USDC_AVALANCHE = "eip155:43114/erc20:0xB97EF9Ef8734C71904D8002F8b6Bc66Dd9c48a6E";
+export declare const X_MINIMUM_INPUT_USD = 9.95;

package/dist/constants.js

@@ -0,0 +1,4 @@
+// CAIP-19 identifier for USDC on Avalanche
+export const S_CAIP19_USDC_AVALANCHE = 'eip155:43114/erc20:0xB97EF9Ef8734C71904D8002F8b6Bc66Dd9c48a6E';
+// Minimum input USD value
+export const X_MINIMUM_INPUT_USD = 9.95;

package/dist/data.d.ts

@@ -0,0 +1,7 @@
+import type { Asset, WeakCaip19, WeakCaip2 } from './types';
+export declare function loadAssets(assetData: {
+    assets: Record<WeakCaip19, Asset>;
+    chains: Record<WeakCaip2, any>;
+}): void;
+export declare function asset_get(si_caip19: string): Asset | undefined;
+export declare function chain_get(si_caip2: string): any | undefined;

package/dist/data.js

@@ -0,0 +1,14 @@
+// Global assets and chains stores
+let H_ASSETS = {};
+let H_CHAINS = {};
+// Asset data loading function - needs to be called by consumer
+export function loadAssets(assetData) {
+    H_ASSETS = assetData.assets;
+    H_CHAINS = assetData.chains;
+}
+export function asset_get(si_caip19) {
+    return H_ASSETS[si_caip19];
+}
+export function chain_get(si_caip2) {
+    return H_CHAINS[si_caip2];
+}

package/dist/index.d.ts

@@ -0,0 +1,17 @@
+export { Button } from './components/Button';
+export { Input } from './components/Input';
+export { Select } from './components/Select';
+export { Card } from './components/Card';
+export { Warning } from './components/Warning';
+export { ProgressBar } from './components/ProgressBar';
+export { AssetTile } from './components/AssetTile';
+export { PopularTokensArea } from './components/PopularTokensArea';
+export type { Asset, ContactId } from './types';
+export type { ButtonProps } from './components/Button';
+export type { InputProps } from './components/Input';
+export type { SelectProps, SelectOption } from './components/Select';
+export type { CardProps } from './components/Card';
+export type { WarningProps } from './components/Warning';
+export type { ProgressBarProps } from './components/ProgressBar';
+export { S_CAIP19_USDC_AVALANCHE, X_MINIMUM_INPUT_USD } from './constants';
+export { loadAssets } from './data';

package/dist/index.js

@@ -0,0 +1,13 @@
+// Components
+export { Button } from './components/Button';
+export { Input } from './components/Input';
+export { Select } from './components/Select';
+export { Card } from './components/Card';
+export { Warning } from './components/Warning';
+export { ProgressBar } from './components/ProgressBar';
+export { AssetTile } from './components/AssetTile';
+export { PopularTokensArea } from './components/PopularTokensArea';
+// Constants
+export { S_CAIP19_USDC_AVALANCHE, X_MINIMUM_INPUT_USD } from './constants';
+// Data utilities
+export { loadAssets } from './data';