@varity-labs/ui-kit 2.0.0-alpha.1

package/dist/web3/AmountInput/AmountInput.js

@@ -0,0 +1,74 @@
+import React, { useState } from 'react';
+import { parseUSDC, formatUSDC } from '../../config/chains';
+/**
+ * Amount Input Component
+ *
+ * Input field for USDC amounts with proper 6-decimal handling:
+ * - Validates numeric input
+ * - Formats to 6 decimals
+ * - Max button for full balance
+ * - Error states
+ *
+ * @example
+ * ```tsx
+ * import { AmountInput } from '@varity-labs/ui-kit';
+ *
+ * function SendForm() {
+ *   const [amount, setAmount] = useState('');
+ *
+ *   return (
+ *     <AmountInput
+ *       value={amount}
+ *       onChange={(value, valueBigInt) => setAmount(value)}
+ *       max={BigInt(1000000000)} // 1000 USDC
+ *       showMax
+ *       label="Amount to send"
+ *       placeholder="0.00"
+ *     />
+ *   );
+ * }
+ * ```
+ */
+export function AmountInput({ value, onChange, max, showMax = true, label, placeholder = '0.00', error, className = '', }) {
+    const [isFocused, setIsFocused] = useState(false);
+    const handleChange = (e) => {
+        const inputValue = e.target.value;
+        // Allow empty string
+        if (inputValue === '') {
+            onChange('', BigInt(0));
+            return;
+        }
+        // Validate numeric input with up to 6 decimals
+        const regex = /^\d*\.?\d{0,6}$/;
+        if (!regex.test(inputValue)) {
+            return;
+        }
+        try {
+            const valueBigInt = parseUSDC(inputValue);
+            onChange(inputValue, valueBigInt);
+        }
+        catch (err) {
+            // Invalid input, don't update
+        }
+    };
+    const handleMax = () => {
+        if (max) {
+            const maxValue = formatUSDC(max, 6);
+            onChange(maxValue, max);
+        }
+    };
+    const isOverMax = max && value ? parseUSDC(value) > max : false;
+    return (React.createElement("div", { className: `space-y-2 ${className}` },
+        label && (React.createElement("label", { className: "block text-sm font-medium text-gray-700 dark:text-gray-300" }, label)),
+        React.createElement("div", { className: "relative" },
+            React.createElement("input", { type: "text", value: value, onChange: handleChange, onFocus: () => setIsFocused(true), onBlur: () => setIsFocused(false), placeholder: placeholder, className: `input pr-20 ${error || isOverMax ? 'border-red-500 focus:ring-red-500' : ''}` }),
+            React.createElement("div", { className: "absolute right-2 top-1/2 -translate-y-1/2 flex items-center gap-2" },
+                Boolean(showMax && max) && (React.createElement("button", { type: "button", onClick: handleMax, className: "text-xs text-varity-primary hover:text-varity-primary/80 font-medium" }, "MAX")),
+                React.createElement("span", { className: "text-sm text-gray-500" }, "USDC"))),
+        (error || isOverMax) && (React.createElement("p", { className: "text-sm text-red-500" }, error || 'Amount exceeds maximum')),
+        Boolean(max && value && !error && !isOverMax) && (React.createElement("p", { className: "text-xs text-gray-500" },
+            "Maximum: ",
+            max ? formatUSDC(max, 2).toString() : '',
+            " USDC"))));
+}
+//# sourceMappingURL=AmountInput.js.map

package/dist/web3/AmountInput/AmountInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AmountInput.js","sourceRoot":"","sources":["../../../src/web3/AmountInput/AmountInput.tsx"],"names":[],"mappings":"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"}

package/dist/web3/BalanceDisplay/BalanceDisplay.d.ts

@@ -0,0 +1,30 @@
+export interface BalanceDisplayProps {
+    balance: bigint | string | number;
+    showSymbol?: boolean;
+    decimals?: number;
+    className?: string;
+    size?: 'sm' | 'md' | 'lg';
+}
+/**
+ * Balance Display Component
+ *
+ * Formats and displays USDC balance with proper 6-decimal formatting
+ *
+ * @example
+ * ```tsx
+ * import { BalanceDisplay } from '@varity-labs/ui-kit';
+ *
+ * function Portfolio() {
+ *   return (
+ *     <BalanceDisplay
+ *       balance={BigInt(1500000000)} // 1,500 USDC
+ *       showSymbol
+ *       decimals={2}
+ *       size="lg"
+ *     />
+ *   );
+ * }
+ * ```
+ */
+export declare function BalanceDisplay({ balance, showSymbol, decimals, className, size, }: BalanceDisplayProps): JSX.Element;
+//# sourceMappingURL=BalanceDisplay.d.ts.map

