@silentswap/ui-kit 0.0.42 → 0.0.44

package/dist/components/sidebar.js

@@ -0,0 +1,222 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { Slot } from '@radix-ui/react-slot';
+import { cva } from 'class-variance-authority';
+import { PanelLeft } from 'lucide-react';
+import { cn } from '../utils';
+import { useIsMobile } from '../hooks/use-mobile';
+import { Button } from './button';
+import { Input } from './input';
+import { Separator } from './separator';
+import { Sheet, SheetContent } from './sheet';
+import { Skeleton } from './skeleton';
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from './tooltip';
+const SIDEBAR_COOKIE_NAME = 'sidebar:state';
+const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
+const SIDEBAR_WIDTH = '16rem';
+const SIDEBAR_WIDTH_MOBILE = '18rem';
+const SIDEBAR_WIDTH_ICON = '3rem';
+const SIDEBAR_KEYBOARD_SHORTCUT = 'b';
+const SidebarContext = React.createContext(null);
+function useSidebar() {
+    const context = React.useContext(SidebarContext);
+    if (!context) {
+        throw new Error('useSidebar must be used within a SidebarProvider.');
+    }
+    return context;
+}
+const SidebarProvider = React.forwardRef(({ defaultOpen = true, open: openProp, onOpenChange: setOpenProp, className, style, children, ...props }, ref) => {
+    const isMobile = useIsMobile();
+    const [openMobile, setOpenMobile] = React.useState(false);
+    // This is the internal state of the sidebar.
+    // We use openProp and setOpenProp for control from outside the component.
+    const [_open, _setOpen] = React.useState(defaultOpen);
+    const open = openProp ?? _open;
+    const setOpen = React.useCallback((value) => {
+        const openState = typeof value === 'function' ? value(open) : value;
+        if (setOpenProp) {
+            setOpenProp(openState);
+        }
+        else {
+            _setOpen(openState);
+        }
+        // This sets the cookie to keep the sidebar state.
+        document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;
+    }, [setOpenProp, open]);
+    // Helper to toggle the sidebar.
+    const toggleSidebar = React.useCallback(() => {
+        return isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open);
+    }, [isMobile, setOpen, setOpenMobile]);
+    // Adds a keyboard shortcut to toggle the sidebar.
+    React.useEffect(() => {
+        const handleKeyDown = (event) => {
+            if (event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {
+                event.preventDefault();
+                toggleSidebar();
+            }
+        };
+        window.addEventListener('keydown', handleKeyDown);
+        return () => window.removeEventListener('keydown', handleKeyDown);
+    }, [toggleSidebar]);
+    // We add a state so that we can do data-state="expanded" or "collapsed".
+    // This makes it easier to style the sidebar with Tailwind classes.
+    const state = open ? 'expanded' : 'collapsed';
+    const contextValue = React.useMemo(() => ({
+        state,
+        open,
+        setOpen,
+        isMobile,
+        openMobile,
+        setOpenMobile,
+        toggleSidebar,
+    }), [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar]);
+    return (_jsx(SidebarContext.Provider, { value: contextValue, children: _jsx(TooltipProvider, { delayDuration: 0, children: _jsx("div", { style: {
+                    '--sidebar-width': SIDEBAR_WIDTH,
+                    '--sidebar-width-icon': SIDEBAR_WIDTH_ICON,
+                    ...style,
+                }, className: cn('group/sidebar-wrapper flex min-h-svh w-full has-[[data-variant=inset]]:bg-sidebar', state === 'expanded' ? 'z-200' : '', className), ref: ref, ...props, children: children }) }) }));
+});
+SidebarProvider.displayName = 'SidebarProvider';
+const Sidebar = React.forwardRef(({ side = 'left', variant = 'sidebar', collapsible = 'offcanvas', className, children, ...props }, ref) => {
+    const { isMobile, state, openMobile, setOpenMobile } = useSidebar();
+    if (collapsible === 'none') {
+        return (_jsx("div", { className: cn('flex h-full w-[--sidebar-width] flex-col bg-sidebar text-sidebar-foreground', className), ref: ref, ...props, children: children }));
+    }
+    if (isMobile) {
+        return (_jsx(Sheet, { open: openMobile, onOpenChange: setOpenMobile, ...props, children: _jsx(SheetContent, { "data-sidebar": "sidebar", "data-mobile": "true", className: "w-[--sidebar-width] bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden", style: {
+                    '--sidebar-width': SIDEBAR_WIDTH_MOBILE,
+                }, side: side, children: _jsx("div", { className: "flex h-full w-full flex-col", children: children }) }) }));
+    }
+    return (_jsxs("div", { ref: ref, className: "group peer hidden text-sidebar-foreground md:block", "data-state": state, "data-collapsible": state === 'collapsed' ? collapsible : '', "data-variant": variant, "data-side": side, children: [_jsx("div", { className: cn('relative h-svh w-[--sidebar-width] bg-transparent transition-[width] duration-200 ease-linear', 'group-data-[collapsible=offcanvas]:w-0', 'group-data-[side=right]:rotate-180', variant === 'floating' || variant === 'inset'
+                    ? 'group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4))]'
+                    : 'group-data-[collapsible=icon]:w-[--sidebar-width-icon]') }), _jsx("div", { className: cn('fixed inset-y-0 z-10 hidden h-svh w-[--sidebar-width] transition-[left,right,width] duration-200 ease-linear md:flex', side === 'left'
+                    ? 'left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]'
+                    : 'right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]', 
+                // Adjust the padding for floating and inset variants.
+                variant === 'floating' || variant === 'inset'
+                    ? 'group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4)_+2px)]'
+                    : 'group-data-[collapsible=icon]:w-[--sidebar-width-icon] group-data-[side=left]:border-r group-data-[side=right]:border-l border-white/20', className), ...props, children: _jsx("div", { "data-sidebar": "sidebar", className: "flex h-full modal-bg w-full flex-col group-data-[variant=floating]:rounded-2xl group-data-[variant=floating]:border group-data-[variant=floating]:border-base-stroke group-data-[variant=floating]:shadow", children: children }) })] }));
+});
+Sidebar.displayName = 'Sidebar';
+const SidebarTrigger = React.forwardRef(({ className, onClick, ...props }, ref) => {
+    const { toggleSidebar } = useSidebar();
+    return (_jsxs(Button, { ref: ref, "data-sidebar": "trigger", variant: "ghost", size: "icon", className: cn('h-7 w-7', className), onClick: (event) => {
+            onClick?.(event);
+            toggleSidebar();
+        }, ...props, children: [_jsx(PanelLeft, {}), _jsx("span", { className: "sr-only", children: "Toggle Sidebar" })] }));
+});
+SidebarTrigger.displayName = 'SidebarTrigger';
+const SidebarRail = React.forwardRef(({ className, ...props }, ref) => {
+    const { toggleSidebar } = useSidebar();
+    return (_jsx("button", { ref: ref, "data-sidebar": "rail", "aria-label": "Toggle Sidebar", tabIndex: -1, onClick: toggleSidebar, title: "Toggle Sidebar", className: cn('absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] hover:after:bg-sidebar-border group-data-[side=left]:-right-4 group-data-[side=right]:left-0 sm:flex', '[[data-side=left]_&]:cursor-w-resize [[data-side=right]_&]:cursor-e-resize', '[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize', 'group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full group-data-[collapsible=offcanvas]:hover:bg-sidebar', '[[data-side=left][data-collapsible=offcanvas]_&]:-right-2', '[[data-side=right][data-collapsible=offcanvas]_&]:-left-2', className), ...props }));
+});
+SidebarRail.displayName = 'SidebarRail';
+const SidebarInset = React.forwardRef(({ className, ...props }, ref) => {
+    return (_jsx("main", { ref: ref, className: cn('relative flex min-h-svh flex-1 flex-col bg-background', 'peer-data-[variant=inset]:min-h-[calc(100svh-theme(spacing.4))] md:peer-data-[variant=inset]:m-2 md:peer-data-[state=collapsed]:peer-data-[variant=inset]:ml-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow', className), ...props }));
+});
+SidebarInset.displayName = 'SidebarInset';
+const SidebarInput = React.forwardRef(({ className, ...props }, ref) => {
+    return (_jsx(Input, { ref: ref, "data-sidebar": "input", className: cn('h-8 w-full bg-background shadow-none', className), ...props }));
+});
+SidebarInput.displayName = 'SidebarInput';
+const SidebarHeader = React.forwardRef(({ className, ...props }, ref) => {
+    return _jsx("div", { ref: ref, "data-sidebar": "header", className: cn('flex flex-col gap-2 p-2', className), ...props });
+});
+SidebarHeader.displayName = 'SidebarHeader';
+const SidebarFooter = React.forwardRef(({ className, ...props }, ref) => {
+    return _jsx("div", { ref: ref, "data-sidebar": "footer", className: cn('flex flex-col gap-2 p-2', className), ...props });
+});
+SidebarFooter.displayName = 'SidebarFooter';
+const SidebarSeparator = React.forwardRef(({ className, ...props }, ref) => {
+    return (_jsx(Separator, { ref: ref, "data-sidebar": "separator", className: cn('mx-2 w-auto bg-sidebar-border', className), ...props }));
+});
+SidebarSeparator.displayName = 'SidebarSeparator';
+const SidebarContent = React.forwardRef(({ className, ...props }, ref) => {
+    return (_jsx("div", { ref: ref, "data-sidebar": "content", className: cn('flex h-full flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden', className), ...props }));
+});
+SidebarContent.displayName = 'SidebarContent';
+const SidebarGroup = React.forwardRef(({ className, ...props }, ref) => {
+    return (_jsx("div", { ref: ref, "data-sidebar": "group", className: cn('relative flex w-full min-w-0 flex-col p-2', className), ...props }));
+});
+SidebarGroup.displayName = 'SidebarGroup';
+const SidebarGroupLabel = React.forwardRef(({ className, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : 'div';
+    return (_jsx(Comp, { ref: ref, "data-sidebar": "group-label", className: cn('flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium text-sidebar-foreground/70 outline-none ring-sidebar-ring transition-[margin,opa] duration-200 ease-linear focus-visible:ring-0 [&>svg]:size-4 [&>svg]:shrink-0', 'group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0', className), ...props }));
+});
+SidebarGroupLabel.displayName = 'SidebarGroupLabel';
+const SidebarGroupAction = React.forwardRef(({ className, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : 'button';
+    return (_jsx(Comp, { ref: ref, "data-sidebar": "group-action", className: cn('absolute right-3 top-3.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-0 [&>svg]:size-4 [&>svg]:shrink-0', 
+        // Increases the hit area of the button on mobile.
+        'after:absolute after:-inset-2 after:md:hidden', 'group-data-[collapsible=icon]:hidden', className), ...props }));
+});
+SidebarGroupAction.displayName = 'SidebarGroupAction';
+const SidebarGroupContent = React.forwardRef(({ className, ...props }, ref) => (_jsx("div", { ref: ref, "data-sidebar": "group-content", className: cn('w-full text-sm', className), ...props })));
+SidebarGroupContent.displayName = 'SidebarGroupContent';
+const SidebarMenu = React.forwardRef(({ className, ...props }, ref) => (_jsx("ul", { ref: ref, "data-sidebar": "menu", className: cn('flex w-full min-w-0 flex-col gap-1', className), ...props })));
+SidebarMenu.displayName = 'SidebarMenu';
+const SidebarMenuItem = React.forwardRef(({ className, ...props }, ref) => (_jsx("li", { ref: ref, "data-sidebar": "menu-item", className: cn('group/menu-item relative', className), ...props })));
+SidebarMenuItem.displayName = 'SidebarMenuItem';
+const sidebarMenuButtonVariants = cva('peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-none ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-0 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-[[data-sidebar=menu-action]]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:!size-8 group-data-[collapsible=icon]:!p-2 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0', {
+    variants: {
+        variant: {
+            default: 'hover:bg-sidebar-accent hover:text-sidebar-accent-foreground',
+            outline: 'bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]',
+        },
+        size: {
+            default: 'h-8 text-sm',
+            sm: 'h-7 text-xs',
+            lg: 'h-12 text-sm group-data-[collapsible=icon]:!p-0',
+        },
+    },
+    defaultVariants: {
+        variant: 'default',
+        size: 'default',
+    },
+});
+const SidebarMenuButton = React.forwardRef(({ asChild = false, isActive = false, variant = 'default', size = 'default', tooltip, className, ...props }, ref) => {
+    const Comp = asChild ? Slot : 'button';
+    const { isMobile, state } = useSidebar();
+    const button = (_jsx(Comp, { ref: ref, "data-sidebar": "menu-button", "data-size": size, "data-active": isActive, className: cn(sidebarMenuButtonVariants({ variant, size }), className), ...props }));
+    if (!tooltip) {
+        return button;
+    }
+    if (typeof tooltip === 'string') {
+        tooltip = {
+            children: tooltip,
+        };
+    }
+    return (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: button }), _jsx(TooltipContent, { side: "right", align: "center", hidden: state !== 'collapsed' || isMobile, ...tooltip })] }));
+});
+SidebarMenuButton.displayName = 'SidebarMenuButton';
+const SidebarMenuAction = React.forwardRef(({ className, asChild = false, showOnHover = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : 'button';
+    return (_jsx(Comp, { ref: ref, "data-sidebar": "menu-action", className: cn('absolute right-1 top-1.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-0 peer-hover/menu-button:text-sidebar-accent-foreground [&>svg]:size-4 [&>svg]:shrink-0', 
+        // Increases the hit area of the button on mobile.
+        'after:absolute after:-inset-2 after:md:hidden', 'peer-data-[size=sm]/menu-button:top-1', 'peer-data-[size=default]/menu-button:top-1.5', 'peer-data-[size=lg]/menu-button:top-2.5', 'group-data-[collapsible=icon]:hidden', showOnHover &&
+            'group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 peer-data-[active=true]/menu-button:text-sidebar-accent-foreground md:opacity-0', className), ...props }));
+});
+SidebarMenuAction.displayName = 'SidebarMenuAction';
+const SidebarMenuBadge = React.forwardRef(({ className, ...props }, ref) => (_jsx("div", { ref: ref, "data-sidebar": "menu-badge", className: cn('pointer-events-none absolute right-1 flex h-5 min-w-5 select-none items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums text-sidebar-foreground', 'peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground', 'peer-data-[size=sm]/menu-button:top-1', 'peer-data-[size=default]/menu-button:top-1.5', 'peer-data-[size=lg]/menu-button:top-2.5', 'group-data-[collapsible=icon]:hidden', className), ...props })));
+SidebarMenuBadge.displayName = 'SidebarMenuBadge';
+const SidebarMenuSkeleton = React.forwardRef(({ className, showIcon = false, ...props }, ref) => {
+    // Random width between 50 to 90%.
+    const width = React.useMemo(() => {
+        return `${Math.floor(Math.random() * 40) + 50}%`;
+    }, []);
+    return (_jsxs("div", { ref: ref, "data-sidebar": "menu-skeleton", className: cn('flex h-8 items-center gap-2 rounded-md px-2', className), ...props, children: [showIcon && _jsx(Skeleton, { className: "size-4 rounded-md", "data-sidebar": "menu-skeleton-icon" }), _jsx(Skeleton, { className: "h-4 max-w-[--skeleton-width] flex-1", "data-sidebar": "menu-skeleton-text", style: {
+                    '--skeleton-width': width,
+                } })] }));
+});
+SidebarMenuSkeleton.displayName = 'SidebarMenuSkeleton';
+const SidebarMenuSub = React.forwardRef(({ className, ...props }, ref) => (_jsx("ul", { ref: ref, "data-sidebar": "menu-sub", className: cn('mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l border-sidebar-border px-2.5 py-0.5', 'group-data-[collapsible=icon]:hidden', className), ...props })));
+SidebarMenuSub.displayName = 'SidebarMenuSub';
+const SidebarMenuSubItem = React.forwardRef(({ ...props }, ref) => (_jsx("li", { ref: ref, ...props })));
+SidebarMenuSubItem.displayName = 'SidebarMenuSubItem';
+const SidebarMenuSubButton = React.forwardRef(({ asChild = false, size = 'md', isActive, className, ...props }, ref) => {
+    const Comp = asChild ? Slot : 'a';
+    return (_jsx(Comp, { ref: ref, "data-sidebar": "menu-sub-button", "data-size": size, "data-active": isActive, className: cn('flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 text-sidebar-foreground outline-none ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-0 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground', 'data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground', size === 'sm' && 'text-xs', size === 'md' && 'text-sm', 'group-data-[collapsible=icon]:hidden', className), ...props }));
+});
+SidebarMenuSubButton.displayName = 'SidebarMenuSubButton';
+export { Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, useSidebar, };

package/dist/components/skeleton.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare function Skeleton({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+export { Skeleton };

package/dist/components/skeleton.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import { cn } from '../utils';
+function Skeleton({ className, ...props }) {
+    return _jsx("div", { className: cn('animate-pulse rounded-md', className), ...props });
+}
+export { Skeleton };

package/dist/components/status-card.d.ts

@@ -0,0 +1,23 @@
+import React from 'react';
+interface StatusCardProps {
+    variant?: 'info' | 'warning' | 'error' | 'success';
+    title?: string;
+    message: string;
+    action?: {
+        label: string;
+        onClick: () => void;
+        loading?: boolean;
+        disabled?: boolean;
+    };
+    className?: string;
+}
+export declare const StatusCard: React.FC<StatusCardProps>;
+interface ErrorCardProps {
+    errors: Array<{
+        type: string;
+        message: string;
+    }>;
+    className?: string;
+}
+export declare const ErrorCard: React.FC<ErrorCardProps>;
+export {};

package/dist/components/status-card.js

@@ -0,0 +1,27 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React from 'react';
+import { Card } from './card';
+import { Button } from './button';
+import { AlertCircle, Loader2 } from 'lucide-react';
+import { cn } from '../utils';
+export const StatusCard = ({ variant = 'info', title, message, action, className }) => {
+    const variantStyles = {
+        info: 'border-border-bright/20 bg-dim-med',
+        warning: 'border-yellow/50 bg-yellow/10',
+        error: 'border-red-500/50 bg-red-500/10',
+        success: 'border-green-500/50 bg-green-500/10',
+    };
+    const textStyles = {
+        info: 'text-text-dim',
+        warning: 'text-yellow',
+        error: 'text-red-500',
+        success: 'text-green-500',
+    };
+    return (_jsxs(Card, { className: cn('text-center p-4 mb-4', variantStyles[variant], className), children: [title && (_jsxs("div", { className: cn('mb-2 text-sm font-medium', textStyles[variant]), children: [variant === 'error' && (_jsx(AlertCircle, { className: "w-4 h-4 inline mr-1" })), title] })), _jsx("p", { className: cn('text-sm', textStyles[variant]), children: message }), action && (_jsxs(Button, { variant: variant === 'error' ? 'destructive' : 'default', onClick: action.onClick, disabled: action.disabled || action.loading, className: "mt-4", children: [action.loading && (_jsx(_Fragment, { children: _jsx(Loader2, { className: "w-4 h-4 mr-2 animate-spin" }) })), action.label] }))] }));
+};
+export const ErrorCard = ({ errors, className }) => {
+    if (errors.length === 0)
+        return null;
+    return (_jsx(Card, { className: cn('border-red-500 bg-red-500/10 p-4 mb-4', className), children: errors.map((error, index) => (_jsxs("div", { className: "mb-2 last:mb-0 text-sm text-red-500", children: [_jsxs("strong", { children: [error.type, ":"] }), " ", error.message] }, index))) }));
+};

package/dist/components/textarea.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+declare const Textarea: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, "ref"> & React.RefAttributes<HTMLTextAreaElement>>;
+export { Textarea };

package/dist/components/textarea.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+import { cn } from '../utils';
+const Textarea = React.forwardRef(({ className, ...props }, ref) => {
+    return (_jsx("textarea", { className: cn('flex min-h-[60px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-base shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm', className), ref: ref, ...props }));
+});
+Textarea.displayName = 'Textarea';
+export { Textarea };

package/dist/components/tooltip.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import * as TooltipPrimitive from '@radix-ui/react-tooltip';
+declare const TooltipProvider: React.FC<TooltipPrimitive.TooltipProviderProps>;
+declare const Tooltip: React.FC<TooltipPrimitive.TooltipProps>;
+declare const TooltipTrigger: React.ForwardRefExoticComponent<TooltipPrimitive.TooltipTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+declare const TooltipContent: React.ForwardRefExoticComponent<Omit<TooltipPrimitive.TooltipContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };

package/dist/components/tooltip.js

@@ -0,0 +1,11 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+import * as TooltipPrimitive from '@radix-ui/react-tooltip';
+import { cn } from '../utils';
+const TooltipProvider = TooltipPrimitive.Provider;
+const Tooltip = TooltipPrimitive.Root;
+const TooltipTrigger = TooltipPrimitive.Trigger;
+const TooltipContent = React.forwardRef(({ className, sideOffset = 4, ...props }, ref) => (_jsx(TooltipPrimitive.Portal, { children: _jsx(TooltipPrimitive.Content, { ref: ref, sideOffset: sideOffset, className: cn('z-50 overflow-hidden rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2', className), ...props }) })));
+TooltipContent.displayName = TooltipPrimitive.Content.displayName;
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };

package/dist/components-v2/accordion.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import * as AccordionPrimitive from '@radix-ui/react-accordion';
+declare const Accordion: React.ForwardRefExoticComponent<(AccordionPrimitive.AccordionSingleProps | AccordionPrimitive.AccordionMultipleProps) & React.RefAttributes<HTMLDivElement>>;
+declare const AccordionItem: React.ForwardRefExoticComponent<Omit<AccordionPrimitive.AccordionItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const AccordionTrigger: React.ForwardRefExoticComponent<Omit<AccordionPrimitive.AccordionTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+declare const AccordionContent: React.ForwardRefExoticComponent<Omit<AccordionPrimitive.AccordionContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };

