@deframe-sdk/components 0.1.10 → 0.1.11

package/dist/index.d.ts

@@ -51,27 +51,31 @@ interface WalletOption$1 {
     id: string;
     /** Display name of the wallet */
     name: string;
-    /** Wallet icon - can be an image URL or React component */
-    icon: string | React.ReactNode;
+    /** Wallet icon — image URL or React node */
+    icon: string | React__default.ReactNode;
     /** Click handler for wallet selection */
     onClick?: () => void;
 }
 interface ConnectWalletListProps$1 {
     /** List of wallet options */
     wallets: WalletOption$1[];
-    /** Title text for the wallet connect screen */
+    /** Optional title shown above the list */
     title?: string;
-    /** Subtitle text for the wallet connect screen */
+    /** Optional subtitle shown below the title */
     subtitle?: string;
     /** Additional CSS class names */
     className?: string;
 }
 /**
- * ConnectWalletList - Displays a list of wallet options for connection
- * Includes title, subtitle, and clickable wallet items
+ * ConnectWalletList — headless list of wallet options with optional title and subtitle.
+ * No outer panel/card styling — embed inside your own container or use WalletConnectPanel.
  */
-declare function ConnectWalletList({ wallets, className, }: ConnectWalletListProps$1): react_jsx_runtime.JSX.Element;
+declare function ConnectWalletList({ wallets, title, subtitle, className, }: ConnectWalletListProps$1): react_jsx_runtime.JSX.Element;
 