package/dist/web3/BalanceDisplay/BalanceDisplay.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BalanceDisplay.d.ts","sourceRoot":"","sources":["../../../src/web3/BalanceDisplay/BalanceDisplay.tsx"],"names":[],"mappings":"AAGA,MAAM,WAAW,mBAAmB;IAClC,OAAO,EAAE,MAAM,GAAG,MAAM,GAAG,MAAM,CAAC;IAClC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;CAC3B;AAED;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,wBAAgB,cAAc,CAAC,EAC7B,OAAO,EACP,UAAiB,EACjB,QAAY,EACZ,SAAc,EACd,IAAW,GACZ,EAAE,mBAAmB,GAAG,GAAG,CAAC,OAAO,CAmBnC"}

package/dist/web3/BalanceDisplay/BalanceDisplay.js

@@ -0,0 +1,35 @@
+import React from 'react';
+import { formatUSDC } from '../../config/chains';
+/**
+ * Balance Display Component
+ *
+ * Formats and displays USDC balance with proper 6-decimal formatting
+ *
+ * @example
+ * ```tsx
+ * import { BalanceDisplay } from '@varity-labs/ui-kit';
+ *
+ * function Portfolio() {
+ *   return (
+ *     <BalanceDisplay
+ *       balance={BigInt(1500000000)} // 1,500 USDC
+ *       showSymbol
+ *       decimals={2}
+ *       size="lg"
+ *     />
+ *   );
+ * }
+ * ```
+ */
+export function BalanceDisplay({ balance, showSymbol = true, decimals = 2, className = '', size = 'md', }) {
+    const formattedBalance = formatUSDC(balance, decimals);
+    const sizeClasses = {
+        sm: 'text-sm',
+        md: 'text-base',
+        lg: 'text-2xl',
+    };
+    return (React.createElement("div", { className: `flex items-baseline gap-1 ${className}` },
+        React.createElement("span", { className: `font-semibold ${sizeClasses[size]}` }, formattedBalance),
+        showSymbol && (React.createElement("span", { className: "text-sm text-gray-600 dark:text-gray-400" }, "USDC"))));
+}
+//# sourceMappingURL=BalanceDisplay.js.map

package/dist/web3/BalanceDisplay/BalanceDisplay.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BalanceDisplay.js","sourceRoot":"","sources":["../../../src/web3/BalanceDisplay/BalanceDisplay.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAUjD;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,MAAM,UAAU,cAAc,CAAC,EAC7B,OAAO,EACP,UAAU,GAAG,IAAI,EACjB,QAAQ,GAAG,CAAC,EACZ,SAAS,GAAG,EAAE,EACd,IAAI,GAAG,IAAI,GACS;IACpB,MAAM,gBAAgB,GAAG,UAAU,CAAC,OAAO,EAAE,QAAQ,CAAC,CAAC;IAEvD,MAAM,WAAW,GAAG;QAClB,EAAE,EAAE,SAAS;QACb,EAAE,EAAE,WAAW;QACf,EAAE,EAAE,UAAU;KACf,CAAC;IAEF,OAAO,CACL,6BAAK,SAAS,EAAE,6BAA6B,SAAS,EAAE;QACtD,8BAAM,SAAS,EAAE,iBAAiB,WAAW,CAAC,IAAI,CAAC,EAAE,IAClD,gBAAgB,CACZ;QACN,UAAU,IAAI,CACb,8BAAM,SAAS,EAAC,0CAA0C,WAAY,CACvE,CACG,CACP,CAAC;AACJ,CAAC"}

package/dist/web3/BlockExplorerLink/BlockExplorerLink.d.ts