package/dist/components-v2/accordion.js

@@ -0,0 +1,14 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import * as AccordionPrimitive from '@radix-ui/react-accordion';
+import { ChevronDown } from 'lucide-react';
+import { cn } from '../utils';
+const Accordion = AccordionPrimitive.Root;
+const AccordionItem = React.forwardRef(({ className, ...props }, ref) => (_jsx(AccordionPrimitive.Item, { ref: ref, className: cn('border-b', className), ...props })));
+AccordionItem.displayName = 'AccordionItem';
+const AccordionTrigger = React.forwardRef(({ className, children, ...props }, ref) => (_jsx(AccordionPrimitive.Header, { className: "flex", children: _jsxs(AccordionPrimitive.Trigger, { ref: ref, className: cn('flex flex-1 items-center justify-between py-4 text-sm font-medium transition-all hover:underline text-left [&[data-state=open]>svg]:rotate-180', className), ...props, children: [children, _jsx(ChevronDown, { className: "h-4 w-4 shrink-0 text-muted-foreground transition-transform duration-200" })] }) })));
+AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName;
+const AccordionContent = React.forwardRef(({ className, children, ...props }, ref) => (_jsx(AccordionPrimitive.Content, { ref: ref, className: "overflow-hidden text-sm data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down", ...props, children: _jsx("div", { className: cn('pb-4 pt-0', className), children: children }) })));
+AccordionContent.displayName = AccordionPrimitive.Content.displayName;
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };

package/dist/components-v2/add-button.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+interface AddButtonProps {
+    onClick: () => void;
+    label: string;
+    disabled?: boolean;
+    disabledLabel?: string;
+    className?: string;
+}
+export declare const AddButton: React.FC<AddButtonProps>;
+export {};

package/dist/components-v2/add-button.js

@@ -0,0 +1,21 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { cn } from '../utils';
+import { AddIcon } from './icons';
+export const AddButton = ({ onClick, label, disabled = false, disabledLabel, className }) => {
+    return (_jsxs("div", { className: cn(
+        // Layout - matching Figma design
+        'flex items-center justify-center gap-[10px]', 'w-[90vw] max-w-[640px] mx-auto', 'px-[20px] py-[12px] box-border', 'min-h-[42px]', 
+        // Background - matching Figma: bg-secondary (#211f12)
+        'rounded-[12px]', 
+        // Typography - matching Figma: Manrope Medium, 14px, line-height 1.5, yellow
+        'font-medium text-[14px] leading-[1.5]', 
+        // Interaction
+        'transition-all duration-300 z-[2]', disabled ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer hover:opacity-80', 'bg-secondary', 'text-yellow', 'font-manrope', className), onClick: disabled ? undefined : onClick, role: "button", tabIndex: disabled ? -1 : 0, onKeyDown: (e) => {
+            if (!disabled && (e.key === 'Enter' || e.key === ' ')) {
+                e.preventDefault();
+                onClick();
+            }
+        }, children: [_jsx("div", { className: "flex flex-col justify-end leading-[0] shrink-0 pb-[2px]", children: _jsx("p", { className: "leading-[1.5] whitespace-nowrap", children: disabled ? disabledLabel || label : label }) }), !disabled && (_jsx("div", { className: "relative shrink-0 size-[10px]", children: _jsx(AddIcon, {}) }))] }));
+};