+/**
+ * WalletItem — individual tappable wallet row.
+ * Rounded-square icon + wallet name + chevron, themed with Hash design tokens.
+ */
 declare function WalletItem({ id, name, icon, onClick, className, }: WalletItemProps): react_jsx_runtime.JSX.Element;
 
 interface WalletListContainerProps$1 {
@@ -81,11 +85,34 @@ interface WalletListContainerProps$1 {
     className?: string;
 }
 /**
- * WalletListContainer - Container wrapper for wallet list items
- * Provides consistent spacing and layout for wallet options
+ * WalletListContainer — vertical flex wrapper with consistent gap between wallet items.
  */
 declare function WalletListContainer({ children, className, }: WalletListContainerProps$1): react_jsx_runtime.JSX.Element;
 
+interface WalletConnectPanelProps {
+    /** List of wallet options to display */
+    wallets: WalletOption$1[];
+    /** Panel title. Defaults to "Conectar Carteira" */
+    title?: string;
+    /** Subtitle below the title. Defaults to the standard connect message */
+    subtitle?: string;
+    /** When provided, a "Sair" button appears in the header and calls this on click */
+    onClose?: () => void;
+    /** Additional CSS class names */
+    className?: string;
+}
+/**
+ * WalletConnectPanel — "Conectar Carteira" macro compound component.
+ *
+ * Self-contained dark panel with:
+ * - Title + optional "Sair" close button
+ * - Muted subtitle
+ * - Vertical list of tappable WalletItem cards
+ *
+ * Themed via Hash design tokens (CSS vars).
+ */
+declare function WalletConnectPanel({ wallets, title, subtitle, onClose, className, }: WalletConnectPanelProps): react_jsx_runtime.JSX.Element;
+
 interface ListItemProps extends ComponentProps<'li'> {
     containerClassName?: string;
     onClick?: () => void;
@@ -212,7 +239,7 @@ interface TextAccentProps extends React$1.HTMLAttributes<HTMLElement> {
     as?: keyof React$1.JSX.IntrinsicElements;
 }
 interface TextBodyProps extends React$1.HTMLAttributes<HTMLElement> {
-    variant?: 'text-large' | 'text-medium' | 'text-small';
+    variant?: '[font-size:var(--deframe-widget-font-size-lg)] [line-height:var(--deframe-widget-font-leading-lg)]' | '[font-size:var(--deframe-widget-font-size-md)] [line-height:var(--deframe-widget-font-leading-md)]' | '[font-size:var(--deframe-widget-font-size-sm)] [line-height:var(--deframe-widget-font-leading-sm)]' | 'text-large' | 'text-medium' | 'text-small';
     as?: keyof React$1.JSX.IntrinsicElements;
 }
 interface TextHeadingProps extends React$1.HTMLAttributes<HTMLElement> {
@@ -304,10 +331,29 @@ interface SkeletonProps extends React$1.HTMLAttributes<HTMLDivElement> {
 }
 declare const Skeleton: React$1.FC<SkeletonProps>;
 
-declare function BannerNotification({ type, variant, title, message, position, autoHideDuration, show, onClose, showIcon, icon, className, ...props }: BannerNotificationProps): react_jsx_runtime.JSX.Element | null;
-declare namespace BannerNotification {
-    var displayName: string;
+interface BannerNotificationProps$1 extends React$1.HTMLAttributes<HTMLDivElement> {
+    /** Type of notification - inline (default) or toast */
+    type?: 'inline' | 'toast';
+    /** Variant type that determines colors and icon */
+    variant?: 'info' | 'warning' | 'error' | 'success';
+    /** The title of the banner */
+    title?: string;
+    /** The message to display in the banner */
+    message: string;
+    /** Position for toast notifications */
+    position?: 'top-right' | 'top-left' | 'top-center' | 'bottom-right' | 'bottom-left' | 'bottom-center';
+    /** Auto hide duration in milliseconds (default: 5000, set to 0 to disable) */
+    autoHideDuration?: number;
+    /** Control visibility for toast notifications */
+    show?: boolean;
+    /** Callback when notification is closed */
+    onClose?: () => void;
+    /** Whether to show the icon (default: true) */
+    showIcon?: boolean;
+    /** Custom icon to display */
+    icon?: React$1.ReactNode;
 }
+declare const BannerNotification: React$1.FC<BannerNotificationProps$1>;
 
 interface BannerNotificationProps extends ComponentProps<'div'> {
     type?: 'inline' | 'toast';
@@ -423,108 +469,677 @@ interface ActionSheetProps {
  *
  * @example
  * <ActionSheet
- *   id="token-selector"
- *   currentActionSheetId={currentId}
- *   isOpen={isOpen}
- *   height="full"
- *   onClose={handleClose}
+ * id="token-selector"
+ * currentActionSheetId={currentId}
+ * isOpen={isOpen}
+ * height="full"
+ * onClose={handleClose}
  * >
- *   <div className="flex flex-col h-full bg-black p-6">
- *     <h2>Select Token</h2>
- *     <Input placeholder="Search here..." />
- *     <ListItem>...</ListItem>
- *   </div>
+ * <div className="flex flex-col h-full bg-[var(--deframe-widget-color-bg-primary)] px-[var(--deframe-widget-size-padding-x-lg)] py-[var(--deframe-widget-size-padding-y-lg)]">
+ * <h2>Select Token</h2>
+ * <Input placeholder="Search here..." />
+ * <ListItem>...</ListItem>
+ * </div>
  * </ActionSheet>
  */
 declare const ActionSheet: React$1.FC<ActionSheetProps>;
 
+interface DeframeComponentsProviderProps {
+    /** Optional extra className applied to the `.deframe-widget` root */
+    className?: string;
+    /** Child components */
+    children: React.ReactNode;
+}
+declare function DeframeComponentsProvider({ className, children }: DeframeComponentsProviderProps): react_jsx_runtime.JSX.Element;
+
+type StatCardValueTone = 'default' | 'positive' | 'negative' | 'warning' | 'brand';
+type StatCardTrendDirection = 'up' | 'down' | 'neutral';
+interface StatCardProps extends ComponentProps<'article'> {
+}
+interface StatCardHeaderProps extends ComponentProps<'div'> {
+}
+interface StatCardLabelProps extends ComponentProps<'p'> {
+}
+interface StatCardValueProps extends ComponentProps<'p'> {
+    /** Controls the text colour of the value */
+    tone?: StatCardValueTone;
+    /** Adjusts the font-size scale */
+    size?: 'sm' | 'md' | 'lg';
+}
+interface StatCardDescriptionProps extends ComponentProps<'p'> {
+}
+interface StatCardTrendProps extends ComponentProps<'span'> {
+    /** Arrow direction to display */
+    direction: StatCardTrendDirection;
+    /** Formatted trend string, e.g. "+12.5% (24h)" */
+    value: string;
+}
+interface StatCardBadgeProps extends ComponentProps<'span'> {
+    tone?: 'default' | 'positive' | 'negative' | 'warning' | 'brand';
+}
+interface StatCardDividerProps extends ComponentProps<'hr'> {
+}
+interface StatCardRowProps extends ComponentProps<'div'> {
+}
+interface StatCardIconProps extends ComponentProps<'div'> {
+}
 /**
- * Theme color configuration for Deframe components
+ * Root container for a stat/metric card.
+ *
+ * Compose with sub-components:
+ * ```tsx
+ * <StatCard>
+ * <StatCardHeader>
+ * <StatCardLabel>TOTAL DA CARTEIRA</StatCardLabel>
+ * <StatCardBadge tone="positive">LIVE</StatCardBadge>
+ * </StatCardHeader>
+ * <StatCardValue tone="positive">$714,100.00</StatCardValue>
+ * <StatCardTrend direction="up" value="+12.5% (24h)" />
+ * <StatCardDescription>Soma do saldo por token (em USD).</StatCardDescription>
+ * </StatCard>
+ * ```
  */
-interface DeframeThemeColors {
-    /** Primary brand color - used for buttons, links, accents */
-    brandPrimary?: string;
-    /** Secondary brand color - used for secondary accents */
-    brandSecondary?: string;
-    /** Main background color */
-    bgDefault?: string;
-    /** Subtle background color */
-    bgSubtle?: string;
-    /** Muted/disabled background color */
-    bgMuted?: string;
-    /** Primary text color */
-    textPrimary?: string;
-    /** Secondary text color */
-    textSecondary?: string;
-    /** Disabled text color */
-    textDisabled?: string;
-    /** Text color for dark backgrounds */
-    textInverse?: string;
-    /** Success state color */
-    stateSuccess?: string;
-    /** Error state color */
-    stateError?: string;
-    /** Warning state color */
-    stateWarning?: string;
+declare function StatCard({ className, ...props }: StatCardProps): react_jsx_runtime.JSX.Element;
+/**
+ * Flex row for placing a label and a badge/icon side-by-side.
+ */
+declare function StatCardHeader({ className, ...props }: StatCardHeaderProps): react_jsx_runtime.JSX.Element;
+/**
+ * Small uppercase muted label — e.g. "TOTAL DA CARTEIRA (USD)".
+ */
+declare function StatCardLabel({ className, ...props }: StatCardLabelProps): react_jsx_runtime.JSX.Element;
+/**
+ * Primary value display — supports size and tone variants.
+ *
+ * | tone | colour |
+ * |------------|---------------------------|
+ * | `default` | `--deframe-widget-color-text-primary` |
+ * | `positive` | `--deframe-widget-color-brand-primary` |
+ * | `negative` | `--deframe-widget-color-state-error` |
+ * | `warning` | `--deframe-widget-color-state-warning` |
+ * | `brand` | `--deframe-widget-color-brand-secondary` |
+ */
+declare function StatCardValue({ tone, size, className, ...props }: StatCardValueProps): react_jsx_runtime.JSX.Element;
+/**
+ * Secondary small text — subtitle, footnote, or help text.
+ */
+declare function StatCardDescription({ className, ...props }: StatCardDescriptionProps): react_jsx_runtime.JSX.Element;
+/**
+ * Inline trend indicator with a directional arrow.
+ *
+ * ```tsx
+ * <StatCardTrend direction="up" value="+12.5% (24h)" />
+ * <StatCardTrend direction="down" value="-3.2% (7d)" />
+ * ```
+ */
+declare function StatCardTrend({ direction, value, className, ...props }: StatCardTrendProps): react_jsx_runtime.JSX.Element;
+/**
+ * Small pill badge — use for status labels like "LIVE", "NEW", "ATIVO".
+ *
+ * | tone | style |
+ * |------------|-------------------------------------------|
+ * | `default` | subtle border + muted text |
+ * | `positive` | green dim bg + brand border + green text |
+ * | `negative` | red dim bg + red border + red text |
+ * | `warning` | amber dim bg + amber border + amber text |
+ * | `brand` | brand tint bg + brand border + brand text |
+ */
+declare function StatCardBadge({ tone, className, ...props }: StatCardBadgeProps): react_jsx_runtime.JSX.Element;
+/**
+ * Horizontal rule separator between card sections.
+ */
+declare function StatCardDivider({ className, ...props }: StatCardDividerProps): react_jsx_runtime.JSX.Element;
+/**
+ * Flex row for displaying a key-value pair side by side.
+ * Useful for transaction detail lines inside a card.
+ *
+ * ```tsx
+ * <StatCardRow>
+ * <StatCardDescription>Taxa de rede</StatCardDescription>
+ * <StatCardDescription>~$0.50</StatCardDescription>
+ * </StatCardRow>
+ * ```
+ */
+declare function StatCardRow({ className, ...props }: StatCardRowProps): react_jsx_runtime.JSX.Element;
+/**
+ * Square icon container with brand-dim background.
+ * Pass any SVG or icon element as children.
+ *
+ * ```tsx
+ * <StatCardIcon aria-label="Portfolio">
+ * <svg>...</svg>
+ * </StatCardIcon>
+ * ```
+ */
+declare function StatCardIcon({ className, ...props }: StatCardIconProps): react_jsx_runtime.JSX.Element;
+
+interface SegmentOption<V extends string = string> {
+    value: V;
+    label: string;
+    icon?: React$1.ReactNode;
+}
+interface SegmentedControlProps<V extends string = string> {
+    options: SegmentOption<V>[];
+    value: V;
+    onChange: (value: V) => void;
+    variant?: 'outlined' | 'ghost';
+    size?: 'sm' | 'md';
+    fullWidth?: boolean;
+}
+declare function SegmentedControl<V extends string = string>({ options, value, onChange, variant, size, fullWidth, }: SegmentedControlProps<V>): react_jsx_runtime.JSX.Element;
+
+interface IconCircleProps {
+    item: {
+        name: string;
+        color: string;
+        iconUrl?: string;
+    };
+    size?: number;
+    className?: string;
 }
 /**
- * Complete theme configuration for Deframe components
+ * Renders a circular icon — uses `iconUrl` if available, falls back to
+ * a colored circle with the first 2 letters of `name`.
  */
-interface DeframeTheme {
-    colors?: DeframeThemeColors;
+declare function IconCircle({ item, size, className }: IconCircleProps): react_jsx_runtime.JSX.Element;
+
+interface CloseButtonProps extends React$1.ComponentProps<'button'> {
+    onClick: () => void;
+    testId?: string;
+}
+/** Icon-only × button — used in the modal/sheet header. */
+declare function CloseButton({ onClick, className, testId, ...rest }: CloseButtonProps): react_jsx_runtime.JSX.Element;
+
+interface Asset {
+    id: string;
+    symbol: string;
+    name: string;
+    color: string;
+    iconUrl?: string;
+    balance?: string;
+    balanceUsd?: string;
+    category: 'crypto' | 'stock';
+    tags?: string[];
+}
+interface Chain {
+    id: string;
+    name: string;
+    color: string;
+    iconUrl?: string;
+    balanceUsd?: string;
+}
+/** A pill item in the FilterGroupBar — drives semantic asset filtering. */
+interface FilterGroupItem {
+    id: string;
+    label: string;
+}
+interface BlockchainAssetSelectorProps {
+    chains: Chain[];
+    assets: Record<string, Asset[]>;
+    onSelect: (chain: Chain, asset: Asset) => void;
+    onClose: () => void;
+    /** @deprecated No longer drives chain selection UI; kept for backward compatibility. */
+    defaultChain?: string;
+    defaultTab?: 'crypto' | 'stock';
+    /** Filter group pills shown above the asset list. Defaults to [All, Most Used, Stablecoins]. */
+    filterGroups?: FilterGroupItem[];
+}
+
+interface ChainRowProps {
+    chain: Chain;
+    selected: boolean;
+    onClick: () => void;
+    onKeyDown: (e: React$1.KeyboardEvent) => void;
+    index: number;
+}
+/** Desktop sidebar row — shows chain icon, name, and optional balance. */
+declare function ChainRow({ chain, selected, onClick, onKeyDown, index }: ChainRowProps): react_jsx_runtime.JSX.Element;
+
+interface ChainChipProps {
+    chain: Chain;
+    selected: boolean;
+    onClick: () => void;
+}
+/** Mobile horizontal scrollable chain chip. */
+declare function ChainChip({ chain, selected, onClick }: ChainChipProps): react_jsx_runtime.JSX.Element;
+
+interface AssetRowProps {
+    asset: Asset;
+    /** Highlight as the top/default selection */
+    first: boolean;
+    onClick: () => void;
+    onKeyDown: (e: React$1.KeyboardEvent) => void;
+    index: number;
+    /** Optional chain attribution shown below asset name (e.g. "via Solana") */
+    chainName?: string;
+    /** Dot colour for chain attribution — data-driven, kept as style */
+    chainColor?: string;
+}
+/** Single row in the asset list — icon, name, symbol, optional balance, and optional chain attribution. */
+declare function AssetRow({ asset, first, onClick, onKeyDown, index, chainName, chainColor }: AssetRowProps): react_jsx_runtime.JSX.Element;
+
+interface FilterGroupBarProps {
+    groups: FilterGroupItem[];
+    /** `id` of the currently active group */
+    selected: string;
+    onSelect: (id: string) => void;
+}
+/**
+ * Horizontal scrollable row of text-only filter pills.
+ *
+ * Replaces the chain chip selector in BlockchainAssetSelector — lets the user
+ * filter assets by semantic category (All, Most Used, Stablecoins, …) rather
+ * than by blockchain network.
+ */
+declare function FilterGroupBar({ groups, selected, onSelect }: FilterGroupBarProps): react_jsx_runtime.JSX.Element;
+
+declare function BlockchainAssetSelector({ chains, assets, onSelect, onClose, defaultChain, defaultTab, filterGroups, }: BlockchainAssetSelectorProps): react_jsx_runtime.JSX.Element;
+
+type AssetTrendDirection = 'up' | 'down' | 'neutral';
+interface AssetFilterOption {
+    id: string;
+    label: string;
+}
+interface AssetListProps extends React$1.ComponentProps<'div'> {
+}
+interface AssetListHeaderProps extends React$1.ComponentProps<'div'> {
+    /** Optional right-side action slot (e.g. icon button) */
+    action?: React$1.ReactNode;
+}
+interface AssetListFilterProps {
+    /** Filter options — e.g. [{ id: 'all', label: 'Todos' }, ...] */
+    filters: AssetFilterOption[];
+    /** Currently selected filter id */
+    selected: string;
+    /** Called when a filter pill is clicked */
+    onSelect: (id: string) => void;
+    className?: string;
+}
+interface AssetListColumnsProps extends React$1.ComponentProps<'div'> {
+    /** Override the three column labels. Defaults to ['ATIVO', 'TENDÊNCIA', 'SALDO'] */
+    labels?: [string, string, string];
+}
+interface AssetTrendBadgeProps extends React$1.ComponentProps<'span'> {
+    direction: AssetTrendDirection;
+    /** Formatted value shown on the badge, e.g. "+18.2%" */
+    value: string;
+}
+interface AssetListItemProps extends React$1.ComponentProps<'div'> {
+    /** Icon info for the asset */
+    asset: {
+        name: string;
+        color: string;
+        iconUrl?: string;
+    };
+    /** Asset display name, e.g. "Bitcoin" */
+    name: string;
+    /** Ticker symbol, e.g. "BTC" */
+    symbol: string;
+    /** Trend direction */
+    trendDirection: AssetTrendDirection;
+    /** Formatted trend value, e.g. "+18.2%" */
+    trendValue: string;
+    /** Formatted balance with symbol, e.g. "0.03 BTC" */
+    balance: string;
+    /** Formatted USD balance, e.g. "$2,145.00" */
+    balanceUsd: string;
 }
 /**
- * Theme mode - controls light/dark appearance
+ * Root container for the "Seus ativos" panel.
+ *
+ * Compose with sub-components:
+ * ```tsx
+ * <AssetList>
+ * <AssetListHeader action={<HistoryButton />}>Seus ativos</AssetListHeader>
+ * <AssetListFilter filters={FILTERS} selected={tab} onSelect={setTab} />
+ * <AssetListColumns />
+ * <AssetListItem asset={btc} name="Bitcoin" symbol="BTC" ... />
+ * </AssetList>
+ * ```
+ */
+declare function AssetList({ className, ...props }: AssetListProps): react_jsx_runtime.JSX.Element;
+/**
+ * Panel header — renders a title and an optional action slot on the right.
+ */
+declare function AssetListHeader({ action, children, className, ...props }: AssetListHeaderProps): react_jsx_runtime.JSX.Element;
+/**
+ * Horizontal scrollable pill filter — e.g. "Todos | Criptomoedas | Ações".
+ *
+ * Active pill uses brand-dim background and border; inactive is transparent.
+ */
+declare function AssetListFilter({ filters, selected, onSelect, className }: AssetListFilterProps): react_jsx_runtime.JSX.Element;
+/**
+ * Column header row for the asset table.
+ * Default labels: ATIVO | TENDÊNCIA | SALDO
  */
-type ThemeMode = 'light' | 'dark' | 'auto';
+declare function AssetListColumns({ labels, className, ...props }: AssetListColumnsProps): react_jsx_runtime.JSX.Element;
 /**
- * Theme preset - predefined color schemes
+ * Compact trend badge pill with directional arrow.
+ *
+ * | direction | style |
+ * |-----------|-----------------|
+ * | `up` | green bg + text |
+ * | `down` | red bg + text |
+ * | `neutral` | muted bg + text |
  */
-type ThemePreset = 'default' | 'cryptocontrol';
+declare function AssetTrendBadge({ direction, value, className, ...props }: AssetTrendBadgeProps): react_jsx_runtime.JSX.Element;
 /**
- * Structured theme configuration with mode, preset, and overrides
+ * Single asset row — icon + name/symbol | trend badge | balance.
+ *
+ * Uses a three-column grid matching `AssetListColumns` layout.
  */
-interface DeframeThemeConfig {
-    /** Theme mode: 'light', 'dark', or 'auto' (follows system preference) */
-    mode?: ThemeMode;
-    /** Theme preset: 'default' or 'cryptocontrol' */
-    preset?: ThemePreset;
-    /** Custom color overrides for each mode */
-    overrides?: {
-        light?: DeframeTheme;
-        dark?: DeframeTheme;
+declare function AssetListItem({ asset, name, symbol, trendDirection, trendValue, balance, balanceUsd, className, ...props }: AssetListItemProps): react_jsx_runtime.JSX.Element;
+
+type StrategyRisk = 'low' | 'medium' | 'high';
+interface StrategyListProps extends React$1.ComponentProps<'div'> {
+}
+interface StrategyListHeaderProps extends React$1.ComponentProps<'div'> {
+    /** Optional back-navigation handler — renders a back chevron button */
+    onBack?: () => void;
+    /** Subtitle shown below the main title */
+    subtitle?: string;
+}
+interface StrategyRiskBadgeProps extends React$1.ComponentProps<'span'> {
+    risk: StrategyRisk;
+    /** Override the default label for this risk level */
+    label?: string;
+}
+interface StrategyListItemProps extends React$1.ComponentProps<'div'> {
+    /** Strategy icon info passed to IconCircle */
+    strategy: {
+        name: string;
+        color: string;
+        iconUrl?: string;
     };
+    /** Strategy display name, e.g. "Caixinha Dólar" */
+    name: string;
+    /** Network or sub-label, e.g. "Ethereum" */
+    network?: string;
+    /** Formatted yield value, e.g. "6.3%" */
+    rendimento: string;
+    /** Risk level shown as a badge */
+    risk?: StrategyRisk;
+    /** Called when the "Investir" button is clicked */
+    onInvestir?: () => void;
+    /** Called when the "Sacar" button is clicked */
+    onSacar?: () => void;
+    /** Whether to show the "Sacar" button (default: true) */
+    showSacar?: boolean;
 }
 /**
- * Default theme values - these serve as fallbacks when no custom theme is provided
+ * Root container for the "Caixinhas" strategy list.
+ *
+ * Compose with sub-components:
+ * ```tsx
+ * <StrategyList>
+ * <StrategyListHeader subtitle="Escolha onde investir" onBack={handleBack}>
+ * Caixinhas
+ * </StrategyListHeader>
+ * <StrategyListItem
+ * strategy={dollarIcon}
+ * name="Caixinha Dólar"
+ * network="Ethereum"
+ * rendimento="6.3%"
+ * risk="low"
+ * onInvestir={handleInvestir}
+ * />
+ * </StrategyList>
+ * ```
  */
-declare const defaultThemeColors: Required<DeframeThemeColors>;
+declare function StrategyList({ className, ...props }: StrategyListProps): react_jsx_runtime.JSX.Element;
 /**
- * Dark mode theme values
+ * Header section — title, optional subtitle, and optional back-chevron button.
  */
-declare const darkThemeColors: Required<DeframeThemeColors>;
+declare function StrategyListHeader({ onBack, subtitle, children, className, ...props }: StrategyListHeaderProps): react_jsx_runtime.JSX.Element;
 /**
- * Cryptocontrol theme values
+ * Risk level badge pill.
+ *
+ * | risk | colour |
+ * |----------|--------|
+ * | `low` | green |
+ * | `medium` | amber |
+ * | `high` | red |
  */
-declare const cryptocontrolThemeColors: Required<DeframeThemeColors>;
+declare function StrategyRiskBadge({ risk, label, className, ...props }: StrategyRiskBadgeProps): react_jsx_runtime.JSX.Element;
 /**
- * Convert theme colors to CSS variable style object
+ * Single strategy card — icon + name + network, rendimento %, risk badge,
+ * and "Investir" / "Sacar" action buttons.
  */
-declare function themeToCSS(theme?: DeframeTheme): React.CSSProperties;
+declare function StrategyListItem({ strategy, name, network, rendimento, risk, onInvestir, onSacar, showSacar, className, ...props }: StrategyListItemProps): react_jsx_runtime.JSX.Element;
 
-interface DeframeComponentsProviderProps {
-    /** Theme preset: 'light' | 'dark' | 'cryptocontrol' (legacy) */
-    theme?: string;
-    /** Structured theme configuration (preferred) */
-    themeConfig?: DeframeThemeConfig;
-    /** Custom theme colors that override the preset */
-    customTheme?: DeframeTheme;
-    /** Optional extra className applied to the `.deframe-widget` root */
+interface TokenIconProps {
+    token: {
+        name: string;
+        color: string;
+        iconUrl?: string;
+    };
+    size?: number;
+    badge?: {
+        name: string;
+        color: string;
+        iconUrl?: string;
+    };
+    badgeSize?: number;
     className?: string;
-    /** Child components */
-    children: React.ReactNode;
 }
-declare function DeframeComponentsProvider({ theme, themeConfig, customTheme, className, children }: DeframeComponentsProviderProps): react_jsx_runtime.JSX.Element;
+/**
+ * Token icon with an optional network badge overlaid at the bottom-right.
+ * Wraps IconCircle — falls back to colored circle with initials when no iconUrl.
+ */
+declare function TokenIcon({ token, size, badge, badgeSize, className }: TokenIconProps): react_jsx_runtime.JSX.Element;
+
+interface PercentageChipsProps {
+    /** Percentage values — last item uses maxLabel. Default: [25, 50, 75, 100] */
+    options?: number[];
+    /** Label shown for the last (100 %) chip. Default: 'Máx.' */
+    maxLabel?: string;
+    /** Currently active percentage (null = none selected) */
+    selected?: number | null;
+    onSelect: (pct: number) => void;
+}
+/**
+ * Row of percentage shortcut pills for the "from" token input.
+ * Designed to be revealed via Framer Motion AnimatePresence in SwapPanel.
+ */
+declare function PercentageChips({ options, maxLabel, selected, onSelect, }: PercentageChipsProps): react_jsx_runtime.JSX.Element;
+
+type NotifVariant = 'info' | 'warning' | 'error' | 'success';
+interface InlineNotificationProps {
+    variant: NotifVariant;
+    message: string;
+    action?: {
+        label: string;
+        onClick: () => void;
+    };
+    onDismiss?: () => void;
+}
+/**
+ * Compact inline message bar with a 3 px left accent stripe.
+ * Use inside TokenInputCard or any card surface — not a floating toast.
+ */
+declare function InlineNotification({ variant, message, action, onDismiss, }: InlineNotificationProps): react_jsx_runtime.JSX.Element;
+
+interface TokenSelectorToken {
+    name: string;
+    symbol: string;
+    color: string;
+    iconUrl?: string;
+    network: string;
+    networkColor?: string;
+    networkIconUrl?: string;
+}
+interface TokenSelectorProps {
+    token: TokenSelectorToken;
+    onClick?: () => void;
+    disabled?: boolean;
+}
+/**
+ * Clickable area showing the selected token — icon, name, network label, and a
+ * downward chevron. Occupies the left half of a TokenInputCard.
+ */
+declare function TokenSelector({ token, onClick, disabled }: TokenSelectorProps): react_jsx_runtime.JSX.Element;
+
+interface AmountInputProps {
+    value: string;
+    onChange: (v: string) => void;
+    /** e.g. '≈ $0.00' — shown below the amount in muted text */
+    conversionUsd?: string;
+    /** "to" field — shows a computed amount with no editing */
+    readOnly?: boolean;
+    disabled?: boolean;
+}
+/**
+ * Large amount input occupying the right half of a TokenInputCard.
+ * - 36 px semibold number, right-aligned
+ * - Muted colour when value is empty / '0', primary otherwise
+ * - USD conversion label appears below when provided
+ * - inputMode="decimal" for mobile numeric pad
+ */
+declare function AmountInput({ value, onChange, conversionUsd, readOnly, disabled, }: AmountInputProps): react_jsx_runtime.JSX.Element;
+
+interface SwapDirectionButtonProps {
+    onClick?: () => void;
+    disabled?: boolean;
+}
+/**
+ * The ↓ button placed between the two TokenInputCards.
+ * Hovers with a Framer Motion rotate-180 animation to indicate direction swap.
+ * Negatively offset by the parent so it visually overlaps both cards.
+ */
+declare function SwapDirectionButton({ onClick, disabled }: SwapDirectionButtonProps): react_jsx_runtime.JSX.Element;
+
+interface TokenInputCardProps {
+    token: TokenSelectorToken;
+    amount: string;
+    onAmountChange?: (v: string) => void;
+    /** e.g. '0' or '41' — shown as "Saldo: X SYMBOL" */
+    balance?: string;
+    balanceSymbol?: string;
+    /** e.g. '≈ $0.00' — forwarded to AmountInput */
+    conversionUsd?: string;
+    /** Opens the BlockchainAssetSelector */
+    onTokenSelect?: () => void;
+    /** True for the "to" card — amount is read-only */
+    readOnly?: boolean;
+    error?: 'insufficient_balance' | null;
+    /** Signals SwapPanel to show/hide PercentageChips */
+    onHoverChange?: (hovering: boolean) => void;
+    /** Optional slot rendered inside the card, below the balance row */
+    chipsSlot?: React$1.ReactNode;
+}
+/**
+ * Full input card: TokenSelector on the left + AmountInput on the right +
+ * balance row below. Turns red in the error='insufficient_balance' state and
+ * shows an InlineNotification with a "Adicionar via PIX" action.
+ */
+declare function TokenInputCard({ token, amount, onAmountChange, balance, balanceSymbol, conversionUsd, onTokenSelect, readOnly, error, onHoverChange, chipsSlot, }: TokenInputCardProps): react_jsx_runtime.JSX.Element;
+
+type SwapFeedbackVariant = 'loading' | 'success' | 'error';
+
+interface SwapToken {
+    id: string;
+    name: string;
+    symbol: string;
+    color: string;
+    iconUrl?: string;
+    network: string;
+    networkColor?: string;
+    networkIconUrl?: string;
+}
+interface SwapPanelProps {
+    fromToken: SwapToken;
+    toToken: SwapToken;
+    fromAmount: string;
+    /** Computed / read-only amount shown in the "to" card */
+    toAmount: string;
+    onFromAmountChange: (v: string) => void;
+    /** Optional exact percentage callback for host integrations that need precise balance math */
+    onFromPercentageSelect?: (pct: number) => void;
+    onFromTokenSelect?: () => void;
+    onToTokenSelect?: () => void;
+    /** Called when the user clicks the direction-swap button */
+    onSwapTokens?: () => void;
+    fromBalance?: string;
+    fromBalanceSymbol?: string;
+    toBalance?: string;
+    toBalanceSymbol?: string;
+    fromConversionUsd?: string;
+    toConversionUsd?: string;
+    onSubmit?: () => void;
+    /** Default: 'Revisar Troca' */
+    submitLabel?: string;
+    /** Forces the submit CTA into a disabled state for host-driven validation */
+    submitDisabled?: boolean;
+    /** Clock icon — opens history */
+    onHistory?: () => void;
+    /** Opens advanced settings */
+    onAdvanced?: () => void;
+    loading?: boolean;
+    error?: 'insufficient_balance' | null;
+    /** When set, renders a glass-blur feedback overlay (loading / success / error) */
+    feedback?: {
+        variant: SwapFeedbackVariant;
+        title?: string;
+        subtitle?: string;
+    } | null;
+}
+
+/**
+ * Full token swap form orchestrator.
+ *
+ * Built-in behaviour:
+ * - Hovering the "from" card reveals PercentageChips as an absolutely-positioned
+ * tooltip above the card (no layout shift). A 150 ms hide-delay lets the
+ * cursor travel from the card to the chips without them flickering away.
+ * - Clicking a % chip sets fromAmount = balance × pct / 100
+ * - SwapDirectionButton calls onSwapTokens
+ * - Submit button is disabled when amount is empty / '0' or loading is true
+ * - Submit button shows a spinner while loading
+ * - History button sits top-left, styled as CloseButton (icon-only, hover bg)
+ * - "Avançado" pill sits top-right with green outline; calls onAdvanced
+ */
+declare function SwapPanel({ fromToken, toToken, fromAmount, toAmount, onFromAmountChange, onFromPercentageSelect, onFromTokenSelect, onToTokenSelect, onSwapTokens, fromBalance, fromBalanceSymbol, toBalance, toBalanceSymbol, fromConversionUsd, toConversionUsd, onSubmit, submitLabel, submitDisabled, onHistory, onAdvanced, loading, error, feedback, }: SwapPanelProps): react_jsx_runtime.JSX.Element;
+
+interface TransactionDetailRowProps {
+    /** Uppercase label — e.g. 'VALIDADE', 'SLIPPAGE' */
+    label: string;
+    /** Formatted value — e.g. '30 min', '0.5%' */
+    value: string;
+    /** Optional value colour override — data-driven hex, kept as style */
+    valueColor?: string;
+    /** Show a horizontal divider below this row (default false) */
+    divider?: boolean;
+}
+/**
+ * Single label + value row used inside TransactionDetails.
+ *
+ * Label: small, uppercase, letter-spaced, muted
+ * Value: semibold, primary colour (or custom override)
+ */
+declare function TransactionDetailRow({ label, value, valueColor, divider, }: TransactionDetailRowProps): react_jsx_runtime.JSX.Element;
+
+interface TransactionDetailItem {
+    /** Row label — displayed uppercase, muted */
+    label: string;
+    /** Formatted value string */
+    value: string;
+    /** Optional colour override for value text */
+    valueColor?: string;
+}
+interface TransactionDetailsProps {
+    /** Panel heading — default: 'Detalhes da transação' */
+    title?: string;
+    /** Conversion subtitle, e.g. '9.682785 USDC = 0.003873 ETH' */
+    subtitle?: string;
+    /** List of detail rows */
+    items: TransactionDetailItem[];
+    /** Called when the ✕ button is pressed */
+    onClose?: () => void;
+}
+/**
+ * Transaction detail panel — sits beside the SwapPanel when "Avançado" is pressed.
+ */
+declare function TransactionDetails({ title, subtitle, items, onClose, }: TransactionDetailsProps): react_jsx_runtime.JSX.Element;
 
 interface InfoRowProps {
     children: React__default.ReactNode;
@@ -622,14 +1237,6 @@ interface DetailsHeaderProps {
 }
 declare const DetailsHeader: React__default.FC<DetailsHeaderProps>;
 
-interface CloseButtonProps {
-    onClick?: () => void;
-    testId?: string;
-    ariaLabel?: string;
-    className?: string;
-}
-declare const CloseButton: React__default.FC<CloseButtonProps>;
-
 interface HighRiskBadgeProps {
     className?: string;
     label?: string;
@@ -1342,4 +1949,24 @@ declare const ConfirmSwapButtonView: React__default.FC<ConfirmSwapButtonViewProp
 
 type SwapValidationCode = 'NO_WALLET' | 'NO_CHAIN' | 'NO_TOKEN' | 'INVALID_TOKEN' | 'NO_AMOUNT' | 'AMOUNT_BELOW_MINIMUM' | 'INSUFFICIENT_BALANCE' | 'INVALID_AMOUNT' | 'VALID_SWAP';
 
-export { ActionButton, ActionSheet, type ActionSheetProps, AddressDisplay, type AddressDisplayProps, BackgroundContainer, type BackgroundContainerProps, type BalanceDomain, BannerNotification, type BannerNotificationProps, type ButtonProps, ChooseAStrategyActionsheetView, type ChooseAStrategyActionsheetViewProps, type ChooseAnAssetSwapLabels, ChooseAnAssetSwapView, type ChooseAnAssetSwapViewProps, CloseButton, type CloseButtonProps, CollapsibleInfoRow, type CollapsibleInfoRowProps, CollapsibleSection, type CollapsibleSectionProps, type ConfirmSwapButtonLabels, ConfirmSwapButtonView, type ConfirmSwapButtonViewProps, ConnectWalletList, type ConnectWalletListProps, Currency, type CurrencyProps, type CurrencyType, DeframeComponentsProvider, type DeframeTheme, type DeframeThemeColors, type DeframeThemeConfig, type DetailItem, DetailsHeader, type DetailsHeaderProps, Currency as Fiat, type FiatProps, FlexCol, type FlexColProps, FlexRow, type FlexRowProps, HighRiskBadge, type HighRiskBadgeProps, type HistoryAssetViewProps, HistoryDepositDetailsView, type HistoryDetailsLabels, type HistoryDetailsViewProps, HistoryWithdrawDetailsView, InfoLabel, type InfoLabelProps, InfoRow, InfoRowIconLabel, type InfoRowIconLabelProps, InfoRowIconValue, type InfoRowIconValueProps, type InfoRowProps, InfoRowWithIcon, type InfoRowWithIconProps, InfoValue, type InfoValueProps, Input, type InputFieldRegistration, type InputProps, Link, type LinkProps, ListItem, ListItemContent, ListItemLeftSide, type ListItemProps, ListItemRightSide, LoadingDots, type LoadingDotsProps, LowRiskBadge, type LowRiskBadgeProps, MediumRiskBadge, type MediumRiskBadgeProps, Navbar, type NavbarProps, PercentageButton, PrimaryButton, ProgressIndicator, type ProgressIndicatorProps, ScrollableContent, type ScrollableContentProps, SearchEmptyState, type SearchEmptyStateProps, SearchInput, type SearchInputProps, SecondaryButton, SectionCard, type SectionCardProps, Select, SelectContent, type SelectContentProps, SelectItem, type SelectItemProps, type SelectProps, SelectTrigger, type SelectTriggerProps, Skeleton, type SkeletonProps, StepDisplay, type StepDisplayProps, StepStatusIcon, type StepStatusIconProps, StepStatusText, type StepStatusTextProps, StrategyDetailsView, type StrategyDetailsViewProps, SummaryDetails, SummaryDetailsCryptoControlV2, type SummaryDetailsProps, SwapAdvancedSettingsView, type SwapAdvancedSettingsViewProps, SwapAmountInputView, type SwapAmountInputViewProps, type SwapCardLabels, SwapCrossChainProcessingView, type SwapCrossChainProcessingViewProps, type SwapFormLabels, SwapFormView, type SwapFormViewProps, SwapFromCardView, type SwapFromCardViewProps, SwapNetworkSelectorView, type SwapNetworkSelectorViewProps, SwapOutputAmountView, type SwapOutputAmountViewProps, SwapProcessingView, type SwapProcessingViewProps, SwapQuoteBlockchainCostsView, type SwapQuoteBlockchainCostsViewProps, type SwapQuoteDetailsLabels, SwapQuoteDetailsView, type SwapQuoteDetailsViewProps, SwapQuoteErrorsView, type SwapQuoteErrorsViewProps, SwapQuoteHeaderView, type SwapQuoteHeaderViewProps, SwapSignatureWarningView, type SwapSignatureWarningViewProps, SwapSlippageToleranceButtonsView, type SwapSlippageToleranceButtonsViewProps, type SwapSuccessLabels, SwapSuccessView, type SwapSuccessViewProps, SwapToCardView, type SwapToCardViewProps, SwapTokenSelectorView, type SwapTokenSelectorViewProps, SwapTransactionFailedView, type SwapTransactionFailedViewProps, type SwapValidationCode, Tabs, TabsContent, type TabsContentProps, TabsList, type TabsListProps, type TabsProps, TabsTrigger, type TabsTriggerProps, TertiaryButton, Text, TextAccent, type TextAccentProps, TextBody, type TextBodyProps, TextHeading, type TextHeadingProps, type ThemeMode, type ThemePreset, Title, type TokenData, TokenWithChainBadge, type TokenWithChainBadgeProps, TransactionProcessingDetails, type TransactionProcessingDetailsLabels, type TransactionProcessingDetailsProps, TransactionScreen, TransactionScreenIcon, type TransactionScreenIconProps, TransactionScreenInvestmentCard, type TransactionScreenInvestmentCardProps, type TransactionScreenProps, type TransactionStep, type TransactionStepStatus, WalletItem, type WalletItemProps, ConnectWalletList as WalletList, WalletListContainer, type WalletListContainerProps, type WalletOption, cryptocontrolThemeColors, darkThemeColors, defaultThemeColors, themeToCSS };
+interface DeframeThemeColors {
+    brandPrimary?: string;
+    brandSecondary?: string;
+    bgDefault?: string;
+    bgSubtle?: string;
+    bgMuted?: string;
+    bgRaised?: string;
+    bgInverse?: string;
+    textPrimary?: string;
+    textSecondary?: string;
+    textDisabled?: string;
+    textInverse?: string;
+    stateSuccess?: string;
+    stateError?: string;
+    stateWarning?: string;
+}
+interface DeframeTheme {
+    colors?: DeframeThemeColors;
+}
+
+export { ActionButton, ActionSheet, type ActionSheetProps, AddressDisplay, type AddressDisplayProps, AmountInput, type AmountInputProps, type Asset, type AssetFilterOption, AssetList, AssetListColumns, type AssetListColumnsProps, AssetListFilter, type AssetListFilterProps, AssetListHeader, type AssetListHeaderProps, AssetListItem, type AssetListItemProps, type AssetListProps, AssetRow, AssetTrendBadge, type AssetTrendBadgeProps, type AssetTrendDirection, BackgroundContainer, type BackgroundContainerProps, type BalanceDomain, BannerNotification, type BannerNotificationProps, BlockchainAssetSelector, type BlockchainAssetSelectorProps, type ButtonProps, type Chain, ChainChip, ChainRow, ChooseAStrategyActionsheetView, type ChooseAStrategyActionsheetViewProps, type ChooseAnAssetSwapLabels, ChooseAnAssetSwapView, type ChooseAnAssetSwapViewProps, CloseButton, CollapsibleInfoRow, type CollapsibleInfoRowProps, CollapsibleSection, type CollapsibleSectionProps, type ConfirmSwapButtonLabels, ConfirmSwapButtonView, type ConfirmSwapButtonViewProps, ConnectWalletList, type ConnectWalletListProps, Currency, type CurrencyProps, type CurrencyType, DeframeComponentsProvider, type DeframeTheme, type DeframeThemeColors, type DetailItem, DetailsHeader, type DetailsHeaderProps, Currency as Fiat, type FiatProps, FilterGroupBar, type FilterGroupBarProps, type FilterGroupItem, FlexCol, type FlexColProps, FlexRow, type FlexRowProps, HighRiskBadge, type HighRiskBadgeProps, type HistoryAssetViewProps, HistoryDepositDetailsView, type HistoryDetailsLabels, type HistoryDetailsViewProps, HistoryWithdrawDetailsView, IconCircle, InfoLabel, type InfoLabelProps, InfoRow, InfoRowIconLabel, type InfoRowIconLabelProps, InfoRowIconValue, type InfoRowIconValueProps, type InfoRowProps, InfoRowWithIcon, type InfoRowWithIconProps, InfoValue, type InfoValueProps, InlineNotification, type InlineNotificationProps, Input, type InputFieldRegistration, type InputProps, Link, type LinkProps, ListItem, ListItemContent, ListItemLeftSide, type ListItemProps, ListItemRightSide, LoadingDots, type LoadingDotsProps, LowRiskBadge, type LowRiskBadgeProps, MediumRiskBadge, type MediumRiskBadgeProps, Navbar, type NavbarProps, type NotifVariant, PercentageButton, PercentageChips, type PercentageChipsProps, PrimaryButton, ProgressIndicator, type ProgressIndicatorProps, ScrollableContent, type ScrollableContentProps, SearchEmptyState, type SearchEmptyStateProps, SearchInput, type SearchInputProps, SecondaryButton, SectionCard, type SectionCardProps, type SegmentOption, SegmentedControl, type SegmentedControlProps, Select, SelectContent, type SelectContentProps, SelectItem, type SelectItemProps, type SelectProps, SelectTrigger, type SelectTriggerProps, Skeleton, type SkeletonProps, StatCard, StatCardBadge, type StatCardBadgeProps, StatCardDescription, type StatCardDescriptionProps, StatCardDivider, type StatCardDividerProps, StatCardHeader, type StatCardHeaderProps, StatCardIcon, type StatCardIconProps, StatCardLabel, type StatCardLabelProps, type StatCardProps, StatCardRow, type StatCardRowProps, StatCardTrend, type StatCardTrendDirection, type StatCardTrendProps, StatCardValue, type StatCardValueProps, type StatCardValueTone, StepDisplay, type StepDisplayProps, StepStatusIcon, type StepStatusIconProps, StepStatusText, type StepStatusTextProps, StrategyDetailsView, type StrategyDetailsViewProps, StrategyList, StrategyListHeader, type StrategyListHeaderProps, StrategyListItem, type StrategyListItemProps, type StrategyListProps, type StrategyRisk, StrategyRiskBadge, type StrategyRiskBadgeProps, SummaryDetails, SummaryDetailsCryptoControlV2, type SummaryDetailsProps, SwapAdvancedSettingsView, type SwapAdvancedSettingsViewProps, SwapAmountInputView, type SwapAmountInputViewProps, type SwapCardLabels, SwapCrossChainProcessingView, type SwapCrossChainProcessingViewProps, SwapDirectionButton, type SwapDirectionButtonProps, type SwapFormLabels, SwapFormView, type SwapFormViewProps, SwapFromCardView, type SwapFromCardViewProps, SwapNetworkSelectorView, type SwapNetworkSelectorViewProps, SwapOutputAmountView, type SwapOutputAmountViewProps, SwapPanel, type SwapPanelProps, SwapProcessingView, type SwapProcessingViewProps, SwapQuoteBlockchainCostsView, type SwapQuoteBlockchainCostsViewProps, type SwapQuoteDetailsLabels, SwapQuoteDetailsView, type SwapQuoteDetailsViewProps, SwapQuoteErrorsView, type SwapQuoteErrorsViewProps, SwapQuoteHeaderView, type SwapQuoteHeaderViewProps, SwapSignatureWarningView, type SwapSignatureWarningViewProps, SwapSlippageToleranceButtonsView, type SwapSlippageToleranceButtonsViewProps, type SwapSuccessLabels, SwapSuccessView, type SwapSuccessViewProps, SwapToCardView, type SwapToCardViewProps, type SwapToken, SwapTokenSelectorView, type SwapTokenSelectorViewProps, SwapTransactionFailedView, type SwapTransactionFailedViewProps, type SwapValidationCode, Tabs, TabsContent, type TabsContentProps, TabsList, type TabsListProps, type TabsProps, TabsTrigger, type TabsTriggerProps, TertiaryButton, Text, TextAccent, type TextAccentProps, TextBody, type TextBodyProps, TextHeading, type TextHeadingProps, Title, type TokenData, TokenIcon, type TokenIconProps, TokenInputCard, type TokenInputCardProps, TokenSelector, type TokenSelectorProps, type TokenSelectorToken, TokenWithChainBadge, type TokenWithChainBadgeProps, type TransactionDetailItem, TransactionDetailRow, type TransactionDetailRowProps, TransactionDetails, type TransactionDetailsProps, TransactionProcessingDetails, type TransactionProcessingDetailsLabels, type TransactionProcessingDetailsProps, TransactionScreen, TransactionScreenIcon, type TransactionScreenIconProps, TransactionScreenInvestmentCard, type TransactionScreenInvestmentCardProps, type TransactionScreenProps, type TransactionStep, type TransactionStepStatus, WalletConnectPanel, type WalletConnectPanelProps, WalletItem, type WalletItemProps, ConnectWalletList as WalletList, WalletListContainer, type WalletListContainerProps, type WalletOption };