@@ -0,0 +1,41 @@
+import React from 'react';
+export interface BlockExplorerLinkProps {
+    type: 'tx' | 'address' | 'block';
+    hash: string;
+    chainId?: number;
+    label?: string;
+    children?: React.ReactNode;
+    className?: string;
+}
+/**
+ * Block Explorer Link Component
+ *
+ * Creates links to Arbiscan block explorer for transactions, addresses, or blocks
+ *
+ * @example
+ * ```tsx
+ * import { BlockExplorerLink } from '@varity-labs/ui-kit';
+ *
+ * function Transaction() {
+ *   return (
+ *     <>
+ *       <BlockExplorerLink
+ *         type="tx"
+ *         hash="0xabc..."
+ *         label="View Transaction"
+ *       />
+ *
+ *       <BlockExplorerLink
+ *         type="address"
+ *         hash="0x123..."
+ *       >
+ *         View on Explorer
+ *       </BlockExplorerLink>
+ *     </>
+ *   );
+ * }
+ * ```
+ */
+export declare function BlockExplorerLink({ type, hash, chainId, // Default to Arbitrum Sepolia
+label, children, className, }: BlockExplorerLinkProps): JSX.Element;
+//# sourceMappingURL=BlockExplorerLink.d.ts.map

package/dist/web3/BlockExplorerLink/BlockExplorerLink.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BlockExplorerLink.d.ts","sourceRoot":"","sources":["../../../src/web3/BlockExplorerLink/BlockExplorerLink.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,MAAM,WAAW,sBAAsB;IACrC,IAAI,EAAE,IAAI,GAAG,SAAS,GAAG,OAAO,CAAC;IACjC,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,wBAAgB,iBAAiB,CAAC,EAChC,IAAI,EACJ,IAAI,EACJ,OAAgB,EAAE,8BAA8B;AAChD,KAAK,EACL,QAAQ,EACR,SAAc,GACf,EAAE,sBAAsB,GAAG,GAAG,CAAC,OAAO,CAwBtC"}

package/dist/web3/BlockExplorerLink/BlockExplorerLink.js