package/dist/components-v2/address-selector.d.ts

@@ -0,0 +1,34 @@
+import React from 'react';
+import type { ContactSource as SDKContactSource } from '@silentswap/sdk';
+export interface Contact {
+    id: string;
+    label: string;
+    address: string | (() => Promise<string>);
+    source?: ContactSource;
+    ens?: string;
+    rawAddress?: () => string | undefined;
+    isEvm?: () => boolean;
+    isSolana?: () => boolean;
+    isBip122?: () => boolean;
+    isCosmos?: () => boolean;
+}
+export type ContactSource = SDKContactSource | 'wallet' | 'saved' | 'ens' | 'unknown';
+interface AddressSelectorProps {
+    isOpen: boolean;
+    onClose: () => void;
+    onSelect: (address: string, label?: string) => void;
+    onSaveContact?: (contactInfo: {
+        id: string;
+        label: string;
+        source: ContactSource;
+    }) => void;
+    connectedAddress?: string;
+    title?: string;
+    mode?: 'sender' | 'recipient';
+    contacts?: Contact[];
+    targetAsset?: string;
+    connectedAccounts?: Record<string, Contact>;
+    activeSenderId?: string;
+}
+export declare const AddressSelector: React.FC<AddressSelectorProps>;
+export {};

package/dist/components-v2/address-selector.js