@@ -0,0 +1,46 @@
+import React from 'react';
+import { getBlockExplorerUrl } from '../../config/chains';
+/**
+ * Block Explorer Link Component
+ *
+ * Creates links to Arbiscan block explorer for transactions, addresses, or blocks
+ *
+ * @example
+ * ```tsx
+ * import { BlockExplorerLink } from '@varity-labs/ui-kit';
+ *
+ * function Transaction() {
+ *   return (
+ *     <>
+ *       <BlockExplorerLink
+ *         type="tx"
+ *         hash="0xabc..."
+ *         label="View Transaction"
+ *       />
+ *
+ *       <BlockExplorerLink
+ *         type="address"
+ *         hash="0x123..."
+ *       >
+ *         View on Explorer
+ *       </BlockExplorerLink>
+ *     </>
+ *   );
+ * }
+ * ```
+ */
+export function BlockExplorerLink({ type, hash, chainId = 421614, // Default to Arbitrum Sepolia
+label, children, className = '', }) {
+    const url = getBlockExplorerUrl(chainId, type, hash);
+    const defaultLabels = {
+        tx: 'View Transaction',
+        address: 'View Address',
+        block: 'View Block',
+    };
+    const displayText = children || label || defaultLabels[type];
+    return (React.createElement("a", { href: url, target: "_blank", rel: "noopener noreferrer", className: `inline-flex items-center gap-1 text-varity-primary hover:text-varity-primary/80 underline ${className}` },
+        displayText,
+        React.createElement("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24" },
+            React.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" }))));
+}
+//# sourceMappingURL=BlockExplorerLink.js.map

package/dist/web3/BlockExplorerLink/BlockExplorerLink.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BlockExplorerLink.js","sourceRoot":"","sources":["../../../src/web3/BlockExplorerLink/BlockExplorerLink.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,mBAAmB,EAAE,MAAM,qBAAqB,CAAC;AAW1D;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,MAAM,UAAU,iBAAiB,CAAC,EAChC,IAAI,EACJ,IAAI,EACJ,OAAO,GAAG,MAAM,EAAE,8BAA8B;AAChD,KAAK,EACL,QAAQ,EACR,SAAS,GAAG,EAAE,GACS;IACvB,MAAM,GAAG,GAAG,mBAAmB,CAAC,OAAO,EAAE,IAAI,EAAE,IAAI,CAAC,CAAC;IAErD,MAAM,aAAa,GAAG;QACpB,EAAE,EAAE,kBAAkB;QACtB,OAAO,EAAE,cAAc;QACvB,KAAK,EAAE,YAAY;KACpB,CAAC;IAEF,MAAM,WAAW,GAAG,QAAQ,IAAI,KAAK,IAAI,aAAa,CAAC,IAAI,CAAC,CAAC;IAE7D,OAAO,CACL,2BACE,IAAI,EAAE,GAAG,EACT,MAAM,EAAC,QAAQ,EACf,GAAG,EAAC,qBAAqB,EACzB,SAAS,EAAE,6FAA6F,SAAS,EAAE;QAElH,WAAW;QACZ,6BAAK,SAAS,EAAC,SAAS,EAAC,IAAI,EAAC,MAAM,EAAC,MAAM,EAAC,cAAc,EAAC,OAAO,EAAC,WAAW;YAC5E,8BAAM,aAAa,EAAC,OAAO,EAAC,cAAc,EAAC,OAAO,EAAC,WAAW,EAAE,CAAC,EAAE,CAAC,EAAC,8EAA8E,GAAG,CAClJ,CACJ,CACL,CAAC;AACJ,CAAC"}

package/dist/web3/ConnectWallet/ConnectWallet.d.ts

@@ -0,0 +1,35 @@
+export interface ConnectWalletProps {
+    variant?: 'primary' | 'secondary' | 'outline';
+    size?: 'sm' | 'md' | 'lg';
+    onConnect?: (address: string) => void;
+    onError?: (error: Error) => void;
+    className?: string;
+    label?: string;
+}
+/**
+ * Connect Wallet Button Component
+ *
+ * Displays a button that opens wallet connection modal with support for:
+ * - MetaMask
+ * - WalletConnect
+ * - Coinbase Wallet
+ * - Email/Social logins
+ *
+ * @example
+ * ```tsx
+ * import { ConnectWallet } from '@varity-labs/ui-kit';
+ *
+ * function Header() {
+ *   return (
+ *     <ConnectWallet
+ *       variant="primary"
+ *       size="md"
+ *       onConnect={(address) => console.log('Connected:', address)}
+ *       onError={(error) => console.error('Connection failed:', error)}
+ *     />
+ *   );
+ * }
+ * ```
+ */
+export declare function ConnectWallet({ variant, size, onConnect, onError, className, label, }: ConnectWalletProps): JSX.Element;
+//# sourceMappingURL=ConnectWallet.d.ts.map

package/dist/web3/ConnectWallet/ConnectWallet.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConnectWallet.d.ts","sourceRoot":"","sources":["../../../src/web3/ConnectWallet/ConnectWallet.tsx"],"names":[],"mappings":"AAMA,MAAM,WAAW,kBAAkB;IACjC,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,SAAS,CAAC;IAC9C,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,SAAS,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IACjC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,wBAAgB,aAAa,CAAC,EAC5B,OAAmB,EACnB,IAAW,EACX,SAAS,EACT,OAAO,EACP,SAAc,EACd,KAAwB,GACzB,EAAE,kBAAkB,GAAG,GAAG,CAAC,OAAO,CA0ClC"}

package/dist/web3/ConnectWallet/ConnectWallet.js

@@ -0,0 +1,58 @@
+import React from 'react';
+import { ConnectButton } from 'thirdweb/react';
+import { createWallet } from 'thirdweb/wallets';
+import { createThirdwebClient } from 'thirdweb';
+import { THIRDWEB_CLIENT_ID, DEFAULT_CHAIN } from '../../config/chains';
+/**
+ * Connect Wallet Button Component
+ *
+ * Displays a button that opens wallet connection modal with support for:
+ * - MetaMask
+ * - WalletConnect
+ * - Coinbase Wallet
+ * - Email/Social logins
+ *
+ * @example
+ * ```tsx
+ * import { ConnectWallet } from '@varity-labs/ui-kit';
+ *
+ * function Header() {
+ *   return (
+ *     <ConnectWallet
+ *       variant="primary"
+ *       size="md"
+ *       onConnect={(address) => console.log('Connected:', address)}
+ *       onError={(error) => console.error('Connection failed:', error)}
+ *     />
+ *   );
+ * }
+ * ```
+ */
+export function ConnectWallet({ variant = 'primary', size = 'md', onConnect, onError, className = '', label = 'Connect Wallet', }) {
+    const client = React.useMemo(() => createThirdwebClient({ clientId: THIRDWEB_CLIENT_ID }), []);
+    const wallets = React.useMemo(() => [
+        createWallet('io.metamask'),
+        createWallet('com.coinbase.wallet'),
+        createWallet('walletConnect'),
+    ], []);
+    const variantClasses = {
+        primary: 'btn btn-primary',
+        secondary: 'btn btn-secondary',
+        outline: 'btn btn-outline',
+    };
+    const sizeClasses = {
+        sm: 'btn-sm',
+        md: 'btn-md',
+        lg: 'btn-lg',
+    };
+    const buttonClasses = `${variantClasses[variant]} ${sizeClasses[size]} ${className}`;
+    return (React.createElement(ConnectButton, { client: client, wallets: wallets, chain: DEFAULT_CHAIN, connectButton: {
+            label: label,
+            className: buttonClasses,
+        }, onConnect: (wallet) => {
+            if (onConnect && wallet.getAccount()?.address) {
+                onConnect(wallet.getAccount().address);
+            }
+        } }));
+}
+//# sourceMappingURL=ConnectWallet.js.map

package/dist/web3/ConnectWallet/ConnectWallet.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConnectWallet.js","sourceRoot":"","sources":["../../../src/web3/ConnectWallet/ConnectWallet.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAC/C,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAChD,OAAO,EAAE,oBAAoB,EAAE,MAAM,UAAU,CAAC;AAChD,OAAO,EAAE,kBAAkB,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAWxE;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,MAAM,UAAU,aAAa,CAAC,EAC5B,OAAO,GAAG,SAAS,EACnB,IAAI,GAAG,IAAI,EACX,SAAS,EACT,OAAO,EACP,SAAS,GAAG,EAAE,EACd,KAAK,GAAG,gBAAgB,GACL;IACnB,MAAM,MAAM,GAAG,KAAK,CAAC,OAAO,CAC1B,GAAG,EAAE,CAAC,oBAAoB,CAAC,EAAE,QAAQ,EAAE,kBAAkB,EAAE,CAAC,EAC5D,EAAE,CACH,CAAC;IAEF,MAAM,OAAO,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE,CAAC;QAClC,YAAY,CAAC,aAAa,CAAC;QAC3B,YAAY,CAAC,qBAAqB,CAAC;QACnC,YAAY,CAAC,eAAe,CAAC;KAC9B,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,cAAc,GAAG;QACrB,OAAO,EAAE,iBAAiB;QAC1B,SAAS,EAAE,mBAAmB;QAC9B,OAAO,EAAE,iBAAiB;KAC3B,CAAC;IAEF,MAAM,WAAW,GAAG;QAClB,EAAE,EAAE,QAAQ;QACZ,EAAE,EAAE,QAAQ;QACZ,EAAE,EAAE,QAAQ;KACb,CAAC;IAEF,MAAM,aAAa,GAAG,GAAG,cAAc,CAAC,OAAO,CAAC,IAAI,WAAW,CAAC,IAAI,CAAC,IAAI,SAAS,EAAE,CAAC;IAErF,OAAO,CACL,oBAAC,aAAa,IACZ,MAAM,EAAE,MAAM,EACd,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,aAAa,EACpB,aAAa,EAAE;YACb,KAAK,EAAE,KAAK;YACZ,SAAS,EAAE,aAAa;SACzB,EACD,SAAS,EAAE,CAAC,MAAM,EAAE,EAAE;YACpB,IAAI,SAAS,IAAI,MAAM,CAAC,UAAU,EAAE,EAAE,OAAO,EAAE,CAAC;gBAC9C,SAAS,CAAC,MAAM,CAAC,UAAU,EAAG,CAAC,OAAO,CAAC,CAAC;YAC1C,CAAC;QACH,CAAC,GACD,CACH,CAAC;AACJ,CAAC"}

package/dist/web3/DisconnectButton/DisconnectButton.d.ts

@@ -0,0 +1,30 @@
+export interface DisconnectButtonProps {
+    variant?: 'primary' | 'secondary' | 'outline';
+    size?: 'sm' | 'md' | 'lg';
+    onDisconnect?: () => void;
+    className?: string;
+    label?: string;
+}
+/**
+ * Disconnect Wallet Button Component
+ *
+ * Displays a button to disconnect the currently connected wallet
+ *
+ * @example
+ * ```tsx
+ * import { DisconnectButton } from '@varity-labs/ui-kit';
+ *
+ * function Settings() {
+ *   return (
+ *     <DisconnectButton
+ *       variant="secondary"
+ *       size="md"
+ *       onDisconnect={() => console.log('Disconnected')}
+ *       label="Disconnect Wallet"
+ *     />
+ *   );
+ * }
+ * ```
+ */
+export declare function DisconnectButton({ variant, size, onDisconnect, className, label, }: DisconnectButtonProps): JSX.Element | null;
+//# sourceMappingURL=DisconnectButton.d.ts.map

package/dist/web3/DisconnectButton/DisconnectButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DisconnectButton.d.ts","sourceRoot":"","sources":["../../../src/web3/DisconnectButton/DisconnectButton.tsx"],"names":[],"mappings":"AAGA,MAAM,WAAW,qBAAqB;IACpC,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,SAAS,CAAC;IAC9C,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,wBAAgB,gBAAgB,CAAC,EAC/B,OAAqB,EACrB,IAAW,EACX,YAAY,EACZ,SAAc,EACd,KAAoB,GACrB,EAAE,qBAAqB,GAAG,GAAG,CAAC,OAAO,GAAG,IAAI,CAmC5C"}

package/dist/web3/DisconnectButton/DisconnectButton.js

@@ -0,0 +1,48 @@
+import React from 'react';
+import { useDisconnect, useActiveWallet } from 'thirdweb/react';
+/**
+ * Disconnect Wallet Button Component
+ *
+ * Displays a button to disconnect the currently connected wallet
+ *
+ * @example
+ * ```tsx
+ * import { DisconnectButton } from '@varity-labs/ui-kit';
+ *
+ * function Settings() {
+ *   return (
+ *     <DisconnectButton
+ *       variant="secondary"
+ *       size="md"
+ *       onDisconnect={() => console.log('Disconnected')}
+ *       label="Disconnect Wallet"
+ *     />
+ *   );
+ * }
+ * ```
+ */
+export function DisconnectButton({ variant = 'secondary', size = 'md', onDisconnect, className = '', label = 'Disconnect', }) {
+    const wallet = useActiveWallet();
+    const { disconnect } = useDisconnect();
+    if (!wallet) {
+        return null;
+    }
+    const variantClasses = {
+        primary: 'btn btn-primary',
+        secondary: 'btn btn-secondary',
+        outline: 'btn btn-outline',
+    };
+    const sizeClasses = {
+        sm: 'btn-sm',
+        md: 'btn-md',
+        lg: 'btn-lg',
+    };
+    const handleDisconnect = async () => {
+        await disconnect(wallet);
+        if (onDisconnect) {
+            onDisconnect();
+        }
+    };
+    return (React.createElement("button", { onClick: handleDisconnect, className: `${variantClasses[variant]} ${sizeClasses[size]} ${className}` }, label));
+}
+//# sourceMappingURL=DisconnectButton.js.map

package/dist/web3/DisconnectButton/DisconnectButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DisconnectButton.js","sourceRoot":"","sources":["../../../src/web3/DisconnectButton/DisconnectButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,aAAa,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAUhE;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,MAAM,UAAU,gBAAgB,CAAC,EAC/B,OAAO,GAAG,WAAW,EACrB,IAAI,GAAG,IAAI,EACX,YAAY,EACZ,SAAS,GAAG,EAAE,EACd,KAAK,GAAG,YAAY,GACE;IACtB,MAAM,MAAM,GAAG,eAAe,EAAE,CAAC;IACjC,MAAM,EAAE,UAAU,EAAE,GAAG,aAAa,EAAE,CAAC;IAEvC,IAAI,CAAC,MAAM,EAAE,CAAC;QACZ,OAAO,IAAI,CAAC;IACd,CAAC;IAED,MAAM,cAAc,GAAG;QACrB,OAAO,EAAE,iBAAiB;QAC1B,SAAS,EAAE,mBAAmB;QAC9B,OAAO,EAAE,iBAAiB;KAC3B,CAAC;IAEF,MAAM,WAAW,GAAG;QAClB,EAAE,EAAE,QAAQ;QACZ,EAAE,EAAE,QAAQ;QACZ,EAAE,EAAE,QAAQ;KACb,CAAC;IAEF,MAAM,gBAAgB,GAAG,KAAK,IAAI,EAAE;QAClC,MAAM,UAAU,CAAC,MAAM,CAAC,CAAC;QACzB,IAAI,YAAY,EAAE,CAAC;YACjB,YAAY,EAAE,CAAC;QACjB,CAAC;IACH,CAAC,CAAC;IAEF,OAAO,CACL,gCACE,OAAO,EAAE,gBAAgB,EACzB,SAAS,EAAE,GAAG,cAAc,CAAC,OAAO,CAAC,IAAI,WAAW,CAAC,IAAI,CAAC,IAAI,SAAS,EAAE,IAExE,KAAK,CACC,CACV,CAAC;AACJ,CAAC"}

package/dist/web3/WalletBalance/WalletBalance.d.ts

@@ -0,0 +1,27 @@
+export interface WalletBalanceProps {
+    showSymbol?: boolean;
+    decimals?: number;
+    className?: string;
+    loadingText?: string;
+}
+/**
+ * Wallet Balance Display Component
+ *
+ * Displays wallet USDC balance with automatic formatting (6 decimals)
+ *
+ * @example
+ * ```tsx
+ * import { WalletBalance } from '@varity-labs/ui-kit';
+ *
+ * function Balance() {
+ *   return (
+ *     <WalletBalance
+ *       showSymbol
+ *       decimals={2}
+ *     />
+ *   );
+ * }
+ * ```
+ */
+export declare function WalletBalance({ showSymbol, decimals, className, loadingText, }: WalletBalanceProps): JSX.Element | null;
+//# sourceMappingURL=WalletBalance.d.ts.map

package/dist/web3/WalletBalance/WalletBalance.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"WalletBalance.d.ts","sourceRoot":"","sources":["../../../src/web3/WalletBalance/WalletBalance.tsx"],"names":[],"mappings":"AAKA,MAAM,WAAW,kBAAkB;IACjC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,aAAa,CAAC,EAC5B,UAAiB,EACjB,QAAY,EACZ,SAAc,EACd,WAA0B,GAC3B,EAAE,kBAAkB,GAAG,GAAG,CAAC,OAAO,GAAG,IAAI,CA6CzC"}

package/dist/web3/WalletBalance/WalletBalance.js

@@ -0,0 +1,49 @@
+import React from 'react';
+import { useActiveAccount, useWalletBalance } from 'thirdweb/react';
+import { createThirdwebClient } from 'thirdweb';
+import { THIRDWEB_CLIENT_ID, DEFAULT_CHAIN, formatUSDC } from '../../config/chains';
+/**
+ * Wallet Balance Display Component
+ *
+ * Displays wallet USDC balance with automatic formatting (6 decimals)
+ *
+ * @example
+ * ```tsx
+ * import { WalletBalance } from '@varity-labs/ui-kit';
+ *
+ * function Balance() {
+ *   return (
+ *     <WalletBalance
+ *       showSymbol
+ *       decimals={2}
+ *     />
+ *   );
+ * }
+ * ```
+ */
+export function WalletBalance({ showSymbol = true, decimals = 2, className = '', loadingText = 'Loading...', }) {
+    const account = useActiveAccount();
+    const client = React.useMemo(() => createThirdwebClient({ clientId: THIRDWEB_CLIENT_ID }), []);
+    const { data: balance, isLoading, error } = useWalletBalance({
+        client,
+        chain: DEFAULT_CHAIN,
+        address: account?.address,
+    });
+    if (!account) {
+        return null;
+    }
+    if (isLoading) {
+        return (React.createElement("div", { className: `flex items-center gap-2 ${className}` },
+            React.createElement("div", { className: "animate-spin rounded-full h-4 w-4 border-b-2 border-varity-primary" }),
+            React.createElement("span", { className: "text-sm text-gray-500" }, loadingText)));
+    }
+    if (error) {
+        return (React.createElement("div", { className: `text-sm text-red-500 ${className}` }, "Error loading balance"));
+    }
+    const balanceValue = balance?.value || BigInt(0);
+    const formattedBalance = formatUSDC(balanceValue, decimals);
+    return (React.createElement("div", { className: `flex items-center gap-1 ${className}` },
+        React.createElement("span", { className: "text-lg font-semibold" }, formattedBalance),
+        showSymbol && (React.createElement("span", { className: "text-sm text-gray-600 dark:text-gray-400" }, "USDC"))));
+}
+//# sourceMappingURL=WalletBalance.js.map

package/dist/web3/WalletBalance/WalletBalance.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"WalletBalance.js","sourceRoot":"","sources":["../../../src/web3/WalletBalance/WalletBalance.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AACpE,OAAO,EAAE,oBAAoB,EAAE,MAAM,UAAU,CAAC;AAChD,OAAO,EAAE,kBAAkB,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AASpF;;;;;;;;;;;;;;;;;;GAkBG;AACH,MAAM,UAAU,aAAa,CAAC,EAC5B,UAAU,GAAG,IAAI,EACjB,QAAQ,GAAG,CAAC,EACZ,SAAS,GAAG,EAAE,EACd,WAAW,GAAG,YAAY,GACP;IACnB,MAAM,OAAO,GAAG,gBAAgB,EAAE,CAAC;IACnC,MAAM,MAAM,GAAG,KAAK,CAAC,OAAO,CAC1B,GAAG,EAAE,CAAC,oBAAoB,CAAC,EAAE,QAAQ,EAAE,kBAAkB,EAAE,CAAC,EAC5D,EAAE,CACH,CAAC;IAEF,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,GAAG,gBAAgB,CAAC;QAC3D,MAAM;QACN,KAAK,EAAE,aAAa;QACpB,OAAO,EAAE,OAAO,EAAE,OAAO;KAC1B,CAAC,CAAC;IAEH,IAAI,CAAC,OAAO,EAAE,CAAC;QACb,OAAO,IAAI,CAAC;IACd,CAAC;IAED,IAAI,SAAS,EAAE,CAAC;QACd,OAAO,CACL,6BAAK,SAAS,EAAE,2BAA2B,SAAS,EAAE;YACpD,6BAAK,SAAS,EAAC,oEAAoE,GAAG;YACtF,8BAAM,SAAS,EAAC,uBAAuB,IAAE,WAAW,CAAQ,CACxD,CACP,CAAC;IACJ,CAAC;IAED,IAAI,KAAK,EAAE,CAAC;QACV,OAAO,CACL,6BAAK,SAAS,EAAE,wBAAwB,SAAS,EAAE,4BAE7C,CACP,CAAC;IACJ,CAAC;IAED,MAAM,YAAY,GAAG,OAAO,EAAE,KAAK,IAAI,MAAM,CAAC,CAAC,CAAC,CAAC;IACjD,MAAM,gBAAgB,GAAG,UAAU,CAAC,YAAY,EAAE,QAAQ,CAAC,CAAC;IAE5D,OAAO,CACL,6BAAK,SAAS,EAAE,2BAA2B,SAAS,EAAE;QACpD,8BAAM,SAAS,EAAC,uBAAuB,IAAE,gBAAgB,CAAQ;QAChE,UAAU,IAAI,CACb,8BAAM,SAAS,EAAC,0CAA0C,WAAY,CACvE,CACG,CACP,CAAC;AACJ,CAAC"}

package/dist/web3/WalletDropdown/WalletDropdown.d.ts

@@ -0,0 +1,29 @@
+export interface WalletDropdownProps {
+    onDisconnect?: () => void;
+    className?: string;
+}
+/**
+ * Wallet Dropdown Menu Component
+ *
+ * Displays a dropdown menu with wallet information and actions:
+ * - Address
+ * - Balance
+ * - Copy address
+ * - View on explorer
+ * - Disconnect
+ *
+ * @example
+ * ```tsx
+ * import { WalletDropdown } from '@varity-labs/ui-kit';
+ *
+ * function Header() {
+ *   return (
+ *     <WalletDropdown
+ *       onDisconnect={() => console.log('Disconnected')}
+ *     />
+ *   );
+ * }
+ * ```
+ */
+export declare function WalletDropdown({ onDisconnect, className, }: WalletDropdownProps): JSX.Element | null;
+//# sourceMappingURL=WalletDropdown.d.ts.map

package/dist/web3/WalletDropdown/WalletDropdown.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"WalletDropdown.d.ts","sourceRoot":"","sources":["../../../src/web3/WalletDropdown/WalletDropdown.tsx"],"names":[],"mappings":"AAKA,MAAM,WAAW,mBAAmB;IAClC,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,wBAAgB,cAAc,CAAC,EAC7B,YAAY,EACZ,SAAc,GACf,EAAE,mBAAmB,GAAG,GAAG,CAAC,OAAO,GAAG,IAAI,CAgH1C"}