@@ -0,0 +1,57 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React, { useState, useCallback, useEffect } from 'react';
+import { Dialog, DialogContent, DialogTitle } from './dialog';
+import { formatAddress } from '@silentswap/sdk';
+// Hooks
+import { useEnsResolution } from '../../hooks/useEnsResolution';
+import { useAddressSearch } from '../../hooks/useAddressSearch';
+import { useContactSearch } from '../../hooks/useContactSearch';
+// Components
+import { PanelRow } from './PanelRow';
+import { UserTile } from './UserTile';
+import { ContactRow } from './ContactRow';
+import { ContactSourceBadge } from './ContactSourceBadge';
+import { ManualAddressEntry } from './ManualAddressEntry';
+import { EnsResult } from './EnsResult';
+import { BinocularsIcon } from './icons';
+// ============================================================================
+// Main Component
+// ============================================================================
+export const AddressSelector = ({ isOpen, onClose, onSelect, onSaveContact, connectedAddress, title, mode = 'recipient', contacts = [], targetAsset, connectedAccounts = {}, activeSenderId, }) => {
+    // Search state
+    const [search, setSearch] = useState('');
+    const [newLabel, setNewLabel] = useState('');
+    // Hooks
+    const ensState = useEnsResolution(search, mode === 'recipient');
+    const manualAddress = useAddressSearch(search);
+    const filteredContacts = useContactSearch(contacts, search, targetAsset, connectedAccounts);
+    // Dynamic title and placeholder
+    const displayTitle = title || `Select ${mode === 'sender' ? 'Sender' : 'Recipient'} Address`;
+    const placeholder = mode === 'recipient' ? 'Address, ENS, or nickname' : 'Filter by address';
+    // Reset and select handler
+    const resetAndSelect = useCallback((address, label) => {
+        setSearch('');
+        setNewLabel('');
+        onSelect(address, label);
+        onClose();
+    }, [onSelect, onClose]);
+    // Reset state when closing
+    useEffect(() => {
+        if (!isOpen) {
+            setSearch('');
+            setNewLabel('');
+        }
+    }, [isOpen]);
+    // Handle dialog open change
+    const handleOpenChange = useCallback((open) => {
+        if (!open) {
+            onClose();
+        }
+    }, [onClose]);
+    return (_jsx(Dialog, { open: isOpen, onOpenChange: handleOpenChange, children: _jsxs(DialogContent, { className: "text-white rounded-2xl border-[#333] bg-[#141414] w-[95vw] max-w-[580px] max-h-[85vh] p-0 flex flex-col", children: [_jsx(DialogTitle, { asChild: true, children: _jsx("div", { className: "p-4 border-b border-[#333] shrink-0", children: _jsx("div", { className: "flex items-center justify-between text-lg cursor-default", children: _jsx("div", { className: "font-semibold text-white", children: displayTitle }) }) }) }), _jsx("div", { className: "p-4 border-b border-[#333] shrink-0 mt-3", children: _jsx("input", { type: "text", className: "w-full bg-[#1a1a1a] border border-[#333] outline-none rounded-lg px-4 py-3 h-[52px] text-white text-sm box-border focus:ring-1 focus:ring-yellow focus:border-yellow", placeholder: placeholder, value: search, onChange: (e) => setSearch(e.target.value), autoFocus: true }) }), _jsx("div", { className: "flex-1 overflow-y-auto", children: _jsxs("div", { className: "p-4", children: [manualAddress && (_jsx(ManualAddressEntry, { manualAddress: manualAddress, newLabel: newLabel, onLabelChange: setNewLabel, onSave: resetAndSelect, onSaveContact: onSaveContact })), ensState.searching && (_jsx(PanelRow, { left: _jsxs("span", { className: "text-[#888] text-sm", children: ["Searching ENS for ", ensState.searching, "..."] }) })), ensState.resolved && (_jsx(EnsResult, { name: ensState.resolved.name, address: ensState.resolved.address, onSelect: resetAndSelect, onSaveContact: onSaveContact })), connectedAddress && mode === 'recipient' && !manualAddress && (_jsx("div", { className: "mb-4 pb-4 border-b border-[#333]", children: _jsx(PanelRow, { onClick: () => resetAndSelect(connectedAddress), left: _jsxs(_Fragment, { children: [_jsx("div", { style: { zoom: 0.75 }, children: _jsx(UserTile, { address: connectedAddress }) }), _jsxs("div", { className: "flex flex-col", children: [_jsx("span", { className: "text-[14px] font-mono text-white", children: "Connected Wallet" }), _jsx("span", { className: "text-[12px] font-mono text-[#888]", children: formatAddress(connectedAddress, 6) })] })] }), right: _jsx(ContactSourceBadge, { source: "wallet", isActive: true }) }) })), !manualAddress && filteredContacts.length > 0 && (_jsx("div", { className: "flex flex-col", children: filteredContacts.map((contact) => {
+                                    const isActive = activeSenderId === contact.id;
+                                    const isWallet = connectedAccounts[contact.id] !== undefined;
+                                    return (_jsx(ContactRow, { contact: contact, onSelect: resetAndSelect, isActive: isActive, isWallet: isWallet, connectedAccounts: connectedAccounts }, contact.id));
+                                }) })), !manualAddress && !ensState.searching && filteredContacts.length === 0 && search.trim() && (_jsxs("div", { className: "flex flex-col items-center justify-center py-10 px-4 text-center", children: [_jsx("div", { className: "mb-4", children: _jsx(BinocularsIcon, { width: 40, height: 40, className: "text-[#868686]" }) }), _jsx("div", { className: "text-white font-medium text-base mb-1", children: "No results found" }), _jsxs("div", { className: "text-[#868686] text-sm max-w-[240px]", children: ["We couldn't find any contacts or addresses matching \"", search.trim(), "\""] })] })), !manualAddress && !ensState.searching && contacts.length === 0 && !search.trim() && !connectedAddress && (_jsxs("div", { className: "flex flex-col items-center justify-center py-10 px-4 text-center", children: [_jsx("div", { className: "mb-4", children: _jsx(BinocularsIcon, { width: 40, height: 40, className: "text-[#868686]" }) }), _jsx("div", { className: "text-white font-medium text-base mb-1", children: "No contacts yet" }), _jsx("div", { className: "text-[#868686] text-sm", children: "Enter an address or ENS name above" })] }))] }) }), _jsx("div", { className: "p-4 border-t border-[#333] shrink-0", children: _jsx("button", { className: "w-full px-6 py-3 rounded-lg text-base font-medium bg-[#333] text-white hover:bg-[#444] transition-colors border-none", onClick: onClose, children: "Cancel" }) })] }) }));
+};

package/dist/components-v2/alert-dialog.d.ts

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
+declare const AlertDialog: React.FC<AlertDialogPrimitive.AlertDialogProps>;
+declare const AlertDialogTrigger: React.ForwardRefExoticComponent<AlertDialogPrimitive.AlertDialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+declare const AlertDialogPortal: React.FC<AlertDialogPrimitive.AlertDialogPortalProps>;
+declare const AlertDialogOverlay: React.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogOverlayProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const AlertDialogContent: React.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const AlertDialogHeader: {
+    ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+declare const AlertDialogFooter: {
+    ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+declare const AlertDialogTitle: React.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogTitleProps & React.RefAttributes<HTMLHeadingElement>, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
+declare const AlertDialogDescription: React.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogDescriptionProps & React.RefAttributes<HTMLParagraphElement>, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
+declare const AlertDialogAction: React.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogActionProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+declare const AlertDialogCancel: React.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogCancelProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export { AlertDialog, AlertDialogPortal, AlertDialogOverlay, AlertDialogTrigger, AlertDialogContent, AlertDialogHeader, AlertDialogFooter, AlertDialogTitle, AlertDialogDescription, AlertDialogAction, AlertDialogCancel, };

package/dist/components-v2/alert-dialog.js

@@ -0,0 +1,26 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
+import { cn } from '../utils';
+import { buttonVariants } from './button';
+const AlertDialog = AlertDialogPrimitive.Root;
+const AlertDialogTrigger = AlertDialogPrimitive.Trigger;
+const AlertDialogPortal = AlertDialogPrimitive.Portal;
+const AlertDialogOverlay = React.forwardRef(({ className, ...props }, ref) => (_jsx(AlertDialogPrimitive.Overlay, { className: cn('fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0', className), ...props, ref: ref })));
+AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName;
+const AlertDialogContent = React.forwardRef(({ className, ...props }, ref) => (_jsxs(AlertDialogPortal, { children: [_jsx(AlertDialogOverlay, {}), _jsx(AlertDialogPrimitive.Content, { ref: ref, className: cn('fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg', className), ...props })] })));
+AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName;
+const AlertDialogHeader = ({ className, ...props }) => (_jsx("div", { className: cn('flex flex-col space-y-2 text-center sm:text-left', className), ...props }));
+AlertDialogHeader.displayName = 'AlertDialogHeader';
+const AlertDialogFooter = ({ className, ...props }) => (_jsx("div", { className: cn('flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2', className), ...props }));
+AlertDialogFooter.displayName = 'AlertDialogFooter';
+const AlertDialogTitle = React.forwardRef(({ className, ...props }, ref) => (_jsx(AlertDialogPrimitive.Title, { ref: ref, className: cn('text-lg font-semibold', className), ...props })));
+AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName;
+const AlertDialogDescription = React.forwardRef(({ className, ...props }, ref) => (_jsx(AlertDialogPrimitive.Description, { ref: ref, className: cn('text-sm text-muted-foreground', className), ...props })));
+AlertDialogDescription.displayName = AlertDialogPrimitive.Description.displayName;
+const AlertDialogAction = React.forwardRef(({ className, ...props }, ref) => (_jsx(AlertDialogPrimitive.Action, { ref: ref, className: cn(buttonVariants(), className), ...props })));
+AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName;
+const AlertDialogCancel = React.forwardRef(({ className, ...props }, ref) => (_jsx(AlertDialogPrimitive.Cancel, { ref: ref, className: cn(buttonVariants({ variant: 'outline' }), 'mt-2 sm:mt-0', className), ...props })));
+AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName;
+export { AlertDialog, AlertDialogPortal, AlertDialogOverlay, AlertDialogTrigger, AlertDialogContent, AlertDialogHeader, AlertDialogFooter, AlertDialogTitle, AlertDialogDescription, AlertDialogAction, AlertDialogCancel, };

package/dist/components-v2/alert.d.ts

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import { type VariantProps } from 'class-variance-authority';
+declare const Alert: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & VariantProps<(props?: ({
+    variant?: "default" | "destructive" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string> & React.RefAttributes<HTMLDivElement>>;
+declare const AlertTitle: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLHeadingElement> & React.RefAttributes<HTMLParagraphElement>>;
+declare const AlertDescription: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLParagraphElement> & React.RefAttributes<HTMLParagraphElement>>;
+export { Alert, AlertTitle, AlertDescription };

package/dist/components-v2/alert.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+import { cva } from 'class-variance-authority';
+import { cn } from '../utils';
+const alertVariants = cva('relative w-full rounded-lg border px-4 py-3 text-sm [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground [&>svg~*]:pl-7', {
+    variants: {
+        variant: {
+            default: 'bg-background text-foreground',
+            destructive: 'border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive',
+        },
+    },
+    defaultVariants: {
+        variant: 'default',
+    },
+});
+const Alert = React.forwardRef(({ className, variant, ...props }, ref) => (_jsx("div", { ref: ref, role: "alert", className: cn(alertVariants({ variant }), className), ...props })));
+Alert.displayName = 'Alert';
+const AlertTitle = React.forwardRef(({ className, ...props }, ref) => (_jsx("h5", { ref: ref, className: cn('mb-1 font-medium leading-none tracking-tight', className), ...props })));
+AlertTitle.displayName = 'AlertTitle';
+const AlertDescription = React.forwardRef(({ className, ...props }, ref) => (_jsx("div", { ref: ref, className: cn('text-sm [&_p]:leading-relaxed', className), ...props })));
+AlertDescription.displayName = 'AlertDescription';
+export { Alert, AlertTitle, AlertDescription };

package/dist/components-v2/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-v2/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] }));
+};